All geek questions in one place

The problem of overlapping borders

I have this grid with a frame around it:

<Border Padding="0" BorderBrush="Orange" BorderThickness="2" CornerRadius="5"> <Grid > <Label Grid.Row="0" Grid.Column="0" BorderBrush="Black"/> <Label Grid.Row="1" Grid.Column="0" BorderBrush="Black"/> <Label Grid.Row="0" Grid.Column="1" BorderBrush="Black"/> <Label Grid.Row="1" Grid.Column="1" BorderBrush="Black"/> </Grid> </Border>

And the problem is that the borders of the labels overlap the orange border at the corners of the grid. This is probably due to the z-index. How to solve this problem?

enter image description here

+6
source share
3 answers

You can set the labels so that they do not have a border on each side, for example

 <Label Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="0,0,1,1" /> <Label Grid.Row="1" Grid.Column="0" BorderBrush="Black" BorderThickness="0,1,1,0"/> <Label Grid.Row="0" Grid.Column="1" BorderBrush="Black" BorderThickness="1,0,0,1"/> <Label Grid.Row="1" Grid.Column="1" BorderBrush="Black" BorderThickness="1,1,0,0"/>
+2
source

See the following question: How do I make the contents of a rounded corner frame also rounded?

It will give you a result similar to this

enter image description here

Use it like

 <local:ClippingBorder Padding="0" BorderBrush="Orange" BorderThickness="2" CornerRadius="5"> <Grid > <!--...--> </Grid> </local:ClippingBorder>
+5
source

Want labels to have a full outer border? If the gap between the border and the label is acceptable, you can set the difference in the grid

  <Grid Margin="2">
0
source

Source: https://habr.com/ru/post/894630/

More articles:


All Articles