How to use Acrylic Accent in Windows 10 Creators Update?
Solution 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
Solution 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.
Vijay Nirmal
A Tech lover, follows Tech news and Learn new Softwares link Adobe Premiere pro, After Effects, Blunder etc. Skills: UWP developer, Video Editor(Adobe Premiere pro, After Effects), Photo Editor(Adobe Photoshop, LightRoom), 3D designer(Blunder), AutoCAD.
Updated on July 18, 2020Comments
-
Vijay Nirmal almost 4 years
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.
-
Vijay Nirmal about 7 yearsCan't we control the amount of blur? How to apply the same effect to title bar?
-
Sven Borden about 7 yearsI 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
-
Vijay Nirmal about 7 yearsAlways
_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. -
Sven Borden about 7 years@VijayNirmal I've corrected the _compositor, thanks. Also I updated the code for transparent title bar. I missed a copy paste. It works now
-
Vijay Nirmal about 7 yearsHow 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 usee
instead ofthis
inElementCompositionPreview.GetElementVisual(e).Compositor
-
Sven Borden about 7 yearsWell, 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 -
Vijay Nirmal about 7 yearsWhat happens if non-Windows 10 Creators Update machine? I think it will crash so we need to add Exception Handler.
-
DemCodeLines about 7 years@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
-
Sven Borden about 7 yearsWhere does the
applyAcrylicAccent
is located? Do you set the accent to the panel? -
DemCodeLines about 7 years@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
-
SonofNun about 7 years@DemCodeLines 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?
-
DemCodeLines about 7 years@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 about 7 yearsI was able to get it to work. Had to enable 3D Acceleration for VirtualBox
-
SonofNun about 7 years@DemCodeLines Great! I'm glad you got it working. :)
-
Factor Mystic about 7 yearsWith 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?
-
Vijay Nirmal about 7 yearsMicrosoft has released an official Acrylic material document
-
Sven Borden about 7 yearsI get an error saying :
Unknown type 'AcrylicBrush' in XML namespace 'using:Windows.UI.Xaml.Media
. I had updatedMicrosoft.NETCore.UniversalWindowsPlatform
NuGet package to5.3.3
, rebuild the project and created a new project that only target Creator Update. How did you manage to make it compile? -
Justin XL about 7 years@SvenBorden which sdk are you targeting n what build are you running? I am on build 16193 with sdk 16190.
-
Sven Borden about 7 yearsIm on build 16193 targeting SDK 15063
-
Justin XL about 7 years@SvenBorden Yeah I guess you will need the newer SDK 16190, thanks for pointing it out, I will update the answer.
-
Razor almost 7 years@FactorMystic This is expected behavior. The window which is not in focus will lose the acrylic effect.
-
Razor almost 7 yearsAlso, 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
-
andy almost 7 yearsAs Vijay asked above, how can we check, if the CreateHostBackdropBrush() Method is available on the device?
-
Sven Borden almost 7 years@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 almost 7 years@andy 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
-
andy almost 7 years@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.
-
Sven Borden almost 7 years@andy Using this method
public static bool IsMethodPresent(String typeName, String methodName)
-
andy almost 7 yearsI 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.
-
Vijay Nirmal almost 7 years@andy API Namespace is
Windows.UI.Composition.CompositionBackdropBrush
-
andy almost 7 yearsThank 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.
-
Vijay Nirmal almost 7 years@SvenBorden You can simply set the background color directly to Main
Grid
. You don't want additionalRelativePanel
to set the background color. -
Sven Borden almost 7 years@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 -
mbed_dev over 5 years@SvenBorden how can I find your background wallpaper?