Update AcrylicBrushes and add new AcrylicBrushes (#3498)

* Add new brushes, update CommandbarFlyout and NavigationView to use new brushes * Update brushes * Update brush references * Update project file * Update navigationview resources * Hacky workaround XAML compiler bug * Add check * Add comment * Fix typo
microsoft · Nov 24, 2020 · cce01b5 · cce01b5
1 parent e90f6f8
commit cce01b5
Show file tree

Hide file tree

Showing 8 changed files with 216 additions and 18 deletions.
diff --git a/dev/CommandBarFlyout/CommandBarFlyout.xaml b/dev/CommandBarFlyout/CommandBarFlyout.xaml
@@ -8,7 +8,7 @@
     xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)">
 
     <Style x:Key="DefaultCommandBarFlyoutCommandBarStyle" TargetType="local:CommandBarFlyoutCommandBar">
-        <Setter Property="Background" Value="{ThemeResource SystemControlAcrylicElementBrush}" />
+        <Setter Property="Background" Value="{ThemeResource SystemControlTransientAcrylicElementBrush}" />
         <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
         <Setter Property="BorderBrush" Value="{ThemeResource SystemControlTransientBorderBrush}" />
         <Setter Property="BorderThickness" Value="{ThemeResource CommandBarFlyoutBorderThemeThickness}" />

diff --git a/dev/Materials/Acrylic/AcrylicBrush.vcxitems b/dev/Materials/Acrylic/AcrylicBrush.vcxitems
@@ -45,5 +45,10 @@
       <Type>ThemeResources</Type>
       <Priority>2</Priority>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)AcrylicBrush_19h1_themeresources.xaml">
+      <Version>19H1</Version>
+      <Type>ThemeResources</Type>
+      <Priority>6</Priority>
+    </Page>
   </ItemGroup>
 </Project>
diff --git a/dev/Materials/Acrylic/AcrylicBrush_19h1_themeresources.xaml b/dev/Materials/Acrylic/AcrylicBrush_19h1_themeresources.xaml
@@ -0,0 +1,77 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.UI.Xaml.Media">
+
+    <!--
+        Due to a low level compiler bug, setting nullable doubles does not work on all platforms.
+        Because of that, TintLuminosityOpacity will be set through code behind when loading these brushes.
+        This is being done in XAMLControlsResources.cpp .
+    -->
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+            <local:AcrylicBrush
+                x:Key="SystemControlTransientBackgroundBrush"
+                TintColor="#2C2C2C"
+                TintOpacity="0.15"
+                FallbackColor="#2C2C2C"
+                BackgroundSource="HostBackdrop"/>
+            <local:AcrylicBrush
+                x:Key="SystemControlTransientAcrylicElementBrush"
+                TintColor="#2C2C2C"
+                TintOpacity="0.15"
+                FallbackColor="#2C2C2C"
+                BackgroundSource="Backdrop"/>
+            <local:AcrylicBrush
+                x:Key="SystemControlTransientBackgroundInverseBrush"
+                TintColor="#FCFCFC"
+                TintOpacity="0.0"
+                FallbackColor="#FCFCFC"
+                BackgroundSource="HostBackdrop"/>
+            <local:AcrylicBrush
+                x:Key="SystemControlBaseAcrylicBrush"
+                TintColor="#202020"
+                TintOpacity="0.0"
+                FallbackColor="#202020"
+                BackgroundSource="HostBackdrop"/>
+            <SolidColorBrush x:Key="SystemControlDefaultBrighteningBrush" Color="#FFFFFF" Opacity="0.0419"/>
+        </ResourceDictionary>
+
+        <ResourceDictionary x:Key="Light">
+            <local:AcrylicBrush
+                x:Key="SystemControlTransientBackgroundBrush"
+                TintColor="#FCFCFC"
+                TintOpacity="0.0"
+                FallbackColor="#FCFCFC"
+                BackgroundSource="HostBackdrop"/>
+            <local:AcrylicBrush
+                x:Key="SystemControlTransientAcrylicElementBrush"
+                TintColor="#FCFCFC"
+                TintOpacity="0.0"
+                FallbackColor="#FCFCFC"
+                BackgroundSource="Backdrop"/>
+            <local:AcrylicBrush
+                x:Key="SystemControlTransientBackgroundInverseBrush"
+                TintColor="#2C2C2C"
+                TintOpacity="0.15"
+                FallbackColor="#2C2C2C"
+                BackgroundSource="HostBackdrop"/>
+            <local:AcrylicBrush
+                x:Key="SystemControlBaseAcrylicBrush"
+                TintColor="#F3F3F3"
+                TintOpacity="0.0"
+                FallbackColor="#F3F3F3"
+                BackgroundSource="HostBackdrop"/>
+            <SolidColorBrush x:Key="SystemControlDefaultBrighteningBrush" Color="#FFFFFF" Opacity="0.5"/>
+        </ResourceDictionary>
+
+        <ResourceDictionary x:Key="HighContrast">
+            <SolidColorBrush x:Key="SystemControlTransientBackgroundBrush" Color="{ThemeResource SystemColorWindowColor}"/>
+            <SolidColorBrush x:Key="SystemControlTransientAcrylicElementBrush" Color="{ThemeResource SystemColorWindowColor}"/>
+            <SolidColorBrush x:Key="SystemControlTransientBackgroundInverseBrush" Color="{ThemeResource SystemColorWindowTextColor}" />
+            <SolidColorBrush x:Key="SystemControlBaseAcrylicBrush" Color="{ThemeResource SystemColorWindowColor}"/>
+            <SolidColorBrush x:Key="SystemControlDefaultBrighteningBrush" Color="{ThemeResource SystemColorWindowColor}"/>
+        </ResourceDictionary>
+
+    </ResourceDictionary.ThemeDictionaries>
+</ResourceDictionary>
diff --git a/dev/Materials/Acrylic/AcrylicBrush_rs1_themeresources.xaml b/dev/Materials/Acrylic/AcrylicBrush_rs1_themeresources.xaml
@@ -46,6 +46,10 @@
             <SolidColorBrush x:Key="SystemControlAltHighAcrylicElementBrush" Color="{StaticResource SystemAltHighColor}" />
             <SolidColorBrush x:Key="SystemControlTransientBorderBrush" Color="#000000" Opacity="0.36" />
             <StaticResource x:Key="SystemControlTransientBackgroundBrush" ResourceKey="SystemChromeMediumLowColor" />
