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

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

1. 将Microsofts Win2D.uwpNuGet包添加到您的项目中.(在解决方案资源管理器中右键单击您的项目>"管理NuGet包...")

2. 有这个例子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>
   

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

4. 用它.例如在你的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;
       }
   }
   

5. 叫它.在此示例中打开图像时(请参阅上面的XAML :) ImageOpened="myImage_ImageOpened":

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

6. 本教程将介绍Nikola Metulev的学分

注意

正如您所看到的,您不仅可以使用它来模糊图像,还可以使用任何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;