C# WPF 如何仅为MainBorder设置CornerRadius实现红色区域圆角

云上老周

2026-10-3

问题原因

WPF中Border控件的CornerRadius属性默认仅作用于自身的边框、背景渲染逻辑，不会自动裁剪超出圆角范围的子元素内容，因此你内部的红色InnerBorder会直接绘制到父级MainBorder的圆角区域外，和是否给TextBlock设置背景无关。

解决方法

你无需修改任何内部子元素的代码，仅需要给MainBorder添加ClipToBounds="True"属性即可，该属性会强制控件裁剪所有超出自身边界的子元素内容，自动适配你设置的圆角：

<Border Name="MainBorder" 
        Background="Transparent" 
        Width="250" 
        Height="250"  
        BorderBrush="Black" 
        BorderThickness="3" 
        CornerRadius="20" 
        Margin="500,500,0,0"
        ClipToBounds="True">
    <!-- 原有内部Grid、InnerBorder等代码保持不变即可 -->
</Border>

老版本兼容方案

如果你使用的是.NET Framework 4.0及更早版本，ClipToBounds可能存在圆角边缘裁剪模糊的问题，可以改用绑定Clip属性的方式实现精准裁剪：

首先在项目中添加如下圆角裁剪值转换器：

public class BorderClipConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values.Length < 3 || values[0] is not double width || values[1] is not double height || values[2] is not CornerRadius radius)
        {
            return Geometry.Empty;
        }
        RectangleGeometry geometry = new RectangleGeometry(new Rect(0, 0, width, height), radius.TopLeft, radius.TopLeft);
        geometry.Freeze();
        return geometry;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}