如何使 ui 元素的 zindex 相对于父画布而不是包含画布？

Question

基本上，我试图通过在 1 的阴影元素（也是路径）上放置 ZIndex 并在另一个 UI 元素 2 上放置 zindex 来在用户控件中的简单 Path 元素上创建阴影效果。这 2 个元素是在根是画布的用户控件中，并按用户控件中的预期工作。

我还有一个包含此控件的画布，其中包含该控件的 2 个实例，我希望每个实例的阴影元素显示在另一个的非阴影元素下方。它不起作用，并且一个控件的阴影出现在其他非阴影元素的顶部。如果我更改用户控件的父画布的 ZIndex 索引，它会将用户控件中的两个元素放在其他用户控件元素的顶部。我认为这是因为 ZIndex 仅相对于包含的画布而不是所有画布。

在不将所有 UI 元素放在同一画布上的情况下解决此问题的最佳方法是什么？

Answer 1

恐怕您将不得不找到一种方法将您的路径组装到一个画布中。当渲染 Canvas 时，它仅尊重其直接子级的 Z-Index。您可以按如下方式进行测试：

<Canvas x:Name="LayoutRoot" Background="White">
  <Rectangle Width="100" Height="100" Fill="Green"
              Canvas.Left="20" Canvas.Top="20"
              Stroke="Black"
              Canvas.ZIndex="10"/>
  <Canvas Canvas.ZIndex="5">
    <Rectangle Width="100" Height="100" Fill="Blue"
                Canvas.Left="30" Canvas.Top="30"
                Stroke="Black"
                Canvas.ZIndex="16"/>
  </Canvas>
</Canvas>

在上面的示例中，即使蓝色矩形的 ZIndex 为 16（大于绿色矩形的 ZIndex），它也会呈现在下方，因为它包含在 ZIndex 为 的 Canvas 中5. 移除包含的画布，蓝色矩形渲染在绿色上方。