Fluent AcrylicBrush does not switch between Light, Dark, theme etc. UWP

Question

Defined Light theme (<AcrylicBrush TintColor="Red"/>), Dark, (<AcrylicBrush TintColor="Orange"/>) in App.xaml. Per this post, Changing UWP project's Target Version from 1803 to 1809 disables NavigationView's Acrylic texture - why?, I added the following to ShellPage.xaml. The expected behavior when I toggle between Light and Dark theme is that the app NavigationView control will have an AcrylicBrush tint that toggles between Red and Orange. In the definition below, actual behavior is it stays Orange.

ShellPage.xaml:

<Page.Resources>
    <StaticResource  x:Key="NavigationViewExpandedPaneBackground"
                     ResourceKey="MyAcrylicBrush"/>
</Page.Resources>

App.xaml:

<Application
x:Class="TEST.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Default">
                <AcrylicBrush x:Key="MyAcrylicBrush"
                              BackgroundSource="HostBackdrop"
                              TintColor="Green"
                              TintOpacity="0.8" />
                <AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Green"
                              TintOpacity="0.8" />
                <AcrylicBrush x:Key="NavigationViewTopPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Green"
                              TintOpacity="0.8" />
                <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Green"
                              TintOpacity="0.8" />
            </ResourceDictionary>
            <ResourceDictionary x:Key="Dark">
                <AcrylicBrush x:Key="MyAcrylicBrush"
                              BackgroundSource="HostBackdrop"
                              TintColor="Orange"
                              TintOpacity="0.8" />
                <AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Orange"
                              TintOpacity="0.8" />
                <AcrylicBrush x:Key="NavigationViewTopPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Orange"
                              TintOpacity="0.8" />
                <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Orange"
                              TintOpacity="0.8" />
            </ResourceDictionary>
            <ResourceDictionary x:Key="Light">
                <AcrylicBrush x:Key="MyAcrylicBrush"
                              BackgroundSource="HostBackdrop"
                              TintColor="Red"
                              TintOpacity="1"/>
                <AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Red"
                              TintOpacity="1" />
                <AcrylicBrush x:Key="NavigationViewTopPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Red"
                              TintOpacity="1" />
                <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
                              BackgroundSource="HostBackdrop"
                              TintColor="Red"
                              TintOpacity="1"/> 
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>
</Application>

Vignesh · Answer 1 · 2019-03-04T08:58:30.900

2

You can directly give the Key(NavigationViewExpandedPaneBackGround) to your AcrylicBrush. So it will change your navigation view background.

  <Page.Resources>
      <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light">
                    <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground" BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemAccentColorDark1}" FallbackColor="{ThemeResource SystemAccentColorDark1}" TintOpacity="0.80"/>   
                </ResourceDictionary>
                <ResourceDictionary x:Key="Dark">
                    <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground" BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemAltHighColor}" FallbackColor="#333333" TintOpacity="0.50"/>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
</Page.Resources>

Hope this solves your problem.

edited Mar 04 '19 at 08:58

answered Mar 04 '19 at 07:52

Vignesh

1,824
2
10
27

Changing exactly that gives me this exception. `Windows.UI.Xaml.Markup.XamlParseException: 'XAML parsing failed.'` – Carlo Mendoza Mar 04 '19 at 08:38
1

I will edit my answer as you are looking to apply acrylic brush to NavigationViewPane – Vignesh Mar 04 '19 at 08:40
This seems to allow me to work around the issue. However, it doesn't seem to be how the Microsoft team intend this to be. Thank you @Vignesh – Carlo Mendoza Mar 04 '19 at 15:41

Martin Zikmund · Answer 2 · 2019-03-04T09:04:40.903

0

If you use StaticResource, it will keep the brush it from the first evaluation. However, you should not have to provide the resource on ShellPage at all and what you have in App.xaml should be enough - you have a brush called NavigationViewExpandedPaneBackground there and this brush should automatically override the NavigationPane default (the linked question talked specifically about the case when the resource's name is different from the built-in one). Moreover, it should work according to the current theme as it is part of theme dictionaries.

Try deleting the <StaticResource> element from ShellPage to see if it solves the problem.

I tested this change and it works properly.

Light theme

Dark theme

edited Mar 04 '19 at 09:04

answered Mar 04 '19 at 08:57

Martin Zikmund

38,440
7
70
91

Unfortunately, the AcrylicBrush effect is lost with this. In full screen mode of the app, the `NavigationView` does not have transparency. – Carlo Mendoza Mar 04 '19 at 15:19
You may not use `TintOpacity` set to 1. This makes the tint fully opaque. Try using something like 0.5 and you will definitely see through. – Martin Zikmund Mar 04 '19 at 20:04
I should have mentioned that I had TintOpacity all the way down to "0.1" and even "0.01" first--that's how I discovered something's off. I turned it up to "1" so switching between Light/Dark was obvious. Curious, where are you binding `MyAcrylicBrush` in your XAML? – Carlo Mendoza Mar 04 '19 at 21:55
I was not using MyAcrylicBrush at all. I just left the contents of App.xaml the same as you had, but never utilized MyAcrylicBrush, only the brush with default name as I mentioned in the answer :-) – Martin Zikmund Mar 05 '19 at 01:34
Got it. Are you on 17763 or 17134? What you have basically puts me back to square one--the genesis of the question. I agree that it should work, but it somehow doesn't include the `NavigationView` control. I see all other controls toggle Light/Dark. – Carlo Mendoza Mar 05 '19 at 04:38
Have you removed the section from ShellPage? I am on 1809 too – Martin Zikmund Mar 05 '19 at 08:28
Could you please post your sample project to GitHub so that I can have a look? – Martin Zikmund Mar 05 '19 at 16:43
Hi! tried your app now, and I probably know what is happening. If I move the whole content to the `ShellPage` section, it starts working as expected. The reason is probably that the ThemeDictionaries are evaluated *before* the `` entry in `Application.xaml`, which overrides them with the built-in theme resource – Martin Zikmund Mar 07 '19 at 08:15

Fluent AcrylicBrush does not switch between Light, Dark, theme etc. UWP

2 Answers2

Linked