在UWP ImageBrush中添加模糊

Question

我试图添加一个模糊的背景图像在我的UWP应用程序。使用此代码，我可以向图像添加一个蓝色，没有问题(我实际上是在运行时将其应用于从web动态加载的图像)

<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，每当我试图将社区工具包中的相同行为添加到ImageBrush中时，就会得到一个错误：

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

是否还有办法解决这个问题，仍然使用工具包？

Answer 1

http://docs.uwpcommunitytoolkit.com/en/master/animations/Blur/通过增加或减小像素大小有选择地模糊XAML元素。但ImageBrush不是XAML element。所以我认为你不能在它旁边增加模糊。

如果您想要添加模糊的uwp Imagebrush，您可以使用Win2D。GaussianBlurEffect可以用来创建一个非常酷的模糊效果，可以让我们在你的应用程序中看到冰霜玻璃

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;
    }
}