+            <StaticResource x:Key="SystemControlTransientAcrylicElementBrush" ResourceKey="SystemChromeMediumLowColor" />
+            <SolidColorBrush x:Key="SystemControlTransientBackgroundInverseBrush" Color="#F2F2F2" />
+            <StaticResource x:Key="SystemControlBaseAcrylicBrush" ResourceKey="SystemChromeMediumLowColor" />
+            <SolidColorBrush x:Key="SystemControlDefaultBrighteningBrush" Color="#FFFFFF" Opacity="0.0419"/>
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="Light">
@@ -89,6 +93,10 @@
             <SolidColorBrush x:Key="SystemControlAltHighAcrylicElementBrush" Color="{StaticResource SystemAltHighColor}" />
             <SolidColorBrush x:Key="SystemControlTransientBorderBrush" Color="#000000" Opacity="0.14" />
             <StaticResource x:Key="SystemControlTransientBackgroundBrush" ResourceKey="SystemChromeMediumLowColor" />
+            <StaticResource x:Key="SystemControlTransientAcrylicElementBrush" ResourceKey="SystemChromeMediumLowColor" />
+            <SolidColorBrush x:Key="SystemControlTransientBackgroundInverseBrush" Color="#2B2B2B" />
+            <StaticResource x:Key="SystemControlBaseAcrylicBrush" ResourceKey="SystemChromeMediumLowColor" />
+            <SolidColorBrush x:Key="SystemControlDefaultBrighteningBrush" Color="#FFFFFF" Opacity="0.5"/>
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="HighContrast">
@@ -130,8 +138,12 @@
             <SolidColorBrush x:Key="SystemControlAltMediumLowAcrylicElementMediumBrush" Color="{ThemeResource SystemColorWindowColor}" />
             <SolidColorBrush x:Key="SystemControlAltHighAcrylicWindowBrush" Color="{ThemeResource SystemColorWindowColor}" />
             <SolidColorBrush x:Key="SystemControlAltHighAcrylicElementBrush" Color="{ThemeResource SystemColorWindowColor}" />
-            <StaticResource x:Key="SystemControlTransientBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
-            <StaticResource x:Key="SystemControlTransientBackgroundBrush" ResourceKey="SystemChromeMediumLowColor" />
+            <SolidColorBrush x:Key="SystemControlTransientBorderBrush" Color="{ThemeResource SystemColorWindowTextColor}" />
+            <SolidColorBrush x:Key="SystemControlTransientBackgroundBrush" Color="{ThemeResource SystemColorWindowColor}"/>
+            <SolidColorBrush x:Key="SystemControlTransientAcrylicElementBrush" Color="{ThemeResource SystemColorWindowColor}"/>
+            <SolidColorBrush x:Key="SystemControlTransientBackgroundInverseBrush" Color="{ThemeResource SystemColorWindowTextColor}" />
+            <SolidColorBrush x:Key="SystemControlBaseAcrylicBrush" Color="{ThemeResource SystemColorWindowColor}"/>
+            <SolidColorBrush x:Key="SystemControlDefaultBrighteningBrush" Color="{ThemeResource SystemColorWindowColor}"/>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 

