Creating a custom theme

Modern UI for WPF includes two built-in themes (dark and light). As of version 1.0.3 you can build your own custom theme. A Modern UI app typically has the following defined in the global resource dictionary App.xaml:

<ResourceDictionary>
 <ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
  <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
 </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
The /FirstFloor.ModernUI;component/Assets/ModernUI.xaml dictionary contains the Modern UI styles for the core WPF controls (Button, TextBlock, ListBox, etc). The second dictionary contains brushes and other resources defining the theme. If you want to use a custom theme, you need to replace the second dictionary with your own version.

Create a new theme

The following steps describe how to create a new theme.
1) Make sure you have installed the latest Modern UI for WPF Templates extension for Visual Studio 2012.

2) Create a new or open an existing Modern UI project

3) Add a new Assets folder to your project

4) Add a new item to the Assets folder. In the Add New Item dialog navigate to Visual C# Items > Modern UI for WPF and select Modern UI Theme. Rename the file to ModernUI.MyTheme and select Add.

5) Open App.xaml and replace the current theme with the new theme;

<ResourceDictionary>
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
    <ResourceDictionary Source="/Assets/ModernUI.MyTheme.xaml"/>
  </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
6) Compile and run the project. Your application now uses a new theme similar to the following image;

mui.newtheme.png

Customize the theme

A custom theme typically derives from the light or dark theme. By deriving from a built-in theme all required resources are automatically included. All you need to do is override those resources that you need to change. Alternatively you may choose to not override the built-in themes, but that requires you to provide a value for all theme resources.

Deriving from a built-in theme is as simple as adding a MergedDictionary reference to either the light or dark theme;

 <!-- derive from Light or Dark theme-->
<ResourceDictionary.MergedDictionaries>
 <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml" />
</ResourceDictionary.MergedDictionaries>
By adding the following brush resource to your custom theme, the Background of all buttons will be Red:

<SolidColorBrush x:Key="ButtonBackground" Color="Red" />
See the Theme resource reference for a complete overview of all resources that are required by a theme.

Last edited Aug 10, 2014 at 8:43 PM by kozw, version 8

Comments

ron123ald Feb 19, 2014 at 9:03 PM 
I used this piece of code

App.xaml :

<ResourceDictionary Source="/Assets/ModernUI.MyTheme.xaml" />

ModernUI.MyTheme.xaml :

<Rectangle x:Key="WindowBackgroundContent">
<Rectangle.Fill>
<ImageBrush Opacity=".3" ImageSource="/Resources/Image.jpg" Stretch="UniformToFill"></ImageBrush>
</Rectangle.Fill>
</Rectangle>

and finally I set the Image.jpg's property to [copy to output directory]=[copy always]

alangrutter Sep 10, 2013 at 3:02 AM 
The following worked for me

<ResourceDictionary Source="pack://application:,,,/<assemblyname>;component/Assets/ModernUI.MyTheme.xaml" />

Regards
Alan

nukec Aug 26, 2013 at 8:38 PM 
Please update this. Doesn't just work like this...