形状似乎对设置ZIndex没有反应吗？

Question

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

此图像显示外观，具体取决于添加对象的顺序。 我希望这些形状遵守我设置的Panel.ZIndex ，并且这样做时，看起来像顶部图像（背面的金色矩形除外）。

<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
    • 带有Panel.ZIndex="98" Ellipse

由于Ellipse是Grid的子级，因此ZOrder不会影响ZoomableCanvas ，而是相对于网格的其他子级设置Ellipse的ZIndex 。 为了改变的分层ZoomableCanvas ，你需要设置ZOrder上的孩子财产ZoomableCanvas -中Grid ：

• ZoomableCanvas
  • 带有Panel.ZIndex="98" Grid
    • 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 ，则最终会在树中添加其他级别：

• ZoomableCanvas
  • 具有ItemContainerStyle设置Panel.ZIndex="98" ListBoxItem
    • Grid
      • Ellipse

使用示例：

<ListBox>
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="Panel.ZIndex" Value="98" />
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

如果您有多个变化的ZIndex ，则可以在数据项上公开一个属性并绑定到该属性，或者使用ItemContainerStyleSelector进行代码隐藏中的逻辑。

您还可以使用Snoop查看创建的树以识别此类问题。