Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update AcrylicBrushes and add new AcrylicBrushes #3498

Merged
2 changes: 1 addition & 1 deletion dev/CommandBarFlyout/CommandBarFlyout.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -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}" />
Expand Down
5 changes: 5 additions & 0 deletions dev/Materials/Acrylic/AcrylicBrush.vcxitems
Original file line number Diff line number Diff line change
Expand Up @@ -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>
72 changes: 72 additions & 0 deletions dev/Materials/Acrylic/AcrylicBrush_19h1_themeresources.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<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">

<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>
16 changes: 14 additions & 2 deletions dev/Materials/Acrylic/AcrylicBrush_rs1_themeresources.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>

Expand Down
59 changes: 51 additions & 8 deletions dev/Materials/Acrylic/AcrylicBrush_rs2_themeresources.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>

Expand Down
12 changes: 6 additions & 6 deletions dev/NavigationView/NavigationView_rs2_themeresources.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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" />
Expand Down Expand Up @@ -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" />
Expand Down
60 changes: 60 additions & 0 deletions dev/dll/XamlControlsResources.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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())
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is there a 19H1+ condition?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TintLuminosityOpacity is only present on 19H1+ and we also have a separate themeresources file because of that. To not interfere with the RS5- brushes and save performance, we are only updating the brushes when on 19H1+. Of course, we could run it in every case as the MUXC brushes guard against it but we don't need to.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you add a comment in the 19h1 theme resource file that tint opacity is being set in code ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea, added a comment for that. Can you rerun CI @ranjeshj ?

{
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)
Expand Down
3 changes: 2 additions & 1 deletion dev/dll/XamlControlsResources.h
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down