WPF中如何为元素添加背景模糊效果？等价于CSS backdrop-filter属性

预期效果参考 #

WPF 原生未直接提供等效 CSS backdrop-filter 的API，可通过「截取目标元素下方可视区域 → 高斯模糊处理截图 → 作为元素背景」的逻辑实现，适配 Win10+ 全版本环境，不依赖窗口级模糊效果。

核心实现代码 #

自定义模糊容器控件 #

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Effects;
using System.Windows.Media.Imaging;

public class BackdropBlurBorder : Border
{
    // 模糊半径依赖属性，可在XAML中直接绑定修改
    public static readonly DependencyProperty BlurRadiusProperty =
        DependencyProperty.Register(nameof(BlurRadius), typeof(double), typeof(BackdropBlurBorder), 
            new PropertyMetadata(10.0, OnBlurParameterChanged));

    public double BlurRadius
    {
        get => (double)GetValue(BlurRadiusProperty);
        set => SetValue(BlurRadiusProperty, value);
    }

    private static void OnBlurParameterChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        (d as BackdropBlurBorder)?.UpdateBlurBackground();
    }

    // 容器尺寸变化时自动更新背景
    protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
    {
        base.OnRenderSizeChanged(sizeInfo);
        UpdateBlurBackground();
    }

    // 手动更新模糊背景的公开方法，下层内容动态变化时可主动调用
    public void UpdateBlurBackground()
    {
        if (Parent is not Visual parentVisual || ActualWidth <= 0 || ActualHeight <= 0)
            return;

        // 计算当前控件在父容器中的相对位置
        Point controlOffset = TransformToAncestor(parentVisual).Transform(new Point(0, 0));
        int renderPixelWidth = (int)ActualWidth;
        int renderPixelHeight = (int)ActualHeight;

        // 截取控件下方对应的父容器区域内容
        RenderTargetBitmap areaScreenshot = new RenderTargetBitmap(
            renderPixelWidth, renderPixelHeight, 96, 96, PixelFormats.Pbgra32);
        DrawingVisual tempVisual = new DrawingVisual();
        using (DrawingContext dc = tempVisual.RenderOpen())
        {
            VisualBrush parentContentBrush = new VisualBrush(parentVisual)
            {
                Viewbox = new Rect(controlOffset.X, controlOffset.Y, ActualWidth, ActualHeight),
                ViewboxUnits = BrushMappingMode.Absolute
            };
            dc.DrawRectangle(parentContentBrush, null, new Rect(0, 0, ActualWidth, ActualHeight));
        }
        areaScreenshot.Render(tempVisual);

        // 对截图应用高斯模糊
        Image blurLayer = new Image
        {
            Source = areaScreenshot,
            Effect = new BlurEffect
            {
                Radius = BlurRadius,
                KernelType = KernelType.Gaussian,
                RenderingBias = RenderingBias.Quality
            }
        };

        // 将模糊后的图层设置为控件背景
        Background = new VisualBrush(blurLayer);
        // 可按需叠加半透明遮罩模拟Acrylic的色调效果，示例为半透明白色遮罩：
        // Background = new SolidColorBrush(Color.FromArgb(0x80, 0xFF, 0xFF, 0xFF)) { Opacity = 0.5 };
    }
}

XAML 使用示例 #

<Grid>
    <!-- 下层背景内容（会被模糊处理的内容） -->
    <Image Source="背景素材路径" Stretch="UniformToFill"/>
    <TextBlock Text="下层测试文本" FontSize="36" Margin="50,30"/>

    <!-- 自定义毛玻璃容器 -->
    <local:BackdropBlurBorder BlurRadius="15" 
                              Width="320" Height="180"
                              CornerRadius="12"
                              HorizontalAlignment="Center" VerticalAlignment="Center">
        <!-- 容器上层的内容 -->
        <TextBlock Text="毛玻璃上层内容" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </local:BackdropBlurBorder>
</Grid>

优化与注意点 #

• 动态内容场景：如果下层内容会实时变化，可订阅内容的LayoutUpdated事件，按需调用UpdateBlurBackground()更新模糊背景，性能敏感场景可以加防抖逻辑，控制更新频率不超过60帧即可。
• 高版本系统适配：Win11 环境下可直接调用 WinRT 提供的AcrylicBrushAPI 实现系统级局部模糊，性能比截图方案更高，但仅支持 Win11 及以上版本。
• 性能优化：模糊半径建议控制在5-20区间，过大的模糊半径会显著提升GPU占用，大尺寸控件可以适当降低渲染分辨率。

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