如何在具有圆角半径的边框内设置控件的样式

Question

我有一个简单的窗口,包含一个带有圆角半径的外边框和一个带背景的内边框.边框基本上只是我想放置在圆角外边框内的任何类型内容的占位符.

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

问题是内部控件没有继承圆角,所以它绘制在圆角的顶部,如下所示:

如何调整外部控件,因此内部控件不会尝试在圆角上绘制.

在内部控件上设置圆角不是一个可行的选项,因为它会导致角半径的可怕重复.

Answer 1

我假设您有一个Border内部的Border只是为了说明问题。Border如果可能的话，只需在外部不包含任何在角落渲染任何内容的控件即可完全避免该问题。

如果您必须包含一个在角落呈现某些内容的控件，您可以使用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>

另一种选择（取决于您的具体情况）可能是将外部内容放置Border在其他内容的“上方”。只要它具有透明Fill并IsHitTestVisible设置为false，就足够了：

<Grid>
    <Border Background="White"/>
    <Border CornerRadius="10" BorderBrush="Black" BorderThickness="3" Fill="Transparent" IsHitTestVisible="false"/>
</Grid>