如何让多个 ItemsControl 知道彼此的 z-index？ WPF

Question

我的 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。

Answer 1

您可以将不同类型的形状放入一个列表中，并在一个 ItemsControl 中显示它们。

使用这样的视图模型：

public class Shape
{
    public double XPos { get; set; }
    public double YPos { get; set; }
    public Color Fill { get; set; }
}

public class Circle : Shape
{
    public double Diameter { get; set; }
}

public class Rect : Shape
{
    public double Width { get; set; }
    public double Height { get; set; }
}

public class ViewModel
{
    public List<Shape> Shapes { get; } = new List<Shape>();

    public ViewModel()
    {
        Shapes.Add(new Rect { Width = 30, Height = 50, XPos = 40, YPos = 50, Fill = Colors.Blue });
        Shapes.Add(new Rect { Width = 70, Height = 120, XPos = 60, YPos = 100, Fill = Colors.Green });
        Shapes.Add(new Rect { Width = 70, Height = 120, XPos = 30, YPos = 45, Fill = Colors.Yellow });

        Shapes.Add(new Circle { Diameter = 50, XPos = 40, YPos = 100, Fill = Colors.Red });
        Shapes.Add(new Circle { Diameter = 50, XPos = 300, YPos = 100, Fill = Colors.Green });
        Shapes.Add(new Circle { Diameter = 50, XPos = 320, YPos = 75, Fill = Colors.Blue });
    }
}

和一个具有不同形状类型的 DataTemplate 资源的 ItemControl：

<ItemsControl ItemsSource="{Binding Shapes}">
    <ItemsControl.Resources>
        <DataTemplate DataType="{x:Type local:Circle}">
            <Ellipse Width="{Binding Diameter}" Height="{Binding Diameter}">
                <Ellipse.Fill>
                    <SolidColorBrush Color="{Binding Fill}"/>
                </Ellipse.Fill>
            </Ellipse>
        </DataTemplate>

        <DataTemplate DataType="{x:Type local:Rect}">
            <Rectangle Width="{Binding Width}" Height="{Binding Height}">
                <Rectangle.Fill>
                    <SolidColorBrush Color="{Binding Fill}"/>
                </Rectangle.Fill>
            </Rectangle>
        </DataTemplate>
    </ItemsControl.Resources>

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemContainerStyle>
        <Style TargetType="{x:Type ContentPresenter}">
            <Setter Property="Canvas.Top" Value="{Binding YPos}"/>
            <Setter Property="Canvas.Left" Value ="{Binding XPos}"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Panel.ZIndex" Value="10000"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

如何让多个 ItemsControl 知道彼此的 z-index？ WPF

How to give multiple ItemsControl knowledge of each other's z-index? WPF

wpf

z-index

itemscontrol