Introduction

This sample shows how to use a premade standard WPF Theme in a project. It also shows how you can override one or two parts of the Theme, rather than having to copy the whole file to make your changes. In other words, you can define your own Button template, then use any theme you like to style it.

Building the Sample

Just download, unblock, unzip, load and run!

Description

There is a great deal of confusion around regarding Styling/Templating and Themes. This sample shows how to set up the basics and explains how to enhance/expand on an existing Theme.

There are only so many button styles and colours, before you start repeating someone else's design, and the official collection available on CodePlex (http://wpfthemes.codeplex.com/) will probably cover 90% of requirements.

It is therefore, far simpler to start with one of those ResourceDictionaries and overwrite any styles or templates that you want to change.

For example, I liked the shape and feel of "ShineyPinkBouncyTheme", but I want the base colour to be Blue, I include the main theme file, then follow up with my own ResourceDictionary that also has a style key for "NormalBrush" of Blue.

Below is an example of how App.xaml looks with a main Theme file and my own overriding theme.

XAML

Edit|Remove

<Application x:Class="ThemesExample.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/ThemesExample;component/Themes/ShinyRedTheme.xaml"/>
                <ResourceDictionary Source="/ThemesExample;component/Themes/MyTheme.xaml"/>            
          </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="ThemesExample.App" 
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             StartupUri="MainWindow.xaml"> 
    <Application.Resources> 
        <ResourceDictionary> 
            <ResourceDictionary.MergedDictionaries> 
                <ResourceDictionary Source="/ThemesExample;component/Themes/ShinyRedTheme.xaml"/> 
                <ResourceDictionary Source="/ThemesExample;component/Themes/MyTheme.xaml"/>             
          </ResourceDictionary.MergedDictionaries> 
        </ResourceDictionary> 
    </Application.Resources> 
</Application>

Order is everything in Resource Dictionaries, so because I include my new theme AFTER the main theme file in the MergedDictionaries declaration, my new style overwrites the main theme style.

My resulting page looks like this:

The first control is a standard button, who's style and template have been overridden by my own Theme.

Below is is a standard ToggleButton, showing that is still using the "base" theme style, but I have changed just one property.

If you swapped the order of these two files inside <ResourceDictionary.MergedDictionaries> you would find MyTheme.xaml has no impact, as ShineyRedTheme would overwrite my styles with it's own same named styles.

Source Code Files

MainWindow.xaml - Startup/test window
App.xaml - Where the dictionaries are merged
MyTheme.xaml - my style & template
ShineyRedTheme.xaml - Taken and renamed from WPF.Themes/ShineyRed/Theme.xaml