CODEWITHSUNDEEP
c#xamluwpfluent-designacrylic-material
Muhammad Touseef
Muhammad Touseef

Reputation: 4455

UWP setting themeresource acrylic in code behind

I have a UWP app and I want to upgrade it to fluent design system. I have created a new project using Windows Template Studio and my navigation is with Pivot.

Now I want to put acrylic background on the header of the pivot. as mentioned in the design guidelines of uwp it is recommended to use 70 percent acrylic in this scenario.

So I tried to use 70 percent acrylic with following code.

private void MainPivot_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush"))
    {
        MainPivot.Background = Application.Current.Resources["SystemControlAltHighAcrylicWindowBrush"] as AcrylicBrush;
    }

}

Where MainPivot is the pivot I am using and this loaded method is loaded event for that pivot.

The problem is that it works only for either Light or Dark Theme (depends which theme was set during last run of the app), but when app is running and I change theme and switch between light or dark themes, it doesn't work well for both themes, for example if I make the theme dark the acrylic color remains white and pivot header text is also white hence creating disturbed UI.

Also the FallBack Color doesn't make sense either, for light theme fallback color is black (which blends in with black text) and same problem occurs in dark theme.

The reason I am doing it from code behind because the min project target of my app is creators update which doesn't have acrylic brush.

Upvotes: 2

Views: 2135

Answers (1)

Jayden
Jayden

Reputation: 3286

The Conditional XAML provides a way to use the ApiInformation.IsTypePresent method in XAML markup. This lets you set properties and instantiate objects in markup based on the presence of an API without needing to use code behind.

To use a conditional method in XAML, you must first declare a conditional XAML namespace at the top of your page. 

xmlns:IsAcrylicBrushPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsTypePresent(Windows.UI.Xaml.Media.AcrylicBrush)"
xmlns:IsAcrylicBrushNotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsTypeNotPresent(Windows.UI.Xaml.Media.AcrylicBrush)"

After the namespace is defined, we can use the namespace prefix to the Background property of your Grid to qualify it as a property that should be set conditionally at runtime.

<Grid Name="MainPivot" IsAcrylicBrushPresent:Background="{ThemeResource SystemControlAltHighAcrylicWindowBrush}"  IsAcrylicBrushNotPresent:Background="Red">

If the device supports AcrylicBrush, it will use the SystemControlAltHighAcrylicWindowBrush. If not, it will use the Red color.

Upvotes: 4

Related Questions