2011-01-31 32 views
2

我正試圖使用​​Canvas佈局將項目列表綁定到ItemsControl,其中項目具有多個「級別」。這是最簡單的使用圖像來解釋:在畫布上的DataBound項目中設置Z索引

Problem

我的較低水平是下拉陰影在這種情況下。因爲我認爲陰影會附加到主要元素(a Button),所以我創建了另一個視覺元素,一個邊框,它位於Button的後面並附有陰影。我想要的是我的所有影子元素都處於相同的整體ZIndex,並且所有的Button元素都在它們之上。

在實踐中,似乎WPF渲染我的模板的內容作爲一個單一的UI元素,基本上是扁平化在其中的ZIndex ES。有沒有什麼辦法可以讓ZIndex的值不會變平?

我創建了一個樣本下面這說明問題:

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="250" Width="600" Background="White"> 
    <Window.Resources> 
    <DropShadowEffect Color="Blue" BlurRadius="75" x:Key="ActionDropShadow" /> 

    <XmlDataProvider x:Key="myData" XPath="Data/Items"> 
     <x:XData> 
     <Data xmlns=""> 
      <Items> 
      <Item X="50" Title="AAA" /> 
      <Item X="100" Title="BBB" /> 
      <Item X="150" Title="CCC" /> 
      </Items> 
     </Data> 
     </x:XData> 
    </XmlDataProvider> 

    <DataTemplate x:Key="BoxTemplate"> 
     <Grid> 
     <Border Background="Black" BorderThickness="1" Effect="{StaticResource ActionDropShadow}" /> 
     <Button Background="White" BorderThickness="1"> 
      <TextBlock Text="{Binding [email protected]}" /> 
     </Button> 
     </Grid> 
    </DataTemplate> 
    </Window.Resources> 

    <Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 

    <ItemsControl Grid.Column="0" x:Name="list" ItemTemplate="{StaticResource BoxTemplate}" ItemsSource="{Binding Source={StaticResource myData},XPath=*}"> 
     <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Canvas /> 
     </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemContainerStyle> 
     <Style TargetType="ContentPresenter"> 
      <Setter Property="Canvas.Left" Value="{Binding [email protected]}" /> 
      <Setter Property="Canvas.Top" Value="50" /> 
      <Setter Property="Width" Value="50" /> 
      <Setter Property="Height" Value="80" /> 
     </Style> 
     </ItemsControl.ItemContainerStyle> 
    </ItemsControl> 

    <Canvas Grid.Column="1"> 
     <Border Panel.ZIndex="5" Canvas.Top="50" Canvas.Left="50" Width="50" Height="80" Background="Black" BorderThickness="1" Effect="{StaticResource ActionDropShadow}" /> 
     <Button Panel.ZIndex="10" Canvas.Top="50" Canvas.Left="50" Width="50" Height="80" Background="White" BorderThickness="1"> 
     <TextBlock Text="AAA" /> 
     </Button> 
     <Border Panel.ZIndex="5" Canvas.Top="50" Canvas.Left="100" Width="50" Height="80" Background="Black" BorderThickness="1" Effect="{StaticResource ActionDropShadow}" /> 
     <Button Panel.ZIndex="10" Canvas.Top="50" Canvas.Left="100" Width="50" Height="80" Background="White" BorderThickness="1"> 
     <TextBlock Text="BBB" /> 
     </Button> 
     <Border Panel.ZIndex="5" Canvas.Top="50" Canvas.Left="150" Width="50" Height="80" Background="Black" BorderThickness="1" Effect="{StaticResource ActionDropShadow}" /> 
     <Button Panel.ZIndex="10" Canvas.Top="50" Canvas.Left="150" Width="50" Height="80" Background="White" BorderThickness="1"> 
     <TextBlock Text="CCC" /> 
     </Button> 
    </Canvas> 

    <TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center">Databinding Version</TextBlock> 
    <TextBlock Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center">What it should look like</TextBlock> 
    </Grid> 
</Window> 

提前爲你能提供任何想法謝謝!

回答

3

由於綁定的對象被包裝在ContentPresenter中,因此所有內部ZIndex設置都將被忽略,因此您無法執行所描述的操作。爲每個圖層創建一個ItemsControl可能會更好。

+0

這是結束我會來這麼遠也。我希望有一種方法不涉及第二個ItemsControl – Richard 2011-01-31 17:18:07

0

獲取父母ContentPresenter並設置ZIndex

E.g:

var parent = (UIElement) VisualTreeHelper.GetParent((UIElement) sender); 
parent.SetZIndex(parent, z);