Updating acrylic usage for XAML islands (#5179)

We need to make two updates to get acrylic to work properly in XAML islands: 1. Flyouts should use in-app acrylic rather than HostBackdrop, since they're being drawn on top of other content in the app. 2. We should use the system XAML version of AcrylicBrush - that properly accounts for XAML islands, whereas the WinUI 2 version does not. With these two changes, acrylic works properly in both a UWP app and a XAML islands app. I modified WpfApp to add some flyouts and a rainbow background to showcase this scenario and get a XAML islands app on which this can be tested, and also modified some pages in MUXControlsTestApp to add a rainbow background there as well to make it easier to tell if acrylic is working properly.
microsoft · Jun 17, 2021 · fc4900a · fc4900a
1 parent 3d2d5a8
commit fc4900a
Show file tree

Hide file tree

Showing 20 changed files with 906 additions and 143 deletions.
diff --git a/dev/CommandBarFlyout/CommandBarFlyout_themeresources.xaml b/dev/CommandBarFlyout/CommandBarFlyout_themeresources.xaml
@@ -14,7 +14,8 @@
 
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Default">
-            <StaticResource x:Key="CommandBarFlyoutBackground" ResourceKey="SystemControlTransientBackgroundBrush"/>
+            <contract7NotPresent:StaticResource x:Key="CommandBarFlyoutBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush"/>
+            <contract7Present:StaticResource x:Key="CommandBarFlyoutBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush"/>
             <StaticResource x:Key="CommandBarFlyoutForeground" ResourceKey="TextFillColorPrimaryBrush"/>
             <StaticResource x:Key="CommandBarFlyoutBorderBrush" ResourceKey="ControlStrokeColorDefaultBrush"/>
             <StaticResource x:Key="CommandBarFlyoutAppBarButtonBackground" ResourceKey="SubtleFillColorTransparentBrush"/>
@@ -45,7 +46,8 @@
             <StaticResource x:Key="CommandBarFlyoutButtonBackground" ResourceKey="SystemControlTransparentBrush" />
         </ResourceDictionary>
         <ResourceDictionary x:Key="Light">
-            <StaticResource x:Key="CommandBarFlyoutBackground" ResourceKey="SystemControlTransientBackgroundBrush"/>
+            <contract7NotPresent:StaticResource x:Key="CommandBarFlyoutBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush"/>
+            <contract7Present:StaticResource x:Key="CommandBarFlyoutBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush"/>
             <StaticResource x:Key="CommandBarFlyoutForeground" ResourceKey="TextFillColorPrimaryBrush"/>
             <StaticResource x:Key="CommandBarFlyoutBorderBrush" ResourceKey="ControlStrokeColorDefaultBrush"/>
             <StaticResource x:Key="CommandBarFlyoutAppBarButtonBackground" ResourceKey="SubtleFillColorTransparentBrush"/>

diff --git a/dev/CommandBarFlyout/TestUI/CommandBarFlyoutPage.xaml b/dev/CommandBarFlyout/TestUI/CommandBarFlyoutPage.xaml
@@ -10,7 +10,18 @@
     xmlns:contract13Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,13)"
     mc:Ignorable="d">
 
-    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <Grid>
+        <Grid.Background>
+            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                <GradientStop Color="Red" Offset="0.000" />
+                <GradientStop Color="Orange" Offset="0.167" />
+                <GradientStop Color="Yellow" Offset="0.333" />
+                <GradientStop Color="Green" Offset="0.500" />
+                <GradientStop Color="Blue" Offset="0.667" />
+                <GradientStop Color="Indigo" Offset="0.833" />
+                <GradientStop Color="Violet" Offset="1.000" />
+            </LinearGradientBrush>
+        </Grid.Background>
         <Grid.RowDefinitions>
             <RowDefinition />
             <RowDefinition Height="Auto" />

diff --git a/dev/CommonStyles/CommandBar_themeresources.xaml b/dev/CommonStyles/CommandBar_themeresources.xaml
@@ -25,7 +25,7 @@
             <StaticResource x:Key="CommandBarEllipsisIconForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
             <contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
             <contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
-            <contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
+            <contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
             <contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
             <StaticResource x:Key="CommandBarLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
             <Thickness x:Key="CommandBarOverflowPresenterBorderThickness">1</Thickness>
@@ -74,7 +74,7 @@
             <StaticResource x:Key="CommandBarEllipsisIconForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
             <contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
             <contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
-            <contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
+            <contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
             <contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
             <StaticResource x:Key="CommandBarLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
             <Thickness x:Key="CommandBarOverflowPresenterBorderThickness">1</Thickness>

