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>