Skip to content

Commit fc4900a

Browse files
llongleyllongley
authored
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.
1 parent 3d2d5a8 commit fc4900a

20 files changed

Lines changed: 906 additions & 143 deletions

‎dev/CommandBarFlyout/CommandBarFlyout_themeresources.xaml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414

1515
<ResourceDictionary.ThemeDictionaries>
1616
<ResourceDictionary x:Key="Default">
17-
<StaticResource x:Key="CommandBarFlyoutBackground" ResourceKey="SystemControlTransientBackgroundBrush"/>
17+
<contract7NotPresent:StaticResource x:Key="CommandBarFlyoutBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush"/>
18+
<contract7Present:StaticResource x:Key="CommandBarFlyoutBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush"/>
1819
<StaticResource x:Key="CommandBarFlyoutForeground" ResourceKey="TextFillColorPrimaryBrush"/>
1920
<StaticResource x:Key="CommandBarFlyoutBorderBrush" ResourceKey="ControlStrokeColorDefaultBrush"/>
2021
<StaticResource x:Key="CommandBarFlyoutAppBarButtonBackground" ResourceKey="SubtleFillColorTransparentBrush"/>
@@ -45,7 +46,8 @@
4546
<StaticResource x:Key="CommandBarFlyoutButtonBackground" ResourceKey="SystemControlTransparentBrush" />
4647
</ResourceDictionary>
4748
<ResourceDictionary x:Key="Light">
48-
<StaticResource x:Key="CommandBarFlyoutBackground" ResourceKey="SystemControlTransientBackgroundBrush"/>
49+
<contract7NotPresent:StaticResource x:Key="CommandBarFlyoutBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush"/>
50+
<contract7Present:StaticResource x:Key="CommandBarFlyoutBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush"/>
4951
<StaticResource x:Key="CommandBarFlyoutForeground" ResourceKey="TextFillColorPrimaryBrush"/>
5052
<StaticResource x:Key="CommandBarFlyoutBorderBrush" ResourceKey="ControlStrokeColorDefaultBrush"/>
5153
<StaticResource x:Key="CommandBarFlyoutAppBarButtonBackground" ResourceKey="SubtleFillColorTransparentBrush"/>

‎dev/CommandBarFlyout/TestUI/CommandBarFlyoutPage.xaml‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,18 @@
1010
xmlns:contract13Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,13)"
1111
mc:Ignorable="d">
1212

13-
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
13+
<Grid>
14+
<Grid.Background>
15+
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
16+
<GradientStop Color="Red" Offset="0.000" />
17+
<GradientStop Color="Orange" Offset="0.167" />
18+
<GradientStop Color="Yellow" Offset="0.333" />
19+
<GradientStop Color="Green" Offset="0.500" />
20+
<GradientStop Color="Blue" Offset="0.667" />
21+
<GradientStop Color="Indigo" Offset="0.833" />
22+
<GradientStop Color="Violet" Offset="1.000" />
23+
</LinearGradientBrush>
24+
</Grid.Background>
1425
<Grid.RowDefinitions>
1526
<RowDefinition />
1627
<RowDefinition Height="Auto" />

‎dev/CommonStyles/CommandBar_themeresources.xaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<StaticResource x:Key="CommandBarEllipsisIconForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
2626
<contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
2727
<contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
28-
<contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
28+
<contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
2929
<contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
3030
<StaticResource x:Key="CommandBarLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
3131
<Thickness x:Key="CommandBarOverflowPresenterBorderThickness">1</Thickness>
@@ -74,7 +74,7 @@
7474
<StaticResource x:Key="CommandBarEllipsisIconForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
7575
<contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
7676
<contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
77-
<contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
77+
<contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
7878
<contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
7979
<StaticResource x:Key="CommandBarLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
8080
<Thickness x:Key="CommandBarOverflowPresenterBorderThickness">1</Thickness>

‎dev/CommonStyles/CommandBar_themeresources_v1.xaml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<StaticResource x:Key="CommandBarEllipsisIconForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
1818
<contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
1919
<contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
20-
<contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
20+
<contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
2121
<contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
2222
<StaticResource x:Key="CommandBarLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
2323
<Thickness x:Key="CommandBarOverflowPresenterBorderThickness">1</Thickness>
@@ -59,7 +59,7 @@
5959
<StaticResource x:Key="CommandBarEllipsisIconForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
6060
<contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
6161
<contract7NotPresent:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
62-
<contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
62+
<contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
6363
<contract7Present:StaticResource x:Key="CommandBarOverflowPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
6464
<StaticResource x:Key="CommandBarLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
6565
<Thickness x:Key="CommandBarOverflowPresenterBorderThickness">1</Thickness>
@@ -1724,4 +1724,4 @@
17241724
</Setter.Value>
17251725
</Setter>
17261726
</contract6Present:Style>
1727-
</ResourceDictionary>
1727+
</ResourceDictionary>

‎dev/CommonStyles/Deprecated_themeresources_any.xaml‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,16 @@
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
55
xmlns:primitives="using:Microsoft.UI.Xaml.Controls.Primitives"
6-
xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)"
7-
xmlns:local="using:Microsoft.UI.Xaml.Media">
6+
xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
7+
xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)">
88