diff --git a/dev/Materials/Acrylic/AcrylicBrush_rs2_themeresources.xaml b/dev/Materials/Acrylic/AcrylicBrush_rs2_themeresources.xaml
@@ -217,10 +217,29 @@
             <SolidColorBrush x:Key="SystemControlTransientBorderBrush" Color="#000000" Opacity="0.36" />
             <local:AcrylicBrush
                 x:Key="SystemControlTransientBackgroundBrush"
-                BackgroundSource="HostBackdrop"
-                TintColor="{StaticResource SystemChromeAltHighColor}"
+                TintColor="#1C1C1C"
                 TintOpacity="0.8"
-                FallbackColor="{StaticResource SystemChromeMediumLowColor}" />
+                FallbackColor="#2C2C2C"
+                BackgroundSource="HostBackdrop"/>
+            <local:AcrylicBrush
+                x:Key="SystemControlTransientAcrylicElementBrush"
+                TintColor="#1C1C1C"
+                TintOpacity="0.8"
+                FallbackColor="#2C2C2C"
+                BackgroundSource="Backdrop"/>
+            <local:AcrylicBrush
+                x:Key="SystemControlTransientBackgroundInverseBrush"
+                TintColor="#FCFCFC"
+                TintOpacity="0.8"
+                FallbackColor="#FCFCFC"
+                BackgroundSource="HostBackdrop"/>
+            <local:AcrylicBrush
+                x:Key="SystemControlBaseAcrylicBrush"
+                TintColor="#1C1C1C"
+                TintOpacity="0.8"
+                FallbackColor="#202020"
+                BackgroundSource="HostBackdrop"/>
+            <SolidColorBrush x:Key="SystemControlDefaultBrighteningBrush" Color="#FFFFFF" Opacity="0.0419"/>
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="Light">
@@ -435,10 +454,30 @@
             <SolidColorBrush x:Key="SystemControlTransientBorderBrush" Color="#000000" Opacity="0.14" />
             <local:AcrylicBrush
                 x:Key="SystemControlTransientBackgroundBrush"
-                BackgroundSource="HostBackdrop"
-                TintColor="{StaticResource SystemChromeAltHighColor}"
+                TintColor="#FCFCFC"
                 TintOpacity="0.8"
-                FallbackColor="{StaticResource SystemChromeMediumLowColor}" />  
+                FallbackColor="#FCFCFC"
+                BackgroundSource="HostBackdrop"/>
+            <local:AcrylicBrush
+                x:Key="SystemControlTransientAcrylicElementBrush"
+                TintColor="#FCFCFC"
+                TintOpacity="0.8"
+                FallbackColor="#FCFCFC"
+                BackgroundSource="Backdrop"/>
+            <local:AcrylicBrush
+                x:Key="SystemControlTransientBackgroundInverseBrush"
+                TintColor="#1C1C1C"
+                TintOpacity="0.8"
+                FallbackColor="#202020"
+                BackgroundSource="HostBackdrop"/>
+            <local:AcrylicBrush
+                x:Key="SystemControlBaseAcrylicBrush"
+                TintColor="#F3F3F3"
+                TintOpacity="0.8"
+                FallbackColor="#F3F3F3"
+                BackgroundSource="HostBackdrop"/>
+            <SolidColorBrush x:Key="SystemControlDefaultBrighteningBrush" Color="#FFFFFF" Opacity="0.5"/>
+
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="HighContrast">
@@ -480,8 +519,12 @@
             <SolidColorBrush x:Key="SystemControlAltMediumLowAcrylicElementMediumBrush" Color="{ThemeResource SystemColorWindowColor}" />
             <SolidColorBrush x:Key="SystemControlAltHighAcrylicWindowBrush" Color="{ThemeResource SystemColorWindowColor}" />
             <SolidColorBrush x:Key="SystemControlAltHighAcrylicElementBrush" Color="{ThemeResource SystemColorWindowColor}" />
