How to use Acrylic Accent in Windows 10 Creators Update?

Question

I can't find any detailed document to use Acrylic Accent (CreateBackdropBrush). I found a post in StackOverflow which is somewhat useful but it doesn't help to get started. So please create a detailed answer to this post so that everyone can learn.

Update:

Microsoft has released an official Acrylic material document

Note:

If anyone doesn't know about Acrylic Accent. Acrylic Accent is the new feature in Windows 10 Creators Update that allows the app background to be Blurred and Transparent.

Laveta

Please, could you insert the "windows-composition-api" tag for your question? It helps finding easily your question. Thanks – Groggy

Answer 1

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

Squish

Can't we control the amount of blur? How to apply the same effect to title bar? – Laveta

I have updated the answer for the transparent title bar. About the amount of blur. As far I know. It is not possible to change it – Squish

Always _compositor will be null. I think you forgot to add _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor; in the post. Transparent Title bar doesn't work. Title bar background becomes black while the background of the buttons remains white. – Laveta

@VijayNirmal I've corrected the _compositor, thanks. Also I updated the code for transparent title bar. I missed a copy paste. It works now – Squish

How to get the color shade of transparent? I did it with the below code. <Grid> <Grid.Background> <SolidColorBrush Color="White" Opacity="0.25"/> </Grid.Background> </Grid> Is there any easy method? Also we should use e instead of this in ElementCompositionPreview.GetElementVisual(e).Compositor – Laveta

Well, I used a Relative panel for the background color (see XAML part), because I prefer the color, but it should work with the grid too. For me ElementCompositionPreview.GetElementVisual(this).Compositor works well. It is adjustable in regard of what you are looking for – Squish

What happens if non-Windows 10 Creators Update machine? I think it will crash so we need to add Exception Handler. – Laveta

@SvenBorden I tried your code as-is and I got a window with a black screen: imgur.com/a/T5i5a. I am running Build 15063, Creators Update release and SDK – Chequered

Where does the applyAcrylicAccent is located? Do you set the accent to the panel? – Squish

@SvenBorden Here's my MainPage.xaml.cs: pastebin.com/TniAk00k and here's my MainPage.xaml: pastebin.com/UEjmybVL ... This is what I get: imgur.com/a/i49ni – Chequered

@Chequered Hey there. I used the code you posted and got good results (see: imgur.com/jPsigJ9). My guess is there's a problem with your Windows installation and not the code itself. Also maybe check what version your application is targeting? – Demure

@Demure I am running this in Virtual Box. Target is "Windows 10 Creators Update". Not sure why it won't render. Maybe it's Virtual Box, but I don't see what setting would enable it. – Chequered

I was able to get it to work. Had to enable 3D Acceleration for VirtualBox – Chequered

@Chequered Great! I'm glad you got it working. :) – Demure

With this code, it works initially, but when the window loses focus the min/max/close buttons lose the acrylic texture. Then after a moment the entire window becomes opaque. Any idea how to keep the acrylic effect when the window is not focused? – Slaver

Microsoft has released an official Acrylic material document – Laveta

@FactorMystic This is expected behavior. The window which is not in focus will lose the acrylic effect. – Mendes

Also, This doesnt produce acrylic effect which combines noise,gaussian blur, exclusion blend and tint/overlay effects. it just produces the blurred visual of the background of the app – Mendes

As Vijay asked above, how can we check, if the CreateHostBackdropBrush() Method is available on the device? – Towney

@MojoJojo Yes exactly, it looks like this acrylic for Creator Update is a first step before the Fall Update with noise, tint, & exclusion blend – Squish

@Towney You can check the OS Version (have a look here suchan.cz/2015/08/uwp-quick-tip-getting-device-os-and-app-info ) Or you can have a look is Api Contract is present maybe – Squish

@Sven Borden thank you, i know how to check, if a API is present, but for which API do i exactly need to check, when i want to use CreateHostBackdropBrush() method on creators update? When i only check for composition API, then i think this is not correct, because this API exists also in Anniversary Uodate, but does not provide a CreateHostBackdropBrush() method. – Towney

@Towney Using this method public static bool IsMethodPresent(String typeName, String methodName) – Squish

I think you missunderstood me. I want to check the following way: Windows.Foundation.Metadata.ApiInformation.IsTypePresent("API"). But i don't know, in which Namespace this API exactly is, because "Windows.UI.Composition.Compositor" is also available in the previous Anniversary Update, but does not provide a CreateHostBackdropBrush() method. – Towney

@Towney API Namespace is Windows.UI.Composition.CompositionBackdropBrush – Laveta

Thank you. Are you sure that this is correct? The CreateHostBackdropBrush() Method indeed is in the Windows.UI.Composition.CompositionBackdropBrush Namespace, but only in the Version 4 of the API Contract. So when i check this Namespace, it is also available on the Anniversary Update, but not the CreateHostBackdropBrush() Method. – Towney

@SvenBorden You can simply set the background color directly to Main Grid. You don't want additional RelativePanel to set the background color. – Laveta

@VijayNirmal Yes, if you want the main background to have a certain color, but if you want to have the same effect as your "maps" app pictures, you will probably need a second RelativePanel in order to achieve it – Squish

@SvenBorden how can I find your background wallpaper? – Kimmy

Answer 2

In the Creators Update Insider Preview 16193 (along with Windows 10 SDK 16190), there's a new AcrylicBrush that you can apply directly onto your element just like a normal SolidColorBrush.

<Page xmlns:media="using:Windows.UI.Xaml.Media" ...>
    <Page.Resources>
        <media:AcrylicBrush x:Key="HostBackdropBrush"
                            BackgroundSource="HostBackdrop"
                            TintColor="LightBlue"
                            TintOpacity="0.6"
                            FallbackColor="LightSkyBlue"
                            FallbackForced="False" />
    </Page.Resources>

    <Grid Background="{StaticResource HostBackdropBrush}" />
</Page>

Note you can change the BackgroundSource to Backdrop to sample from the app content instead of the content behind the app window. Also make sure you define an appropriate FallbackColor because you will lose the acrylic effect when the app window has lost focus or the device is in battery saver mode.

Mysticism

I get an error saying : Unknown type 'AcrylicBrush' in XML namespace 'using:Windows.UI.Xaml.Media. I had updated Microsoft.NETCore.UniversalWindowsPlatform NuGet package to 5.3.3, rebuild the project and created a new project that only target Creator Update. How did you manage to make it compile? – Squish

@SvenBorden which sdk are you targeting n what build are you running? I am on build 16193 with sdk 16190. – Mysticism

Im on build 16193 targeting SDK 15063 – Squish

@SvenBorden Yeah I guess you will need the newer SDK 16190, thanks for pointing it out, I will update the answer. – Mysticism