WPF Border ZIndex funktioniert nicht wie erwartet

Question

Ich habe das folgende Problem: Ich überlagere 2 Steuerelemente übereinander und möchte einen einzelnen Rand, um beide zu umgeben. Ich dachte, ich könnte den ZIndex der Grenze über jedes Steuerelement steuern und ihnen einen niedrigen ZIndex geben: 2. Dann geben Sie den Kontrollen einen höheren ZIndex (4 und 5). Die folgende XAML als Benutzersteuerelement ist, was ich bin auf:

<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> 

Das Ergebnis sieht so aus:

Aber ich wünsche, ist das folgende Bild, sondern mit der Grenze mit rot-X entfernt:

Kann mir jemand eine Möglichkeit, dies zu tun empfehlen? Die Border ZIndex-Methode funktioniert nicht.

Danke!

Answer 1

ZIndex funktioniert nicht Ursache Rectangles sind keine Childs von Canvas. So können Sie es beheben, indem Sie sie außerhalb von Grenzen platzieren und ihre Heights, Widths und Canvas.Left, Canvas.Top Eigenschaften anpassen. So sieht das Beispiel so aus.

<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>