Question

我的XAML中有两个ItemsControl，它们都绑定到具有不同坐标，高度，宽度等形状的列表...

同一列表中的形状似乎了解彼此的z索引-正如我可以将鼠标悬停在该形状上，并按预期将其带到其他形状的前面。

我希望List1中的矩形了解List2中矩形的z索引，而它们似乎暂时没有。是否有设置我的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索引。

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>

如何给彼此的z-index多个ItemsControl知识？ WPF

1 个答案: