I have a simple window containing an outer border with a corner radius, and an inner border with a background. The border is basically just a placeholder for any type of content I would like to place inside the rounded corner outer border.
<Window x:Class="TestRunner.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" AllowsTransparency="True"
WindowStyle="None" Background="{x:Null}" >
<Border BorderThickness="2" BorderBrush="Black" CornerRadius="8" >
<Border Background="White">
</Border>
</Border>
</Window>
The problem is that the inner control does not inherit the rounded corner so it draws on top of the rounded corner, like this:
How do I adjust my outer control, so inner controls do not attempt to draw on top of the rounded corner.
Setting rounded corner on the inner control is not a viable option as it will lead to horrible duplication of corner radius.
CSS Syntaxborder-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.
I'm assuming that you have a Border
within a Border
just to illustrate the problem. If possible, just avoid the issue altogether by not including any control within the outer Border
that renders anything in the corners.
If you must include a control that renders something in the corners, you could use a Clip
:
<Border x:Name="border" CornerRadius="10">
<Border.Clip>
<RectangleGeometry Width="{Binding ActualWidth, ElementName=border}" Height="{Binding ActualHeight, ElementName=border}" RadiusX="10" RadiusY="10"/>
</Border.Clip>
<Border Background="White"/>
</Border>
Another option (depending on your exact scenario) might be to place the outer Border
"above" the other content. As long as it has a transparent Fill
and IsHitTestVisible
set to false
, it may be sufficient:
<Grid>
<Border Background="White"/>
<Border CornerRadius="10" BorderBrush="Black" BorderThickness="3" Fill="Transparent" IsHitTestVisible="false"/>
</Grid>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With