diff --git a/dev/CommonStyles/CommandBar_themeresources_v1.xaml b/dev/CommonStyles/CommandBar_themeresources_v1.xaml
@@ -17,7 +17,7 @@
             <StaticResource x:Key="CommandBarEllipsisIconForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
             <contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
             <contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
-            <contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
+            <contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
             <contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
             <StaticResource x:Key="CommandBarLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
             <Thickness x:Key="CommandBarOverflowPresenterBorderThickness">1</Thickness>
@@ -59,7 +59,7 @@
             <StaticResource x:Key="CommandBarEllipsisIconForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
             <contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
             <contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
-            <contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
+            <contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
             <contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
             <StaticResource x:Key="CommandBarLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
             <Thickness x:Key="CommandBarOverflowPresenterBorderThickness">1</Thickness>
@@ -1724,4 +1724,4 @@
             </Setter.Value>
         </Setter>
     </contract6Present:Style>
-</ResourceDictionary>
+</ResourceDictionary>
diff --git a/dev/CommonStyles/Deprecated_themeresources_any.xaml b/dev/CommonStyles/Deprecated_themeresources_any.xaml
@@ -3,13 +3,16 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:primitives="using:Microsoft.UI.Xaml.Controls.Primitives"
-    xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)"
-    xmlns:local="using:Microsoft.UI.Xaml.Media">
+    xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
+    xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)">
 
     <!-- 2.5 controls should not depend on brushes on this file except for new controls like Expander -->
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Default">
-            <local:AcrylicBrush
+            <contract7NotPresent:StaticResource
+                x:Key="SystemControlTransientBackgroundBrush"
+                ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
+            <contract7Present:AcrylicBrush
                 x:Key="SystemControlTransientBackgroundBrush"
                 TintColor="#2C2C2C"
                 TintOpacity="0.15"
@@ -53,7 +56,10 @@
             <SolidColorBrush x:Key="ControlAAStrokeColorDisabledBrush" Color="{StaticResource ControlAAStrokeColorDisabled}" />
         </ResourceDictionary>
         <ResourceDictionary x:Key="Light">
-            <local:AcrylicBrush
+            <contract7NotPresent:StaticResource
+                x:Key="SystemControlTransientBackgroundBrush"
+                ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
+            <contract7Present:AcrylicBrush
                 x:Key="SystemControlTransientBackgroundBrush"
                 TintColor="#FCFCFC"
                 TintOpacity="0.0"

diff --git a/dev/CommonStyles/FlyoutPresenter_themeresources.xaml b/dev/CommonStyles/FlyoutPresenter_themeresources.xaml
@@ -7,7 +7,7 @@
 
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Default">
-            <StaticResource x:Key="FlyoutPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
+            <StaticResource x:Key="FlyoutPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
             <StaticResource x:Key="FlyoutBorderThemeBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
             <Thickness x:Key="FlyoutBorderThemeThickness">1</Thickness>
         </ResourceDictionary>
@@ -17,7 +17,7 @@
             <Thickness x:Key="FlyoutBorderThemeThickness">2</Thickness>
         </ResourceDictionary>
         <ResourceDictionary x:Key="Light">
-            <StaticResource x:Key="FlyoutPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
+            <StaticResource x:Key="FlyoutPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
             <StaticResource x:Key="FlyoutBorderThemeBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
             <Thickness x:Key="FlyoutBorderThemeThickness">1</Thickness>
         </ResourceDictionary>

diff --git a/dev/CommonStyles/MenuFlyout_themeresources.xaml b/dev/CommonStyles/MenuFlyout_themeresources.xaml
@@ -38,7 +38,7 @@
             <StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundPointerOver" ResourceKey="TextFillColorSecondaryBrush" />
             <StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundPressed" ResourceKey="TextFillColorSecondaryBrush" />
             <StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
-            <StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
+            <StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
             <StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
             <Thickness x:Key="MenuFlyoutPresenterBorderThemeThickness">1</Thickness>
 
@@ -204,7 +204,7 @@
             <StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundPointerOver" ResourceKey="TextFillColorSecondaryBrush" />
             <StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundPressed" ResourceKey="TextFillColorSecondaryBrush" />
             <StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
-            <StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
+            <StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
             <StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
             <Thickness x:Key="MenuFlyoutPresenterBorderThemeThickness">1</Thickness>
 

diff --git a/dev/CommonStyles/MenuFlyout_themeresources_v1.xaml b/dev/CommonStyles/MenuFlyout_themeresources_v1.xaml
@@ -54,7 +54,7 @@
             <StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
             <Thickness x:Key="MenuFlyoutItemThemePadding">11,9,11,10</Thickness>
             <Thickness x:Key="MenuFlyoutItemThemePaddingNarrow">11,4,11,7</Thickness>
