形状似乎没有对设置Z指数做出反应？

Question

目前，我在屏幕上绘制了三种不同类型的对象（我使用的是ZoomableCanvas，如果这有所不同）：信标（同心蓝色圆圈），表格（黑色矩形）和debugRectangles（金色）矩形。根据它们添加到ItemSource的顺序在Z轴上显示/分层对象，但是我并不总是可以按Z顺序添加形状。

此图像显示其外观，具体取决于要添加的对象的顺序。我希望形状能够尊重我设置的Panel.ZIndex es，并且这样做看起来像顶部图像（除了后面的金色矩形）。

<Style.Triggers>
    <!-- Gold rectangles drawn here (color set in code) -->
    <DataTrigger Binding="{Binding type}" Value="rectangle">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <Rectangle Fill="{Binding fill}" Stroke="{Binding border}" StrokeThickness="5"
                                   Width="{Binding width}" Height="{Binding height}" Panel.ZIndex="-1"/>
                        <TextBlock Text="{Binding i}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </DataTrigger>

    <!-- Black rectangles drawn here -->
    <DataTrigger Binding="{Binding type}" Value="tableBlock">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <Rectangle Fill="{Binding fill}" Stroke="Black" StrokeThickness="5"
                                   Width="{Binding width}" Height="{Binding height}" Panel.ZIndex="50"/>
                        <TextBlock Text="{Binding i}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </DataTrigger>

    <!-- Blue circles drawn here -->
    <DataTrigger Binding="{Binding type}" Value="beacon">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <Ellipse Fill="DodgerBlue" Width="{Binding outerRadius}" Height="{Binding outerRadius}" Panel.ZIndex="97"/>
                        <Ellipse Fill="SkyBlue" Width="{Binding innerRadius}" Height="{Binding innerRadius}" Panel.ZIndex="98"/>
                        <TextBlock Text="{Binding id}" HorizontalAlignment="Center" VerticalAlignment="Center" Panel.ZIndex="99"/>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </DataTrigger>
</Style.Triggers>

在模板中，它们遵循顺序（我可以重新排列信标的组件），但相对于彼此，没有骰子。任何人都可以确定这个问题吗？

Answer 1

您是否尝试在网格上设置Panel.ZIndex？

Answer 2

ZoomableCanvas依赖Panel进行渲染，这意味着它使用ZIndex的标准排序。

<Window x:Class="ZoomableApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel>
        <ZoomableCanvas>
            <Rectangle Fill="Green" Height="250" Width="250" />
            <Rectangle Fill="Red" Height="200" Width="400" Panel.ZIndex="2" />
            <Rectangle Fill="Blue" Height="400" Width="200" />
        </ZoomableCanvas>
    </DockPanel>
</Window>

您遇到的问题是您的可视化树看起来像这样：

• ZoomableCanvas
  • Grid
    • Ellipse与Panel.ZIndex="98"

由于Ellipse是网格的子级，ZOrder不会影响ZoomableCanvas，而是设置ZIndex的{​​{1}}相对于网格的其他孩子。要更改Ellipse的分层，您需要在ZoomableCanvas - ZOrder的子项上设置ZoomableCanvas属性：

• Grid
  • ZoomableCanvas Grid
    • Panel.ZIndex="98"

示例：

Ellipse

如果您使用的是<DataTemplate> <Grid Panel.ZIndex="100"> <Rectangle Fill="{Binding fill}" Stroke="Black" StrokeThickness="5" Width="{Binding width}" Height="{Binding height}" Panel.ZIndex="50"/> <TextBlock Text="{Binding i}" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </DataTemplate> ，则最终会在树中添加其他级别：

• ListBox
  {li> ZoomableCanvas ListBoxItem设置ItemContainerStyle
  • Panel.ZIndex="98"
    • Grid

使用示例：

Ellipse

如果您有多个不同的<ListBox> <ListBox.ItemContainerStyle> <Style TargetType="{x:Type ListBoxItem}"> <Setter Property="Panel.ZIndex" Value="98" /> </Style> </ListBox.ItemContainerStyle> </ListBox> es，则可以在数据项上公开属性并绑定到该属性，或使用ItemContainerStyleSelector在代码隐藏中执行逻辑。

您还可以使用Snoop查看已创建的树，以识别这些问题。