WinUI 3与CommunityToolkit.WINUI.UI 8中GaussianBlurEffect的使用方法

要在WinUI 3项目中结合CommunityToolkit.WinUI.UI 8.x版本实现高斯模糊效果，可通过以下方式完成：

核心实现代码 #

public static CompositionEffectBrush CreateBlurEffectBrush(double amount = 0.0)
{
    // 创建高斯模糊效果实例
    var effect = new GaussianBlurEffect
    {
        Name = "Blur",
        BlurAmount = (float)amount, // 设置模糊程度，常规取值范围0-100
        Source = new CompositionEffectSourceParameter("source") // 定义效果的输入源参数
    };

    // 获取应用主窗口的Compositor
    var compositor = App.MainWindow.Compositor;
    // 创建效果工厂，指定可动态调整的属性（此处为模糊量）
    var factory = compositor.CreateEffectFactory(effect as IGraphicsEffect, new[] { "Blur.BlurAmount" });
    // 创建效果画刷
    var brush = factory.CreateBrush();
    // 将画刷输入源绑定到窗口背景
    brush.SetSourceParameter("source", compositor.CreateBackdropBrush());
    
    return brush;
}

关键细节说明 #

• 依赖准备：确保项目已安装CommunityToolkit.WinUI.UI NuGet包（8.x版本），GaussianBlurEffect类位于Microsoft.Toolkit.Uwp.UI.Media命名空间下。
• Compositor获取：示例通过App.MainWindow.Compositor获取窗口 compositor，也可从目标控件处获取：ElementCompositionPreview.GetElementVisual(targetControl).Compositor。
• 动态调整模糊度：代码中指定了Blur.BlurAmount为可动态修改属性，后续可通过brush.Properties.InsertScalar("Blur.BlurAmount", newValue)实时调整模糊程度。
• 画刷应用：创建好的CompositionEffectBrush可赋值给控件的视觉层，示例：

  var blurBrush = CreateBlurEffectBrush(20);
  var targetVisual = ElementCompositionPreview.GetElementVisual(MyTargetGrid);
  targetVisual.Brush = blurBrush;
  

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