Windows 8.1 #XAML new theme management in your Windows Store Apps

Did you remember Windows 8 ? The theme of your app was set once at the launch and you could’nt change it dyamically or set once by control. This was really annoying in some case like Settings Flyout where you often wanted to set the opposite one of your app.

This was good old times and these issues are gone in Windows 8.1 : youpi !

Let’s digg a little more

The theme can be updated at runtime

Windows 8 theme resources are provided using StaticResource and so can’t be updated at runtime. The resources are loaded once at the app startup and even if you update it, the controls won’t update themselves because the StaticResource provide the value once and only once : when parsed.

Now comes a new markup extension named ThemeResource. You can use it like the StaticResource object but this special resource will update the targeted control if the Theme of the control is updated. You can see it as the DynamicResource in WPF but only for some “theme” resource and triggered only by a theme change.

Of course, all the template of the frameworks are now using this new feature and you are free (must ) use it in your own controls. You can actually use it anywhere in your XAML :

<Border RequestedTheme="Light" 
            Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
</Border>

The theme can now be set by control

In Windows 8 you had to set the RequestedTheme property at launch (in the constructor of you app for example) and it could be set only once.

Now this is a property of the FrameworkElement class which is the base class for any control. The value will be inherited by all its children (this is actually done because it overrides values in the resource dictionary which will be available to the children of the control).

In this sample I override the theme twice in the same visual tree :

<StackPanel RequestedTheme="Light" 
            Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
       <TextBlock Text="Hello World !" />
       <Border RequestedTheme="Dark"
               Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <TextBlock Text="Another theme" />
       </Border>
</StackPanel>

It then produce this view :

Be aware that this is a “low priority” setting and that all the styles, directly set attributes/properties, triggers, animations and even implicit styles are winning over it.

Questions ?

• Can we set it by code ? : yes of course, this is a normal property.
• Can we use binding ? : Yes !
• What are the value of RequestedTheme for the children of a control ? : The value is “Default”. This only means that the value is not overriden and not that this use the App’s theme (it’s the theme of the first overriden parent which is used).

You can read this post in french too.

You can find more by exploring the “XAML requested theme sample (Windows 8.1)” of the samples pack provided by Microsoft.

Have a nice code