-            <StaticResource x:Key="SystemControlTransientBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
-            <StaticResource x:Key="SystemControlTransientBackgroundBrush" ResourceKey="SystemChromeMediumLowColor" />
+            <SolidColorBrush x:Key="SystemControlTransientBorderBrush" Color="{ThemeResource SystemColorWindowTextColor}" />
+            <SolidColorBrush x:Key="SystemControlTransientBackgroundBrush" Color="{ThemeResource SystemColorWindowColor}"/>
+            <SolidColorBrush x:Key="SystemControlTransientAcrylicElementBrush" Color="{ThemeResource SystemColorWindowColor}"/>
+            <SolidColorBrush x:Key="SystemControlTransientBackgroundInverseBrush" Color="{ThemeResource SystemColorWindowTextColor}" />
+            <SolidColorBrush x:Key="SystemControlBaseAcrylicBrush" Color="{ThemeResource SystemColorWindowColor}"/>
+            <SolidColorBrush x:Key="SystemControlDefaultBrighteningBrush" Color="{ThemeResource SystemColorWindowColor}"/>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 

diff --git a/dev/NavigationView/NavigationView_rs2_themeresources.xaml b/dev/NavigationView/NavigationView_rs2_themeresources.xaml
@@ -8,8 +8,8 @@
 
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Default">
-            <StaticResource x:Key="NavigationViewDefaultPaneBackground" ResourceKey="SystemControlAcrylicElementBrush" />
-            <StaticResource x:Key="NavigationViewTopPaneBackground" ResourceKey="SystemControlChromeMediumLowAcrylicElementMediumBrush" />
+            <StaticResource x:Key="NavigationViewDefaultPaneBackground" ResourceKey="SystemControlTransientAcrylicElementBrush" />
+            <StaticResource x:Key="NavigationViewTopPaneBackground" ResourceKey="SystemControlTransientAcrylicElementBrush" />
 
             <StaticResource x:Key="NavigationViewItemBackground" ResourceKey="SystemControlTransparentRevealBackgroundBrush" />
             <StaticResource x:Key="NavigationViewItemBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowRevealBackgroundBrush" />
@@ -44,8 +44,8 @@
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="Light">
-            <StaticResource x:Key="NavigationViewDefaultPaneBackground" ResourceKey="SystemControlAcrylicElementBrush" />
-            <StaticResource x:Key="NavigationViewTopPaneBackground" ResourceKey="SystemControlChromeMediumLowAcrylicElementMediumBrush" />
+            <StaticResource x:Key="NavigationViewDefaultPaneBackground" ResourceKey="SystemControlTransientAcrylicElementBrush" />
+            <StaticResource x:Key="NavigationViewTopPaneBackground" ResourceKey="SystemControlTransientAcrylicElementBrush" />
 
             <StaticResource x:Key="NavigationViewItemBackground" ResourceKey="SystemControlTransparentRevealBackgroundBrush" />
             <StaticResource x:Key="NavigationViewItemBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowRevealBackgroundBrush" />
@@ -79,8 +79,8 @@
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="HighContrast">
-            <StaticResource x:Key="NavigationViewDefaultPaneBackground" ResourceKey="SystemControlAcrylicElementBrush" />
-            <StaticResource x:Key="NavigationViewTopPaneBackground" ResourceKey="SystemControlChromeMediumLowAcrylicElementMediumBrush" />
+            <StaticResource x:Key="NavigationViewDefaultPaneBackground" ResourceKey="SystemControlTransientAcrylicElementBrush" />
+            <StaticResource x:Key="NavigationViewTopPaneBackground" ResourceKey="SystemControlTransientAcrylicElementBrush" />
 
             <StaticResource x:Key="NavigationViewItemBackground" ResourceKey="SystemControlBackgroundBaseLowBrush" />
             <StaticResource x:Key="NavigationViewItemBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowRevealBackgroundBrush" />

diff --git a/dev/dll/XamlControlsResources.cpp b/dev/dll/XamlControlsResources.cpp
@@ -7,6 +7,11 @@
 #include "RevealBrush.h"
 #include "MUXControlsFactory.h"
 
