Creating WPF Metro style applications with MahApps.Metro

WPF gives you a lot of ways to style your Windows applications, but it might be hard to create beautiful application. I found open source project - MahApps.Metro which helps creating stylish WPF applications easily.

When I started my pet project with WPF I didn't want to create my application with default styles. As I am new to WPF and Xaml I also had lot to learn and styling of apps was not my priority, but I still wanted stylish design for my application.

For Web development there are several UI frameworks like Bootstrap or Zurb Foundation. So I thought that there should be some for WPF too and found MahApps.Metro. Here is a quick tutorial how to begin with it.

First of all install MahApps.Metro NuGet package into your WPF application project.

Install-Package MahApps.Metro

Next open MainWindow.xaml file, change Window tag to Controls:MetroWindow and add xmlns:Controls attribute with Controls namespace for MahApps.Metro window.


If you want to use resources or bind data context, now you should use Controls:MetroWindow's appropriate tag.

            <local:SomeResource x:Key="ResourceKey"/>
        <Binding Source="{StaticResource SomeResource}" Path="ThePath" />

If you are using FsXaml, then new window type should be automatically detected.

MetroWindow with FsXaml

If you run your application now it will look awful :) Last step to define style resources in App.xaml. After that application will be ready to run.

        Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
        Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
        Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
        Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
        Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />

Default styles for application are light blue. Here is my application with this style applied.

Application with light blue style

To change styles you have to change last two resources. First is for color and second for light (BaseLight.xaml) or dark (BaseDark.xaml) base. There are available quite a lot of colors: Amber, BaseDark, BaseLight, Blue, Brown, Cobalt, Crimson, Cyan, Emerald, Green, Indigo, Lime, Magenta, Mauve, Olive, Orange, Pink, Purple, Red, Sienna, Steel, Taupe, Teal, Violet, Yellow. Actual list of all colors can be found here.

Below is my application with dark steel style.

Application with dark steel style

For more information on how to start check introduction tutorial.

MahApps.Metro also has different styles for different controls and it can customize your titlebar.