How to Use Acrylic Accent in Windows 10 Creators Update

How to use Acrylic Accent in Windows 10 Creators Update?

CREATOR UPDATE

XAML

You need to use a component that you put on the background of your app, let's say a RelativePanel

<RelativePanel Grid.Column="0" Grid.ColumnSpan="2" MinWidth="40" x:Name="MainGrid" SizeChanged="Page_SizeChanged"/>
<RelativePanel Grid.Column="0" Width="{Binding ElementName=MainGrid,Path=Width}" Background="#28000000"/>
<Grid>
    <!--Having content here, for example textblock and so on-->
</Grid>

The second RelativePanel is used to set the shadow color above the Blur.

.CS

And then you can use the following code :

private void applyAcrylicAccent(Panel panel)
{
    _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
    _hostSprite = _compositor.CreateSpriteVisual();
    _hostSprite.Size = new Vector2((float) panel.ActualWidth, (float) panel.ActualHeight);

    ElementCompositionPreview.SetElementChildVisual(panel, _hostSprite);
    _hostSprite.Brush = _compositor.CreateHostBackdropBrush();
}
Compositor _compositor;
SpriteVisual _hostSprite;

and calling it with applyAcrylicAccent(MainGrid);
You also will need to handle the SizeChanged event :

private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (_hostSprite != null)
        _hostSprite.Size = e.NewSize.ToVector2();
}

Of course you will need to be on the Creator Update to run this, the CreateHostBackdropBrush() won't work on a mobile device, or in tablet mode.

Also, consider that the panel or grid that you set with a acrylic color won't be able to display any control (as far I've tested yet). So you need to use your relative panel without any control in it.

Transparent Title bar

The transparency of the title bar could be set using the following code

ApplicationViewTitleBar formattableTitleBar = ApplicationView.GetForCurrentView().TitleBar;
formattableTitleBar.ButtonBackgroundColor = Colors.Transparent;
CoreApplicationViewTitleBar coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;

Here a example of what the above code generate (with some other things added too.)

Fall Update 10.0.16190 and above

As Justin XL mention in an answer below, starting from the Build 16190 and above, developers have access to different Acrylic Brushes located at Windows.UI.Xaml.Media (Acrylic API) and the guidelines from Microsoft : Acrylic material guidelines

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

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

How to apply fallback color to acrylic in creators update

Does anyone know how to implement the fallback color in the creators update so that when transparency is disabled, the background switches to the original background color that was set.

There is an AdvancedEffectsEnabled property in U​ISettings Class which indicates whether the system Transparency effects setting is enabled. When it returns false, you can reset the background to the original background color.

And there is also an AdvancedEffectsEnabledChanged event occurs when the system advanced UI effects setting is enabled or disabled. You can combine this event with AdvancedEffectsEnabled property and use them like the following:

UISettings uiSettings = new UISettings();
uiSettings.AdvancedEffectsEnabledChanged += UiSettings_AdvancedEffectsEnabledChangedAsync;

private async void UiSettings_AdvancedEffectsEnabledChangedAsync(UISettings sender, object args)
{
    if (sender.AdvancedEffectsEnabled)
    {
        await this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
        {
            //TODO: Apply Acrylic Accent
        });
    }
    else
    {
        await this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
        {
            //TODO: Reset Background
        });
    }
}

Please note, AdvancedEffectsEnabledChanged event may not raised in UI thread. To change the background color, we will need Core​Dispatcher.RunAsync method.

How to create windows 10 acrylic transparency effect in Winform c#

I didn't find it particularly hard to get the acrylic effect itself in Windows Forms (see https://withinrafael.com/2015/07/08/adding-the-aero-glass-blur-to-your-windows-10-apps/), but the really hard part would be getting Win32 itself to work well with it:

Resizing the form lags the mouse cursor itself really badly, too. I'd be interested to take a look at what DevExpress does, but it looks like there's a lot more to do than to just enable acrylic. You most likely will have to custom-draw anything that goes on top of it, similar to how Aero glass was but worse because how you'll have to custom-draw the title bar and borders now, too.

Sample code

Warning! These are undocumented APIs. See Raymond Chen's When programs grovel into undocumented structures… before proceeding.

using System;
using System.Drawing;
using System.Windows.Forms;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    protected override void OnHandleCreated(EventArgs e)
    {
        // Use e.g. Color.FromArgb(128, Color.Lime) for a 50% opacity green tint.
        WindowUtils.EnableAcrylic(this, Color.Transparent);

        base.OnHandleCreated(e);
    }

    protected override void OnPaintBackground(PaintEventArgs e)
    {
        e.Graphics.Clear(Color.Transparent);
    }
}

WindowUtils.cs:

using System;
using System.Drawing;
using System.Runtime.InteropServices;
using System.Windows.Forms;

public static class WindowUtils
{
    public static void EnableAcrylic(IWin32Window window, Color blurColor)
    {
        if (window is null) throw new ArgumentNullException(nameof(window));

        var accentPolicy = new AccentPolicy
        {
            AccentState = ACCENT.ENABLE_ACRYLICBLURBEHIND,
            GradientColor = ToAbgr(blurColor)
        };

        unsafe
        {
            SetWindowCompositionAttribute(
                new HandleRef(window, window.Handle),
                new WindowCompositionAttributeData
                {
                    Attribute = WCA.ACCENT_POLICY,
                    Data = &accentPolicy,
                    DataLength = Marshal.SizeOf<AccentPolicy>()
                });
        }
    }

    private static uint ToAbgr(Color color)
    {
        return ((uint)color.A << 24)
            | ((uint)color.B << 16)
            | ((uint)color.G << 8)
            | color.R;
    }

    // ReSharper disable InconsistentNaming, UnusedMember.Local, NotAccessedField.Local
#pragma warning disable 649

    // Discovered via:
    // https://withinrafael.com/2015/07/08/adding-the-aero-glass-blur-to-your-windows-10-apps/
    // https://github.com/riverar/sample-win32-acrylicblur/blob/917adc277c7258307799327d12262ebd47fd0308/MainWindow.xaml.cs

    [DllImport("user32.dll")]
    private static extern int SetWindowCompositionAttribute(HandleRef hWnd, in WindowCompositionAttributeData data);

    private unsafe struct WindowCompositionAttributeData
    {
        public WCA Attribute;
        public void* Data;
        public int DataLength;
    }

    private enum WCA
    {
        ACCENT_POLICY = 19
    }

    private enum ACCENT
    {
        DISABLED = 0,
        ENABLE_GRADIENT = 1,
        ENABLE_TRANSPARENTGRADIENT = 2,
        ENABLE_BLURBEHIND = 3,
        ENABLE_ACRYLICBLURBEHIND = 4,
        INVALID_STATE = 5
    }

    private struct AccentPolicy
    {
        public ACCENT AccentState;
        public uint AccentFlags;
        public uint GradientColor;
        public uint AnimationId;
    }
}

(UWP) The new AcrylicBrush class isn't working for me

AcrylicBrush is not available in the Creators Update (Build 15063). It is available in starting in Insider Preview 10.0.16190.

See the "Windows 10 Requirements" block at https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.acrylicbrush

Apps can achieve similar effects in the Creators Update through the Windows.UI.Composition.Compositor's CreateHostBackBrush.

There is sample code targeting Creators Update at https://github.com/Microsoft/WindowsUIDevLabs/tree/master/SampleGallery/Samples/SDK%2015063/TransparentWindow

Also see How to use Acrylic Accent in Windows 10 Creators Update?

---

Related Topics