-            <contract7Present:StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
+            <contract7Present:StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
             <contract7NotPresent:StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
             <contract7Present:StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
             <contract7NotPresent:StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
@@ -220,7 +220,7 @@
             <StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
             <Thickness x:Key="MenuFlyoutItemThemePadding">11,9,11,10</Thickness>
             <Thickness x:Key="MenuFlyoutItemThemePaddingNarrow">11,4,11,7</Thickness>
-            <contract7Present:StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
+            <contract7Present:StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
             <contract7NotPresent:StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
             <contract7Present:StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
             <contract7NotPresent:StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />

diff --git a/dev/CommonStyles/TestUI/CommandBarPage.xaml b/dev/CommonStyles/TestUI/CommandBarPage.xaml
@@ -10,14 +10,24 @@
   xmlns:contract6Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,6)"
   xmlns:contract6NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,6)"
   xmlns:contract5NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,5)"
-    mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    mc:Ignorable="d">
 
 
     <Page.Resources>
     </Page.Resources>
 
     <Grid>
+        <Grid.Background>
+            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                <GradientStop Color="Red" Offset="0.000" />
+                <GradientStop Color="Orange" Offset="0.167" />
+                <GradientStop Color="Yellow" Offset="0.333" />
+                <GradientStop Color="Green" Offset="0.500" />
+                <GradientStop Color="Blue" Offset="0.667" />
+                <GradientStop Color="Indigo" Offset="0.833" />
+                <GradientStop Color="Violet" Offset="1.000" />
+            </LinearGradientBrush>
+        </Grid.Background>
         <StackPanel Orientation="Vertical">
 
             <CommandBar>

diff --git a/dev/CommonStyles/TestUI/MenuFlyoutPage.xaml b/dev/CommonStyles/TestUI/MenuFlyoutPage.xaml
@@ -9,7 +9,18 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
 
-    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="12">
+    <Grid Margin="12">
+        <Grid.Background>
+            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                <GradientStop Color="Red" Offset="0.000" />
+                <GradientStop Color="Orange" Offset="0.167" />
+                <GradientStop Color="Yellow" Offset="0.333" />
+                <GradientStop Color="Green" Offset="0.500" />
+                <GradientStop Color="Blue" Offset="0.667" />
+                <GradientStop Color="Indigo" Offset="0.833" />
+                <GradientStop Color="Violet" Offset="1.000" />
+            </LinearGradientBrush>
+        </Grid.Background>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto"/>
             <ColumnDefinition Width="Auto"/>

diff --git a/dev/CommonStyles/ToolTip_rs5_themeresources.xaml b/dev/CommonStyles/ToolTip_rs5_themeresources.xaml
@@ -6,14 +6,14 @@
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Default">
             <StaticResource x:Key="ToolTipForegroundBrush" ResourceKey="TextFillColorPrimaryBrush" />
-            <StaticResource x:Key="ToolTipBackgroundBrush" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
+            <StaticResource x:Key="ToolTipBackgroundBrush" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
             <StaticResource x:Key="ToolTipBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
 
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="Light">
             <StaticResource x:Key="ToolTipForegroundBrush" ResourceKey="TextFillColorPrimaryBrush" />
-            <StaticResource x:Key="ToolTipBackgroundBrush" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
+            <StaticResource x:Key="ToolTipBackgroundBrush" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
             <StaticResource x:Key="ToolTipBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
         </ResourceDictionary>
 

diff --git a/dev/Materials/Acrylic/APITests/AcrylicBrushTests.cs b/dev/Materials/Acrylic/APITests/AcrylicBrushTests.cs
@@ -84,6 +84,12 @@ public void VerifyAcrylicBrushNameRule()
 #endif
         public void VerifyAcrylicBrushHasCorrectFallbackColor()
         {
+            if (PlatformConfiguration.IsOsVersionGreaterThan(OSVersion.Redstone2))
+            {
+                Log.Comment("Using system XAML AcrylicBrushes post-RS2, so nothing to test.");
+                return;
+            }
+
             RunOnUIThread.Execute(() =>
             {
                 // only select the pair whose <fallback color> is not empty

diff --git a/dev/Materials/Acrylic/AcrylicBrush.vcxitems b/dev/Materials/Acrylic/AcrylicBrush.vcxitems
@@ -45,6 +45,11 @@
       <Type>ThemeResources</Type>
       <Priority>2</Priority>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)AcrylicBrush_rs3_themeresources.xaml">
+      <Version>RS3</Version>
+      <Type>ThemeResources</Type>
+      <Priority>2</Priority>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)AcrylicBrush_19h1_themeresources.xaml">
       <Version>19H1</Version>
       <Type>ThemeResources</Type>