注意:这些功能(模糊和背景画笔)需要 Windows 10 周年纪念更新。您目前可以通过 Windows Insider 计划预览 SDK
先决条件
- 针对Windows 10周年更新
- 对视觉层以及视觉树的工作原理有基本的了解。您可以了解更多here https://msdn.microsoft.com/en-us/windows/uwp/graphics/visual-layer.
另外你可以看看我写的要点here https://gist.github.com/robmikh/a05c07c53ab0d227b07da4a13d53b0e9,这是在 XAML 应用程序中使用 Composition API 快速启动和运行的方法。它还演示了使用效果。不仅如此,它还涵盖了使用 Composition API(使用我编写的包)加载图像。
入门
您可以通过两种方式在合成 API 中使用模糊效果。一种是适用于单个表面的正常效果。另一种是将其用作“背景”画笔,将所有内容置于其后面并对其进行模糊处理。
要使用模糊效果,您需要使用 Win2D 中的 GaussianBlurEffect 定义。事情是这样的:
GaussianBlurEffect blurEffect = new GaussianBlurEffect()
{
Name = "Blur",
BlurAmount = 0.0f, // You can place your blur amount here.
BorderMode = EffectBorderMode.Hard,
Optimization = EffectOptimization.Balanced,
Source = new CompositionEffectSourceParameter("source")
};
下一步是创建效果工厂:
var effectFactory = compositor.CreateEffectFactory(blurEffect, new[] {"Blur.BlurAmount"});
第二个参数不是必需的,但提供它可以让您在编译效果后设置动画或更改命名属性。在这种情况下,我们现在可以更改 BlurAmount 或对其进行动画处理。如果您想重复使用模糊效果工厂来创建多个模糊效果画笔,但让它们都使用不同的 BlurAmount,则这非常有用。
下一步取决于您希望效果如何发挥作用。
单面
如果您希望它仅应用于单个表面,您将执行以下操作:
var effectBrush = effectFactory.CreateBrush();
effectBrush.SetSourceParameter("source", someOtherSurfaceBrush);
visual.Brush = effectBrush;
Backdrop
但是,如果您想动态模糊给定视觉效果背后的大量内容,您可以执行以下操作:
var effectBrush = effectFactory.CreateBrush();
effectBrush.SetSourceParameter("source", compositor.CreateBackdropBrush());
visual.Brush = effectBrush;
请注意,这看起来与第一种方法非常相似,但不是给它一个表面画笔,而是给它一个 BackdropBrush。这将实时获取视觉背后的内容并将其输入效果源中。在这种情况下,视觉“后面”的任何东西都会变得模糊。
表现
如果您只对单个图像进行模糊处理,那么最好对单个表面进行模糊处理。您应该尝试仅在真正需要时才使用 BackdropBrush。
告诉我更多!
要了解更多信息,请前往我们的GitHub 页面 https://github.com/Microsoft/WindowsUIDevLabs!我们创建了一个自定义 XAML 控件,应该可以帮助您here https://github.com/Microsoft/WindowsUIDevLabs/blob/master/SamplesCommon/SamplesCommon/BackDrop.cs,你可以看到它的实际效果here https://github.com/Microsoft/WindowsUIDevLabs/tree/master/SampleGallery/Samples/SDK%20Insider/BackDropSample。您还可以查看 //build 谈话here https://channel9.msdn.com/Events/Build/2016/B818.