How to use Acrylic Accent (CreateHostBackDropBrush()) in Windows 10 Creators Update correctly?

Question

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.

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); 
    }
}

Where LayoutRoot is a RelativePanel used as root 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.

Answer 1

Solved by myself: had to specify SpriteVisual size manually (making it to fit the UIElement target) and the sizeChanged event of the UIElement itself.

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);
    }

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);
        }
    }

Enjoy.

;D

Answer 2

Here is the sample XAML code in order to avoid other visual elements disappear when you're going to apply Acrylic Accent:

    <SomePanelSubclass "rootGrid">
       <SomePanelSubclassForAcrylic>
           <SomePanelSubclass "AcrylicGrid"/>
           <!-- Comment: some background is needed in order to make elements more visible -->
           <SomeElementWithBackgroundProperty Background="SomeBrush" Canvas.ZIndex="ValueAboveZero"/>
       </SomePanelSubclassForAcrylic>
       <AllOtherChildrenElements Canvas.ZIndex="ValueAboveZero"/>
    </SomePanelSubclass>

You shall apply the Acrylic Accent ONLY to the "AcrylicGrid". Remember: all children elements of a UIElement that has Acrylic Accents applied to will "disappear", so the target Acrylic UIElement must not have children.

You can put all the other XAML elements into a one single IPanel element, in order to simplify the Canvas.ZIndex thing, in order to apply it only to the Panel itself.

Obviously this is only a sample snippet, so you can rename those elements with every name you desire.

Hoping to be helpful.

;)