含BlurEffect的Border控件CornerRadius属性失效问题及解决

问题描述 #

为名为ThemePanel的Border控件设置CornerRadius="10"后，添加BlurEffect会导致圆角完全失效，控件呈现直角状态。

原始代码 #

<Border Name="ThemePanel" BorderBrush="Transparent" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="10" ClipToBounds="True">
    <Border.Background>
        <ImageBrush Stretch="Fill"/>
    </Border.Background>

    <Border.Effect>
        <BlurEffect Radius="10" RenderingBias="Quality" KernelType="Gaussian"/>
    </Border.Effect>
</Border>

环境与背景 #

• 系统：Windows 11
• 窗口属性已设置：AllowsTransparency="True" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" WindowStyle="None"
• 通过C++获取桌面壁纸路径后，使用以下代码设置Border背景：

((ImageBrush)MainWindow.Instance.ThemePanel.Background).ImageSource = new BitmapImage(new Uri(sourcePath, UriKind.RelativeOrAbsolute));

需求 #

让控件同时保留BlurEffect模糊效果和圆角显示。

可行解决方案 #

将原Border控件替换为Image控件，通过Clip属性的RectangleGeometry实现圆角裁剪，再为Image添加模糊效果，代码如下：

<Image Name="ThemeImage" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Image.Clip>
        <RectangleGeometry RadiusX="10" RadiusY="10" Rect="0,0,960,540"/>
    </Image.Clip>
    
    <Image.Effect>
        <BlurEffect Radius="10" RenderingBias="Performance" KernelType="Gaussian"/>
    </Image.Effect>
</Image>

原理说明 #

WPF中，Effect会作用于控件的整个渲染输出，包括模糊后超出圆角的边缘，而ClipToBounds="True"在存在Effect时无法正确裁剪这些模糊区域，导致圆角被覆盖。改用Image先通过Clip裁剪出圆角形状，再应用模糊效果，就能同时实现圆角和模糊的需求。

内容的提问来源于stack exchange，提问作者Quan Nguyen