Metro Theme Customization Made Easy

Simplicity is one of the corner stones for the visual appeal of all Metro UIs. Simplicity allows the theme to be largely consistent and make development of the UI of any program a breeze. But there is a risk. The risk of many applications looking alike. Are we facing a homogenization of the next version of UIs? Will my TODO app look like  your Twitter client or another’s cloud photo service?

I have no clue.

What I do know is that we did not want you stuck with a white and blue theme. We want to give you a chance to express yourselves and brand your apps while keeping the Metro style.  Something like this:

Here is how

Developing the Metro theme we had the need of as little as 6 brushes for our controls. Exceptions are the Charts, ScheduleView etc. that use some additional colors for their chart series, time markers and categories.

AccentBrush – the highlight color (the blue in the default case)
BasicBrush - Main color for layout – borders, panels, etc; mouse over color, as well
StrongBrush - A stronger / stressed out version of the previous brush, used to emphasize on stuff
MainBrush - Mainly as background; stretching over larger area; the prevailing color in the whole theme in terms of space
MarkerBrush - Mainly for input / text
ValidationBrush – Well, the red one when things go wrong

All Telerik controls use brushes which are linked to one major singleton object that contains the colors to be used for the Metro theme. They are public so you can easily modify the colors of the theme at one single point. So the long story short:

You can change these brushes in the code behind like this:

MetroColors.PaletteInstance.MainColor = Colors.Black;
MetroColors.PaletteInstance.AccentColor = Colors.Orange;
MetroColors.PaletteInstance.BasicColor = Colors.DarkGray;
MetroColors.PaletteInstance.StrongColor = Colors.Gray;
MetroColors.PaletteInstance.MarkerColor = Colors.LightGray;
MetroColors.PaletteInstance.ValidationColor = Colors.Red;

As a general rule as long as you do not pick same colors for different brushes your design will be all right. With the PaletteInstance being a DependencyObject you should be able to even animate the colors at runtime. The same approach is used in our Executive Dashboard and Sales Manager Dashboard demos.

Thinking outside of the box

In most cases styling the controls is not enough. Often the rest of the UI also needs to change to accommodate for the color change. Therefore you can add your metro colors to your UI by adding brushes bound to our palette object over there.

<UserControl x:Class="MetroThemeColors.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
    <UserControl.Resources>
        <telerik:MetroColors x:Key="MetroColors" />
        <SolidColorBrush x:Key="AccentBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.AccentColor}" />
        <SolidColorBrush x:Key="BasicBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.BasicColor}" />
        <SolidColorBrush x:Key="StrongBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.StrongColor}" />
        <SolidColorBrush x:Key="MainBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.MainColor}" />
        <SolidColorBrush x:Key="MarkerBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.MarkerColor}" />
        <SolidColorBrush x:Key="ValidationBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.ValidationColor}" />
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="{StaticResource MainBrush}">
    </Grid>
</UserControl>