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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在Windows 10 XAML中模糊图像?相关的知识,希望对你有一定的参考价值。

我已经浏览了这个网站,还没有找到一种方法来模糊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)中一样。我将如何实现这一目标?

答案

enter image description here

  1. 将Microsofts Win2D.uwp NuGet包添加到您的项目中。 (在解决方案资源管理器中右键单击您的项目>“管理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. 积分由this tutorial传到Nikola Metulev

Note

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

all the usings

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中模糊图像?的主要内容,如果未能解决你的问题,请参考以下文章

我的图像很模糊!为啥 WPF 的 SnapsToDevicePixels 不起作用?

如何在 Windows 8.1 应用程序中对 XAML 网格视图进行排序?

在 Windows 10 移动版中读取图像时出错

Windows Store App XAML:Gridview 不全屏显示图像

在 Kivy 中,如何防止像素图像在放大时变得模糊?

背水一战 Windows 10 (112) - 通知(Badge): application 的 badge 通知, secondary 的 badge 通知, 轮询服务端以更新 badge 通知(代