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>