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，每当我尝试将相同的行为从Community Toolkit添加到ImageBrush时，我都会收到错误：

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

有没有办法解决这个仍然使用工具包？

Answer 1

The Blur animation behavior通过增加或减少像素大小来选择性地模糊 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;
    }
}

为UWP ImageBrush添加模糊

1 个答案: