我正在尝试使用 Canvas
布局将项目列表绑定(bind)到 ItemsControl
,其中该项目具有多个“级别”。使用图像最容易解释:
在这种情况下,我的较低级别是一个投影。因为我假设投影将附加到主元素(Button
),所以我创建了另一个视觉元素,即 Border,它位于 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 XPath=@Title}" />
</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 XPath=@X}" />
<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>
预先感谢您提供的任何想法!
最佳答案
由于绑定(bind)对象包装在 ContentPresenter
中,所有内部 ZIndex
设置都将被忽略,因此您无法执行您所描述的操作。您最好为每个层创建一个 ItemsControl
。
关于wpf - 在 Canvas 上的 DataBound 项目中设置 Z-Index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4853380/