CODEWITHSUNDEEP
wpfxamlborderoverlayz-index
Taterhead
Taterhead

Reputation: 5951

WPF Border ZIndex not working as expected

I have the following problem: I overlay 2 controls over one another and want a single border to surround them both. I thought I could control the ZIndex of the border over each control and give them a low ZIndex: 2. Then give the controls a higher ZIndex (4 and 5). The following xaml as a UserControl is what I'm referring to:

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

The result looks like:

enter image description here

But I desire is the following image but with the border with red-X removed:

enter image description here

Can anyone recommend a way to do this ? The Border ZIndex method is not working.

Thanks!

Upvotes: 2

Views: 6443

Answers (1)

bars222
bars222

Reputation: 1660

ZIndex is not working cause Rectangles are not childs of Canvas. So you can fix it by placing them outside of borders and adjusting its Heights, Widths and Canvas.Left, Canvas.Top properties. So the example looks like this.

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

Upvotes: 3

Related Questions