如何在 Windows 10 创意者更新中正确使用亚克力口音 (CreateHostBackDropBrush())? [英] How to use Acrylic Accent (CreateHostBackDropBrush()) in Windows 10 Creators Update correctly?
问题描述
我想做一些可能有点棘手的事情,因为它是 Win 10 Creators Update 中的一项新功能:我想使用新的 Acrylic Accent 功能在 UWP 应用程序中制作透明的 Windows.我看到微软已经在 Groove and Film & 中引入了它.Fast Insider Ring 中的电视.
I want to do something that could be a little bit tricky, since it's a new feature in Win 10 Creators Update: I would like to use the new Acrylic Accent feature to make transparent Windows in UWP apps. I saw that Microsoft is already introducing it in Groove and Film & TV in Fast Insider Ring.
这是我开发的代码,使用 Win Dev Center 中的示例以及 Stack Overflow 上的其他一些答案:
This is the code I developed, using examples in Win Dev Center and some other answers here on Stack Overflow:
public sealed partial class MainPage : Page
{
// Some other things
private void initializeInterface()
{
/// Applying Acrylic Accent
LayoutRoot.Background = null;
GaussianBlurEffect blurEffect = new GaussianBlurEffect()
{
Name = "Blur",
BlurAmount = 5.0f,
BorderMode = EffectBorderMode.Hard,
Optimization = EffectOptimization.Balanced,
Source = new CompositionEffectSourceParameter("source"),
};
LayoutRoot.Background = null;
var rootVisual = ElementCompositionPreview.GetElementVisual(LayoutRoot as UIElement);
var compositor = rootVisual.Compositor;
var factory = compositor.CreateEffectFactory(blurEffect);
var effectBrush = factory.CreateBrush();
// This is the effect I wanted to use, the "Acrylic Accent", as it is called by MS itself.
var backdropBrush = compositor.CreateHostBackdropBrush();
effectBrush.SetSourceParameter("source", backdropBrush);
var blurVisual = compositor.CreateSpriteVisual();
blurVisual.Brush = effectBrush;
ElementCompositionPreview.SetElementChildVisual(LayoutRoot as UIElement, blurVisual);
}
}
其中 LayoutRoot
是用作根面板的 RelativePanel
.
Where LayoutRoot
is a RelativePanel
used as root panel.
但是有些东西不起作用:什么?如何将其应用于 UIElement
,例如 Page
或 Panel
?
But something isn't working: what?
How can I apply it to a UIElement
, like a Page
or a Panel
?
非常感谢您的帮助,谢谢.
I really would appreciate your help, thanks.
推荐答案
自己解决:必须手动指定 SpriteVisual
大小(使其适合 UIElement
目标)以及 UIElement 本身的 sizeChanged
事件.
Solved by myself: had to specify SpriteVisual
size manually (making it to fit the UIElement
target) and the sizeChanged
event of the UIElement itself.
这是示例代码,我使用了通用的 Panel
类(为了方便地使用 Panel.ActualWidth/ActualHeight
属性...),但是每个 UIElement
适用于亚克力效果:
Here is the sample code, I used the generic Panel
class (in order to use easily the Panel.ActualWidth/ActualHeight
properties...), but every UIElement
is ok for the Acrylic Effect:
private Compositor compositor;
private SpriteVisual hostVisual;
private void applyAcrylicAccent(Panel e)
{
compositor = ElementCompositionPreview.GetElementVisual(e).Compositor;
hostVisual = compositor.CreateSpriteVisual();
hostVisual.Size = new System.Numerics.Vector2((float)e.ActualWidth, (float)e.ActualHeight);
// You can choose which effect you want, it is indifferent
GaussianBlurEffect blurEffect = new GaussianBlurEffect()
{
Name = "Blur",
BlurAmount = 0.0f,
BorderMode = EffectBorderMode.Hard,
Optimization = EffectOptimization.Balanced,
Source = new CompositionEffectSourceParameter("source"),
};
var factory = compositor.CreateEffectFactory(blurEffect, null);
var effectBrush = factory.CreateBrush();
effectBrush.SetSourceParameter("source", compositor.CreateHostBackdropBrush());
hostVisual.Brush = effectBrush;
ElementCompositionPreview.SetElementChildVisual(e, hostVisual);
}
和与目标 UIElement
(此处称为 LayoutRoot)相关联的 sizeChanged
事件:
and the sizeChanged
event associated to the target UIElement
(here called LayoutRoot):
private void LayoutRoot_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (hostVisual != null)
{
hostVisual.Size = new System.Numerics.Vector2((float)e.NewSize.Width, (float)e.NewSize.Height);
}
}
享受.
;D
这篇关于如何在 Windows 10 创意者更新中正确使用亚克力口音 (CreateHostBackDropBrush())?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!