ZIndex用于在画布上动态添加元素 [英] ZIndex for dynamically added elements on a canvas

问题描述

使用Canvas.ZIndex属性使画布上的元素以正确的顺序彼此重叠时出现问题.场景如下:

I have an issue using the Canvas.ZIndex property to make elements on a canvas appear on top of each other in the right order. The scenario is as follows:

我有一个ItemsControl绑定到ViewModel中的元素列表.此ItemsControl显示为画布，并使用DataTemplates根据其数据类型显示元素.将元素动态添加到画布(实际上是添加到Elements 当用户将新元素从工具箱拖到画布上时.

I have an ItemsControl bound to a list of elements in the ViewModel. This ItemsControl is displayed as a canvas and uses DataTemplates to display the elements based on their datatype. Elements are added dynamically to the canvas (actually to the Elements list in the ViewModel) when the user drags new elements from a toolbox onto the canvas.

类型为ComponentViewModel和ScenarioViewModel的元素应通过ConnetionViewModel类型的元素(使用的视图基本上只是一条线)连接，并且ZIndex的值应比其他两个元素的ZIndex低，因此不显示该行 在其他元素之上.

Elements of the type ComponentViewModel and ScenarioViewModel should be connected by an Element of type ConnetionViewModel (which is using a view which is basically just a line) and it should have a lower ZIndex than the other two so the line is not displayed on top of the other elements.

问题是ZIndex是根据将元素添加到画布的顺序设置的，它完全忽略了手动设置ZIndex的任何尝试，这意味着该行显示在它是两个元素的顶部连接.

The problem is that the ZIndex is set based on the order of which the elements are added to the canvas and it completely ignores any attempt to set the ZIndex manually which means that the line is displayed on top of the two elements it is connecting.

ItemsControl的代码如下.

The code for the ItemsControl can be seen below.

<ItemsControl ItemsSource="{Binding Path=Elements}" >
        <ItemsControl.Resources>
            <DataTemplate DataType="{x:Type AbstractClasses:AbstractComponentViewModel}">
                <Elements:ComponentView Canvas.ZIndex="3" />
            </DataTemplate>
            <DataTemplate DataType="{x:Type AbstractClasses:AbstractScenarioViewModel}">
                <Elements:ScenarioView Canvas.ZIndex="3" />
            </DataTemplate>
            <DataTemplate DataType="{x:Type AbstractClasses:AbstractConnectionViewModel}">
                <Elements:ConnectionView Canvas.ZIndex="1" />
            </DataTemplate>
        </ItemsControl.Resources>
        <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                   <Canvas Background="Beige" Width="3000" Height="3000" ClipToBounds="True" HorizontalAlignment="Left" VerticalAlignment="Top" AllowDrop="True"/>
                </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel >
        <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="Canvas.Top" Value="{Binding Path=Y}" />
                    <Setter Property="Canvas.Left" Value="{Binding Path=X}" />
                </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>

ConnectionView是一条绑定到方案和组件中心的线.

The ConnectionView is a Line bound to the center of the scenario and component.

ScenarioView和ComponentView是图像和按钮的网格.

The ScenarioView and ComponentView are grids of images and buttons.

我也尝试过专门在网格"和直线"上的视图"中设置ZIndex，但结果相同.

I have also tried setting the ZIndex in the Views on the Grids and the Line specifically, but with the same result.

如果我更改将元素添加到集合中的顺序，则ZIndex将相应地更改，但是由于完全取决于用户添加场景和组件的顺序，因此这不在我的控制范围内，因此不是解决方案.

If I change the order in which the elements are added to the collection the ZIndex will change accordingly, but as it is completely up to the user in which order he adds Scenarios and Components this is out of my control and is therefore not a solution.

所以总结一下这个问题.如何使ConnectionViews始终显示在它正在连接的ComponentView和ScenarioView的下面?

So to sum up the question. How can I make the ConnectionViews always appear underneath the ComponentView and ScenarioView it is connecting?

推荐答案

哦，当我尝试向itemouce动态添加元素时，我遇到了同样的问题.然后看来他们的z-index会自动确定.有人知道解决这类问题的方法吗?

ohh i have the same problem when trying to dynamically add elements to a itemsouce. Then it seems like their z-index gets auto decided. Anyone know a solution to this type of problem?

这篇关于ZIndex用于在画布上动态添加元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！