99
<!-- 2.5 controls should not depend on brushes on this file except for new controls like Expander -->
1010
<ResourceDictionary.ThemeDictionaries>
1111
<ResourceDictionary x:Key="Default">
12-
<local:AcrylicBrush
12+
<contract7NotPresent:StaticResource
13+
x:Key="SystemControlTransientBackgroundBrush"
14+
ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
15+
<contract7Present:AcrylicBrush
1316
x:Key="SystemControlTransientBackgroundBrush"
1417
TintColor="#2C2C2C"
1518
TintOpacity="0.15"
@@ -53,7 +56,10 @@
5356
<SolidColorBrush x:Key="ControlAAStrokeColorDisabledBrush" Color="{StaticResource ControlAAStrokeColorDisabled}" />
5457
</ResourceDictionary>
5558
<ResourceDictionary x:Key="Light">
56-
<local:AcrylicBrush
59+
<contract7NotPresent:StaticResource
60+
x:Key="SystemControlTransientBackgroundBrush"
61+
ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
62+
<contract7Present:AcrylicBrush
5763
x:Key="SystemControlTransientBackgroundBrush"
5864
TintColor="#FCFCFC"
5965
TintOpacity="0.0"

‎dev/CommonStyles/FlyoutPresenter_themeresources.xaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<ResourceDictionary.ThemeDictionaries>
99
<ResourceDictionary x:Key="Default">
10-
<StaticResource x:Key="FlyoutPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
10+
<StaticResource x:Key="FlyoutPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
1111
<StaticResource x:Key="FlyoutBorderThemeBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
1212
<Thickness x:Key="FlyoutBorderThemeThickness">1</Thickness>
1313
</ResourceDictionary>
@@ -17,7 +17,7 @@
1717
<Thickness x:Key="FlyoutBorderThemeThickness">2</Thickness>
1818
</ResourceDictionary>
1919
<ResourceDictionary x:Key="Light">
20-
<StaticResource x:Key="FlyoutPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
20+
<StaticResource x:Key="FlyoutPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
2121
<StaticResource x:Key="FlyoutBorderThemeBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
2222
<Thickness x:Key="FlyoutBorderThemeThickness">1</Thickness>
2323
</ResourceDictionary>

‎dev/CommonStyles/MenuFlyout_themeresources.xaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
<StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundPointerOver" ResourceKey="TextFillColorSecondaryBrush" />
3939
<StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundPressed" ResourceKey="TextFillColorSecondaryBrush" />
4040
<StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
41-
<StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
41+
<StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
4242
<StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
4343
<Thickness x:Key="MenuFlyoutPresenterBorderThemeThickness">1</Thickness>
4444

@@ -204,7 +204,7 @@
204204
<StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundPointerOver" ResourceKey="TextFillColorSecondaryBrush" />
205205
<StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundPressed" ResourceKey="TextFillColorSecondaryBrush" />
206206
<StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
207-
<StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
207+
<StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
208208
<StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
209209
<Thickness x:Key="MenuFlyoutPresenterBorderThemeThickness">1</Thickness>
210210

‎dev/CommonStyles/MenuFlyout_themeresources_v1.xaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
<StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
5555
<Thickness x:Key="MenuFlyoutItemThemePadding">11,9,11,10</Thickness>
5656
<Thickness x:Key="MenuFlyoutItemThemePaddingNarrow">11,4,11,7</Thickness>
57-
<contract7Present:StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
57+
<contract7Present:StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
5858
<contract7NotPresent:StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
5959
<contract7Present:StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
6060
<contract7NotPresent:StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />
@@ -220,7 +220,7 @@
220220
<StaticResource x:Key="MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
221221
<Thickness x:Key="MenuFlyoutItemThemePadding">11,9,11,10</Thickness>
222222
<Thickness x:Key="MenuFlyoutItemThemePaddingNarrow">11,4,11,7</Thickness>
223-
<contract7Present:StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
223+
<contract7Present:StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
224224
<contract7NotPresent:StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
225225
<contract7Present:StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
226226
<contract7NotPresent:StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="SystemControlForegroundChromeHighBrush" />

‎dev/CommonStyles/TestUI/CommandBarPage.xaml‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,24 @@
1010
xmlns:contract6Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,6)"
1111
xmlns:contract6NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,6)"
1212
xmlns:contract5NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,5)"
13-
mc:Ignorable="d"
14-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
13+
mc:Ignorable="d">
1514

1615

1716
<Page.Resources>
1817
</Page.Resources>
1918

2019
<Grid>
20+
<Grid.Background>
21+
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
22+
<GradientStop Color="Red" Offset="0.000" />
23+
<GradientStop Color="Orange" Offset="0.167" />
24+
<GradientStop Color="Yellow" Offset="0.333" />
25+
<GradientStop Color="Green" Offset="0.500" />
26+
<GradientStop Color="Blue" Offset="0.667" />
27+
<GradientStop Color="Indigo" Offset="0.833" />
28+
<GradientStop Color="Violet" Offset="1.000" />
29+
</LinearGradientBrush>
30+
</Grid.Background>
2131
<StackPanel Orientation="Vertical">
2232

2333
<CommandBar>

‎dev/CommonStyles/TestUI/MenuFlyoutPage.xaml‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,18 @@
99
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
1010
mc:Ignorable="d">
1111

12-
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="12">
12+
<Grid Margin="12">
13+
<Grid.Background>
14+
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
15+
<GradientStop Color="Red" Offset="0.000" />
16+
<GradientStop Color="Orange" Offset="0.167" />
17+
<GradientStop Color="Yellow" Offset="0.333" />
18+
<GradientStop Color="Green" Offset="0.500" />
19+
<GradientStop Color="Blue" Offset="0.667" />
20+
<GradientStop Color="Indigo" Offset="0.833" />
21+
<GradientStop Color="Violet" Offset="1.000" />
22+
</LinearGradientBrush>
23+
</Grid.Background>
1324
<Grid.ColumnDefinitions>
1425
<ColumnDefinition Width="Auto"/>
1526
<ColumnDefinition Width="Auto"/>

0 commit comments

Comments
 (0)