如何模糊 Windows 10 XAML 中的图像?
How do you blur an image in 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) 中一样。我将如何完成这项工作?
- 将 Microsoft
Win2D.uwp
NuGet 包添加到您的项目中。 (在解决方案资源管理器中右键单击您的项目 > "Manage NuGet packages...")
有这个例子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>
在静态 class 中为 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);
}
感谢 Nikola Metulev 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;
我环顾了这个网站,但还没有找到在 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) 中一样。我将如何完成这项工作?
- 将 Microsoft
Win2D.uwp
NuGet 包添加到您的项目中。 (在解决方案资源管理器中右键单击您的项目 > "Manage NuGet packages...") 有这个例子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>
在静态 class 中为
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); }
感谢 Nikola Metulev 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;