WPF Border ZIndex 未按预期工作

Question

我遇到以下问题：我将 2 个控件相互重叠，并希望用一个边框将它们包围起来。我想我可以控制每个控件边框的 ZIndex 并给它们一个低 ZIndex：2。然后给控件一个更高的 ZIndex（4 和 5）。以下 xaml 作为 UserControl 是我所指的：

    <Canvas>
    <Border BorderBrush="Black" BorderThickness="4" Canvas.ZIndex="2" Canvas.Left="50" Canvas.Top="30">
        <Rectangle Width="200" Height="20"  Fill="Aqua" Canvas.ZIndex="5"/>
    </Border>
    <Border BorderBrush="Black" BorderThickness="4" Canvas.ZIndex="2" Canvas.Left="150" Canvas.Top="00">
        <Rectangle Width="50" Height="200" Fill="Yellow" Canvas.ZIndex="5"/>
     </Border>
</Canvas>

结果如下：

但我想要的是下面的图片，但是去除了红色 X 的边框：

任何人都可以推荐一种方法吗？ Border ZIndex 方法无效。

谢谢！

Answer 1

ZIndex 不起作用，因为 Rectangles 不是 Canvas 的子代。因此，您可以通过将它们放在边界外并调整其 Heights、Widths 和 Canvas.Left、Canvas.Top 属性来修复它。所以这个例子看起来像这样。

<Canvas>
    <Border BorderBrush="Black" BorderThickness="4" Canvas.ZIndex="2" 
            Canvas.Left="46" Canvas.Top="26"
            Width="208" Height="28">
    </Border>
    <Rectangle Width="200" Height="20"  Fill="Aqua" Canvas.ZIndex="5"
               Canvas.Left="50" Canvas.Top="30" />
    <Border BorderBrush="Black" Height="208" Width="58" BorderThickness="4" 
            Canvas.ZIndex="2" Canvas.Left="146" Canvas.Top="00">
    </Border>
    <Rectangle Canvas.Left="150" Canvas.Top="4" Width="50" Height="200" Fill="Yellow" 
               Canvas.ZIndex="5"/>
</Canvas>

WPF Border ZIndex 未按预期工作

WPF Border ZIndex not working as expected

wpf

xaml

overlay

border

z-index