Как дать нескольким элементам ItemsControl знание z-индекса друг друга?WPF - PullRequest
Новая
       31

Как дать нескольким элементам ItemsControl знание z-индекса друг друга?WPF

0 голосов
/ 12 июня 2019

У меня есть два ItemsControls в моем XAML, оба привязаны к списку фигур с разными координатами, высотой, шириной и т. Д. *

Похоже, что фигуры в одном и том же списке знают о z-индексе друг друга - как в случае, когда я могу наводить курсор на фигуру, она выводит ее на передний план других фигур, как и предполагалось.

Мне бы хотелось, чтобы прямоугольники в List1 знали о z-индексе прямоугольников в List2, чего они, похоже, не имеют в данный момент. Есть ли простой способ настроить мой 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-индексе друг друга.

1 Ответ

1 голос
/ 12 июня 2019

Вы можете помещать различные типы фигур в один список и отображать их в одном элементе 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 });
    }
}

и ItemControl, который имеет ресурсы DataTemplate для различных типов фигур: 

<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>
...