c# - 如何在 Windows 10 创意者更新中正确使用 Acrylic Accent (CreateHostBackDropBrush())？

Question

我想做一些可能有点棘手的事情，因为它是 Win 10 Creators Update 中的一项新功能:我想使用新的 Acrylic Accent 功能在 UWP 应用程序中制作透明的 Windows。 我看到微软已经在 Groove 和 Fast Insider Ring 的 Film & TV 中引入了它。

这是我使用 Win Dev Center 中的示例以及 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。

但是有些东西不起作用:什么？ 如何将其应用到 UIElement，例如 Page 或 Panel？

非常感谢您的帮助，谢谢。

Answer 1

我自己解决了:必须手动指定 SpriteVisual 大小(使其适合 UIElement 目标)和 UIElement 的 sizeChanged 事件本身。

这里是示例代码，我使用了通用的 Panel 类(为了轻松使用 Panel.ActualWidth/ActualHeight 属性...)，但是每个 UIElement 适合亚克力效果:

    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事件:

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