XAML 101: Themes

FacebookTwitterGoogle+Share

Up until this point, we have been ignoring a piece of the XAML that is generated by default when a new Universal app is created. Consider this line:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

What’s with those curly braces and the content inside them in the Background property? First of all, the braces denote a XAML Markup Extension. There are several types of these, and we will see more in the future. This one is a ThemeResource markup extension. Markup extensions provide extra functionality when you need to do something other than specifying a value. The ThemeResource extension gives you consistency in your user interface by being able to specify predefined values for properties.

If you right click on ApplicationPageBackgroundThemeBrush and go to definition, you can see where it is defined.

image

This brings up a file called generic.xaml with this definition in it:

<SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="#FFFFFFFF" />

The x:Key property lets us reference this resource by name. This definition is inside a ResourceDictionary with an x:Key of “Light”:

<ResourceDictionary x:Key="Light">

This ResourceDictionary is inside a ThemeDictionaries property. There are two other ResourceDictionary entries here too, namely “Default”, and “HighContrast”. Default is used when the theme is set to the dark theme, and HighContrast is for when the device is in high contrast mode. The ThemeResource markup extension picks the right resource definition to use based on the key and the current theme.

NOTE: Themes were always a big reason for failures when submitting an app on Windows Phone 8.1 and earlier. Developers wouldn’t test their app in light theme (the default on Windows Phone was dark theme) and they would have text or other elements that wouldn’t be visible in light theme. Unless you forced it otherwise, on Windows Phone the theme for your app would follow what the user had selected for the system. Jeff Wilcox had a great tool for forcing the theme to a specific value http://www.jeff.wilcox.name/2012/01/phonethememanager/

In Windows 10, the developer has more control over the theme.

There are two different places where a theme is important. Once is at design time when we want to see how an app looks with a specific theme, and then when the app is run, so we can say what theme we prefer for our app. First let’s look at design time. If we have a MainPage.xaml file that has a Grid like this:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock Text="Here is some text"/>
</Grid>

In the XAML designer in Visual Studio we see this:

image

See that gear at the top? If we click on that we get this:

image

If you change Theme to Dark you can see what your page will look like if the theme is set to dark:

image

Now this setting is only for design time. At run time, the app will default to light theme unless you specify otherwise. This is done in the App.xaml file, here is what is generated by default:

<Application
    x:Class="HelloXaml.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloXaml"
    RequestedTheme="Light">

</Application>

If you change RequestedTheme to “Dark”, then your app will use the dark theme. I think it’s a good idea to make sure your design time settings and the setting in App.xaml match so that you can see what it’s really going to look like.