【发布时间】：2019-06-12 09:38:34
【问题描述】：
我的 XAML 中有两个 ItemsControl，它们都绑定到具有不同坐标、高度、宽度等的形状列表...
同一列表中的形状似乎知道彼此的 z-index - 因为我可以将鼠标悬停在形状上，并按预期将其带到其他形状的前面。
我希望 List1 中的矩形能够了解 List2 中矩形的 z-index，而他们目前似乎没有。有没有一种简单的方法来设置我的 XAML 来实现这一点？提前致谢。
我的 XAML：
<Grid>
<ItemsControl ItemsSource="{Binding List1}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Height="{Binding Height}" Width="{Binding Width}" Fill="{Binding Fill}" ></Rectangle>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style TargetType="{x:Type ContentPresenter}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Panel.ZIndex" Value="99" />
</Trigger>
</Style.Triggers>
<Setter Property="Canvas.Top" Value="{Binding YPos}"></Setter>
<Setter Property="Canvas.Left" Value ="{Binding XPos}"></Setter>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
<ItemsControl ItemsSource="{Binding List2}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Height="{Binding Height}" Width="{Binding Width}" Fill="{Binding Fill}" ></Rectangle>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style TargetType="{x:Type ContentPresenter}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Panel.ZIndex" Value="99" />
</Trigger>
</Style.Triggers>
<Setter Property="Canvas.Top" Value="{Binding YPos}"></Setter>
<Setter Property="Canvas.Left" Value ="{Binding XPos}"></Setter>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Grid>
我在其中定义矩形的 ViewModel：
public class ViewModel {
public List<Rect> List1 { get; set; }
public List<Rect> List2 { get; set; }
public ViewModel() {
List1 = new List<Rect>();
List2 = new List<Rect>();
PopulateList1();
PopulateList2();
}
private void PopulateList2() {
List1.Add(new Rect { Width = 30, Height = 50, XPos = 40, YPos = 50, Fill = "Blue" });
List1.Add(new Rect { Width = 70, Height = 120, XPos = 60, YPos = 100, Fill = "Green" });
List1.Add(new Rect { Width = 70, Height = 120, XPos = 30, YPos = 45, Fill = "Yellow" });
}
private void PopulateList1() {
List2.Add(new Rect { Width = 50, Height = 100, XPos = 40, YPos = 100, Fill = "Red" });
List2.Add(new Rect { Width = 50, Height = 100, XPos = 300, YPos = 100, Fill = "Green" });
List2.Add(new Rect { Width = 50, Height = 100, XPos = 320, YPos = 75, Fill = "Blue" });
}
}
矩形模型：
public class Rect {
public decimal Width { get; set; }
public decimal Height { get; set; }
public decimal XPos { get; set; }
public decimal YPos { get; set; }
public string Fill { get; set; }
}
编辑：https://imgur.com/a/1dzYYKc 为了澄清，这里显示了矩形。目前，当我将鼠标悬停在他们自己列表中的形状上时，它们会按预期出现，但来自其他列表的重叠形状不会出现，因为他们大概不知道彼此的 z-index。
【问题讨论】：
-
您的意思是两个 ItemsControls 被绘制在彼此的顶部，并且您希望来自下部的 Rectangle 出现在上部的顶部？这是行不通的，因为 ZIndex 仅对单个 ItemsControl 的 ItemsPanel Canvas 的子元素有效。将所有形状放入单个 List 并使用单个 ItemsControl。
-
@Clemens 有没有办法像这样实现它？我想知道，因为这是我在对我的初始项目感到沮丧之后进行的试验，将它们全部放入一个 ItemsControl 是行不通的。编辑：PS 我已经用一张图片编辑了我的帖子以澄清我的意思。
-
我怀疑将所有形状放入单个 ItemsControl 是行不通的。你只需要做对:-)
-
@Clemens 如果我在画布中使用圆形、矩形和线条，那么将它们全部放在同一个列表中肯定没有意义吗？
标签： wpf z-index itemscontrol