向 UWP ImageBrush 添加模糊答案

【问题标题】：Add blur to UWP ImageBrush向 UWP ImageBrush 添加模糊
【发布时间】：2017-01-03 15:29:06
【问题描述】：

我正在尝试为我的 UWP 应用中的背景图像添加模糊效果。我可以使用此代码毫无问题地向图像添加蓝色（我实际上是在运行时将其应用于从网络动态加载的图像）

<Image Source="Assets/Photos/BisonBadlandsChillin.png"
       Width="100"
       Height="100">
       <interactivity:Interaction.Behaviors>
           <behaviors:Blur x:Name="blurry"
                             Value="10"
                             Duration="100"
                             Delay="0"
                             AutomaticallyStart="True" />
       </interactivity:Interaction.Behaviors>

但是，我想将模糊添加到背景中的图像中，特别是添加到 RelativePanel 的背景中。但是，RelativePanel 的背景只会在其内容中使用 ImageBrush，每当我尝试将 Community Toolkit 中的相同行为添加到 ImageBrush 时，都会出现错误：

无法将“Microsoft.Toolkit.Uwp.UI.Animations.Behaviors.Blur”类型的实例添加到“Microsoft.Xaml.Interactivity.BehaviorCollection”类型的集合中

有没有办法仍然使用工具包？

【问题讨论】：

您的问题解决了吗？还有其他更新吗？
不，我不得不继续讨论应用程序中更重要的元素，所以没有时间重新审视这个

标签： uwp windows-community-toolkit

【解决方案1】：

The Blur animation behavior 通过增加或减少像素大小来选择性地模糊 XAML 元素。但ImageBrush 不是XAML element。所以我认为你不能通过它为imagebrush添加模糊。

如果你想为 uwp Imagebrush 添加模糊，你可以使用Win2D。 GaussianBlurEffect 可用于创建非常酷的模糊效果，让我们在您的应用中呈现 Frosted Glass 外观

private async void AddBrushToPanel(ImageBrush brush, Panel panel)
{
var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/image.jpg"));
using (var stream = await file.OpenAsync(FileAccessMode.Read))
    {
        var device = new CanvasDevice();
        var bitmap = await CanvasBitmap.LoadAsync(device, stream);

        var renderer = new CanvasRenderTarget(device,
                                              bitmap.SizeInPixels.Width,
                                              bitmap.SizeInPixels.Height, bitmap.Dpi);
        using (var ds = renderer.CreateDrawingSession())
        {
            var blur = new GaussianBlurEffect();
            blur.BlurAmount = 5.0f;
            blur.Source = bitmap;
            ds.DrawImage(blur);
        }
        stream.Seek(0);
        await renderer.SaveAsync(stream, CanvasBitmapFileFormat.Jpeg);
        BitmapImage image = new BitmapImage();
        image.SetSource(stream);
        brush.ImageSource = image;
        panel.Background = brush;
    }
}

【讨论】：