+static constexpr auto c_SystemControlTransientBackgroundBrush = L"SystemControlTransientBackgroundBrush"sv;
+static constexpr auto c_SystemControlTransientAcrylicElementBrush = L"SystemControlTransientAcrylicElementBrush"sv;
+static constexpr auto c_SystemControlTransientBackgroundInverseBrush = L"SystemControlTransientBackgroundInverseBrush"sv;
+static constexpr auto c_SystemControlBaseAcrylicBrush = L"SystemControlBaseAcrylicBrush"sv;
+
 XamlControlsResources::XamlControlsResources()
 {
     // On Windows, we need to add theme resources manually.  We'll still add an instance of this element to get the rest of
@@ -87,6 +92,61 @@ void XamlControlsResources::UpdateSource()
     ThemeDictionaries().Clear();
 
     Source(uri);
+
+    // Hacky workaround for a XAML compiler bug:
+    // Assigning nullable primitive types from XAML fails with disabled XAML metadata reflection on older versions.
+    // The MUXC AcrylicBrush's TintLuminosityOpacity is a nullable double though and needs to be set.
+    // Solution: Load theme resources and edit brushes manually.
+    // Since something must go horribly wrong for those lookups to fail, we just assume they exist.
+    if (SharedHelpers::Is19H1OrHigher())
+    {
+        UpdateAcrylicBrushesDarkTheme(ThemeDictionaries().Lookup(box_value(L"Default")));
+        UpdateAcrylicBrushesLightTheme(ThemeDictionaries().Lookup(box_value(L"Light")));
+    }
+}
+
+void XamlControlsResources::UpdateAcrylicBrushesLightTheme(const winrt::IInspectable themeDictionary)
+{
+    const auto dictionary = themeDictionary.try_as<winrt::ResourceDictionary>();
+    if (const auto systemControlTransientBackgroundBrush = dictionary.Lookup(box_value(c_SystemControlTransientBackgroundBrush)).try_as<winrt::AcrylicBrush>())
+    {
+        systemControlTransientBackgroundBrush.TintLuminosityOpacity(0.85);
+    }
+    if (const auto systemControlTransientAcrylicElementBrush = dictionary.Lookup(box_value(c_SystemControlTransientAcrylicElementBrush)).try_as<winrt::AcrylicBrush>())
+    {
+        systemControlTransientAcrylicElementBrush.TintLuminosityOpacity(0.85);
+    }
+    if (const auto systemControlTransientBackgroundInverseBrush = dictionary.Lookup(box_value(c_SystemControlTransientBackgroundInverseBrush)).try_as<winrt::AcrylicBrush>())
+    {
+        systemControlTransientBackgroundInverseBrush.TintLuminosityOpacity(0.96);
+    }
+    if (const auto systemControlBaseAcrylicBrush = dictionary.Lookup(box_value(c_SystemControlBaseAcrylicBrush)).try_as<winrt::AcrylicBrush>())
+    {
+        systemControlBaseAcrylicBrush.TintLuminosityOpacity(0.9);
+    }
+}
+
+void XamlControlsResources::UpdateAcrylicBrushesDarkTheme(const winrt::IInspectable themeDictionary)
+{
+    if (const auto dictionary = themeDictionary.try_as<winrt::ResourceDictionary>())
+    {
+        if (const auto systemControlTransientBackgroundBrush = dictionary.Lookup(box_value(c_SystemControlTransientBackgroundBrush)).try_as<winrt::AcrylicBrush>())
+        {
+            systemControlTransientBackgroundBrush.TintLuminosityOpacity(0.96);
+        }
+        if (const auto systemControlTransientAcrylicElementBrush = dictionary.Lookup(box_value(c_SystemControlTransientAcrylicElementBrush)).try_as<winrt::AcrylicBrush>())
+        {
+            systemControlTransientAcrylicElementBrush.TintLuminosityOpacity(0.96);
+        }
+        if (const auto systemControlTransientBackgroundInverseBrush = dictionary.Lookup(box_value(c_SystemControlTransientBackgroundInverseBrush)).try_as<winrt::AcrylicBrush>())
+        {
+            systemControlTransientBackgroundInverseBrush.TintLuminosityOpacity(0.85);
+        }
+        if (const auto systemControlBaseAcrylicBrush = dictionary.Lookup(box_value(c_SystemControlBaseAcrylicBrush)).try_as<winrt::AcrylicBrush>())
+        {
+            systemControlBaseAcrylicBrush.TintLuminosityOpacity(0.96);
+        }
+    }
 }
 
 void SetDefaultStyleKeyWorker(winrt::IControlProtected const& controlProtected, std::wstring_view const& className) 

diff --git a/dev/dll/XamlControlsResources.h b/dev/dll/XamlControlsResources.h
@@ -14,7 +14,8 @@ class XamlControlsResources :
     XamlControlsResources();
 
     void OnPropertyChanged(const winrt::DependencyPropertyChangedEventArgs&  args);
-
+    void UpdateAcrylicBrushesLightTheme(const winrt::IInspectable themeDictionary);
+    void UpdateAcrylicBrushesDarkTheme(const winrt::IInspectable themeDictionary);
     static void EnsureRevealLights(winrt::UIElement const& element);
 private:
     void UpdateSource();