Border overlapping problem

Question

I have this grid with a border 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 label borders overlap the orange border in the grid corners. It's probably because of the z-index. How to solve this problem?

enter image description here

score 5 · Answer 1 · edited May 23 '17 at 12:19

5

See the following question: How to make the contents of a round-cornered border be also round-cornered?

It'll 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>

edited May 23 '17 at 12:19

Community

1
1

answered Aug 09 '11 at 13:43

Fredrik Hedblad

83,499
23
264
266

score 4 · Accepted Answer · answered Aug 09 '11 at 13:23

You could set the labels not to have a border on every side, like so

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

score 0 · Answer 3 · answered Aug 09 '11 at 13:21

0

Do you want the labels to have a complete outer border? If a gap between border and label is acceptable, you can set a margin on the grid

 <Grid Margin="2">

answered Aug 09 '11 at 13:21

Dominik

3,342
1
17
24

Border overlapping problem

3 Answers3