31

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.enter image description hereenter image description here

Community
  • 1
  • 1
Vijay Nirmal
  • 5,239
  • 4
  • 26
  • 59
  • 1
    Please, could you insert the "windows-composition-api" tag for your question? It helps finding easily your question. Thanks – Luca Lindholm May 11 '17 at 13:12

2 Answers2

32

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.)Example

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

Martin Vrábel
  • 830
  • 1
  • 13
  • 36
Sven Borden
  • 1,070
  • 1
  • 13
  • 29
  • 2
    Can't we control the amount of blur? How to apply the same effect to title bar? – Vijay Nirmal Apr 30 '17 at 21:32
  • 1
    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 – Sven Borden Apr 30 '17 at 21:43
  • 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. – Vijay Nirmal May 01 '17 at 06:42
  • @VijayNirmal I've corrected the _compositor, thanks. Also I updated the code for transparent title bar. I missed a copy paste. It works now – Sven Borden May 01 '17 at 08:41
  • How to get the color shade of transparent? I did it with the below code. ` ` Is there any easy method? Also we should use `e` instead of `this` in `ElementCompositionPreview.GetElementVisual(e).Compositor` – Vijay Nirmal May 01 '17 at 09:35
  • 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 – Sven Borden May 01 '17 at 09:40
  • What happens if non-Windows 10 Creators Update machine? I think it will crash so we need to add Exception Handler. – Vijay Nirmal May 01 '17 at 09:53
  • @SvenBorden I tried your code as-is and I got a window with a black screen: http://imgur.com/a/T5i5a. I am running Build 15063, Creators Update release and SDK – DemCodeLines May 02 '17 at 18:15
  • Where does the `applyAcrylicAccent` is located? Do you set the accent to the panel? – Sven Borden May 03 '17 at 06:25
  • @SvenBorden Here's my MainPage.xaml.cs: https://pastebin.com/TniAk00k and here's my MainPage.xaml: https://pastebin.com/UEjmybVL ... This is what I get: http://imgur.com/a/i49ni – DemCodeLines May 03 '17 at 14:58
  • 1
    @DemCodeLines Hey there. I used the code you posted and got good results (see: http://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? – SonofNun May 04 '17 at 02:18
  • @SonofNun 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. – DemCodeLines May 04 '17 at 04:18
  • I was able to get it to work. Had to enable 3D Acceleration for VirtualBox – DemCodeLines May 04 '17 at 04:51
  • 1
    @DemCodeLines Great! I'm glad you got it working. :) – SonofNun May 04 '17 at 19:36
  • 3
    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? – Factor Mystic May 14 '17 at 18:11
  • Microsoft has released an official [Acrylic material](https://learn.microsoft.com/en-us/windows/uwp/style/acrylic) document – Vijay Nirmal May 14 '17 at 19:36
  • 1
    @FactorMystic This is expected behavior. The window which is not in focus will lose the acrylic effect. – Razor May 23 '17 at 09:37
  • 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 – Razor May 24 '17 at 13:03
  • As Vijay asked above, how can we check, if the CreateHostBackdropBrush() Method is available on the device? – andy May 24 '17 at 19:34
  • @MojoJojo Yes exactly, it looks like this acrylic for Creator Update is a first step before the Fall Update with noise, tint, & exclusion blend – Sven Borden May 24 '17 at 21:07
  • @andy You can check the OS Version (have a look here https://www.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 – Sven Borden May 24 '17 at 21:17
  • @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. – andy May 25 '17 at 19:23
  • @andy Using this method `public static bool IsMethodPresent(String typeName, String methodName)` – Sven Borden May 26 '17 at 20:30
  • 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. – andy May 27 '17 at 05:35
  • @andy API Namespace is `Windows.UI.Composition.CompositionBackdropBrush` – Vijay Nirmal Jun 11 '17 at 11:35
  • 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. – andy Jun 13 '17 at 16:54
  • @SvenBorden You can simply set the background color directly to Main `Grid`. You don't want additional `RelativePanel` to set the background color. – Vijay Nirmal Jun 19 '17 at 08:45
  • @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 – Sven Borden Jun 19 '17 at 19:32
  • @SvenBorden how can I find your background wallpaper? – mbed_dev Oct 28 '18 at 20:26
12

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.

Justin XL
  • 38,763
  • 7
  • 88
  • 133
  • 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? – Sven Borden May 17 '17 at 06:58
  • @SvenBorden which sdk are you targeting n what build are you running? I am on build 16193 with sdk 16190. – Justin XL May 17 '17 at 07:00
  • Im on build 16193 targeting SDK 15063 – Sven Borden May 17 '17 at 07:20
  • @SvenBorden Yeah I guess you will need the newer SDK 16190, thanks for pointing it out, I will update the answer. – Justin XL May 17 '17 at 07:21