如何裁剪带CornerRadius属性的Border容器内Polyline的溢出内容

Border的CornerRadius属性默认仅作用于自身背景、边框的渲染，不会对子元素超出圆角范围的部分进行裁剪。默认的裁剪逻辑只会判断内容是否超出控件的矩形边界，不会适配圆角轮廓，因此会出现Polyline溢出的问题。

解决方法 #

方法1：手动设置Clip裁剪几何（兼容所有XAML平台） #

给Border添加与圆角匹配的RectangleGeometry作为裁剪区域，即可强制子元素在圆角范围内渲染，修改后的代码如下：

<Border Width="320"
        Height="368"
        CornerRadius="10"
        Background="#1D1A27"
        Margin="50,0,0,0">
    <!-- 增加与Border圆角、尺寸完全匹配的裁剪几何 -->
    <Border.Clip>
        <RectangleGeometry RadiusX="10" RadiusY="10" Rect="0,0,320,368"/>
    </Border.Clip>
    <Polyline Points="0,0 320,0 0, 80"
              Fill="AliceBlue" />
</Border>

如果需要适配Border的动态尺寸变化，可以通过绑定+值转换器的方式，将ActualWidth、ActualHeight、CornerRadius传入转换器动态生成对应的裁剪几何，避免写死尺寸参数。

方法2：使用平台自带的轮廓裁剪属性（适用高版本WPF/WinUI/UWP/MAUI） #

如果你的运行环境是.NET 6及以上版本的WPF，或是WinUI 3、UWP、MAUI，可以直接给Border添加IsClippedToBounds="True"属性，该属性会自动将子元素裁剪到控件的轮廓（包含圆角）范围内，无需手动设置裁剪几何：

<Border Width="320"
        Height="368"
        CornerRadius="10"
        Background="#1D1A27"
        Margin="50,0,0,0"
        IsClippedToBounds="True">
    <Polyline Points="0,0 320,0 0, 80"
              Fill="AliceBlue" />
</Border>

原问题溢出效果如下：

内容的提问来源于stack exchange，提问作者Riley Varga