Question

我已经浏览了这个网站，还没有找到一种方法来模糊XAML中的图像。我已经在C＃中尝试了一些功能，但它们还没有奏效。我想要获得模糊的背景图像，就像在Audiocloud应用程序（https://store-images.s-microsoft.com/image/apps.28769.9007199266467874.da79334d-0f1c-4851-8e0b-7ee566918b20.0658cd96-487e-4e1f-a330-10fb030aaa22?w=443&h=788&q=60）中一样。我将如何完成这项工作？

Answer 1

将微软Win2D.uwp NuGet包添加到您的项目中。（在解决方案资源管理器中右键单击您的项目＆gt;“管理NuGet包...”）

拥有此示例XAML UI：

<Grid>
    <Image x:Name="myBackground" Stretch="UniformToFill" />
    <Image x:Name="myImage" Width="360" Height="300" Source="Assets/test.png" Stretch="UniformToFill" ImageOpened="myImage_ImageOpened"/>
</Grid>

在静态类中为UIElement创建扩展方法：

static class Extension
{
    public static async Task<IRandomAccessStream>
        RenderToRandomAccessStream(this UIElement element)
    {
        RenderTargetBitmap rtb = new RenderTargetBitmap();
        await rtb.RenderAsync(element);

        var pixelBuffer = await rtb.GetPixelsAsync();
        var pixels = pixelBuffer.ToArray();
        var displayInformation = DisplayInformation.GetForCurrentView();

        var stream = new InMemoryRandomAccessStream();
        var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);
        encoder.SetPixelData(BitmapPixelFormat.Bgra8,
                             BitmapAlphaMode.Premultiplied,
                             (uint)rtb.PixelWidth,
                             (uint)rtb.PixelHeight,
                             displayInformation.RawDpiX,
                             displayInformation.RawDpiY,
                             pixels);

        await encoder.FlushAsync();
        stream.Seek(0);

        return stream;
    }
}

使用它。例如，在public sealed partial class MainPage : Page：

中

private async void BlurThisUI(UIElement sourceElement, Image outputImage)
{
    using (var stream = await sourceElement.RenderToRandomAccessStream())
    {
        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.Png);

        BitmapImage image = new BitmapImage();
        image.SetSource(stream);
        outputImage.Source = image;
    }
}

打电话给它。在此示例中打开图像时（请参阅上面的XAML：ImageOpened="myImage_ImageOpened"）：

private void myImage_ImageOpened(object sender, RoutedEventArgs e)
{
    this.BlurThisUI(myImage, myBackground);
}

通过this tutorial

注意

正如您所看到的，您不仅可以使用它来模糊图像，还可以使用任何UIElement（例如包含按钮，复选框等所有UI元素的网格。）

所有使用

using System;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Threading.Tasks;
using Windows.Graphics.Display;
using Windows.Graphics.Imaging;
using Windows.Storage.Streams;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;
using Microsoft.Graphics.Canvas;
using Microsoft.Graphics.Canvas.Effects;

如何在Windows 10 XAML中模糊图像？

1 个答案:

注意

所有使用