michielpost.nl

Windows 8 application Theming

11-04-2012

This blog post is about Windows 8 / WinRT XAML apps. It's based on the Windows 8 Consumer Preview, things can still change in upcoming versions.

As a Windows Phone developer I wondered if Windows 8 had the same theming model. With a Dark or a Light theme and an accent color which the user can choose.

When you want to do full custom branding for your application, supporting both the Dark and Light theme can be a lot of work with Windows Phone. In Windows 8, you wont have this problem. The user can not choose between a dark or a light theme.

You, as a developer, can choose a Dark or a Light theme as starting point for your app. You can do this by setting RequestedTheme="Light" at the top of your App.xaml. The Dark theme is the default.
This modifies all the default system styles.

 
Dark & Light theme differences

High Contrast setting
In addition to that, there is a user setting "High Contrast" which you can support in your application. Enable this setting by going to Easy of Acces in PC Settings.

Supporting High Contrast is easy using the ThemeDictionaries.

    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
            <SolidColorBrush x:Key="MyBackgroundBrush" Color="Green"></SolidColorBrush>
        </ResourceDictionary>

        <ResourceDictionary x:Key="HighContrast">
             <SolidColorBrush x:Key="MyBackgroundBrush" Color="Black"></SolidColorBrush>
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>

In a ThemeDictionary you can define the same key multiple times, one time for each Theme. So you can use different colors when the user has the High Contrast setting enabled.

System Styles
If you want to explore all the system defined styles, you can find them in this directory:
C:\Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design

Notice that the system defined styles are also using a ThemeDictionary for differences between Default, Light and HighContrast.


Summary of the differences between Windows Phone 7 and Windows 8 theming:

Windows Phone 7
- Dark/Light Theme is a user setting
- Accent color
- Default styles which you can use as a developer

Windows 8
- Dark/Light theme is a developer setting
- No accent color
- High contrast is a user setting which your app can support
- Default styles which you can use as a developer

Comments


subrata Nath 27-02-2013
nice


New Comment

Name
E-mail (not published)
Comment
Enter the code shown: