UWP setting themeresource acrylic in code behind

Question

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.

score 4 · Accepted Answer · answered Oct 25 '17 at 08:12

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.

I am having an error "property background is set multiple times" — Muhammad Touseef, Oct 25 '17 at 12:14
@touseef Have you set target to Window 10 Fall Creators Update when you build? — Jayden, Oct 26 '17 at 00:58
yes I have, but now it works for me I have just set conditional background property only once for acrylic background and if that isnt present, then it automatically gives me transparent background which works fine for me — Muhammad Touseef, Nov 07 '17 at 11:06

UWP setting themeresource acrylic in code behind

1 Answers1