MahApp MetroWindow project setup

MahApps.Metro is the most popular open-source UI toolkit for WPF, giving your applications a modern, flat Metro-style appearance with minimal effort. This guide walks you through the complete setup of a MahApps MetroWindow from scratch, including NuGet installation, resource dictionaries, and theming.

Step 1: Install MahApps.Metro via NuGet

Open the NuGet Package Manager in Visual Studio and install:

Install-Package MahApps.Metro

Or via the .NET CLI:

dotnet add package MahApps.Metro

Step 2: Update App.xaml — Add Resource Dictionaries

Open App.xaml and add the MahApps resource dictionaries inside Application.Resources:

<Application.Resources>
    <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                                    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                                                <!-- Choose your theme: Light.Blue, Dark.Red, etc. -->
                                                            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
                                                                    </ResourceDictionary.MergedDictionaries>
                                                                        </ResourceDictionary>
                                                                        </Application.Resources>

Step 3: Convert MainWindow to MetroWindow

Open MainWindow.xaml and replace the Window element with Controls:MetroWindow:

<Controls:MetroWindow
    x:Class="YourApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
                    Title="My Metro App"
                        Height="450" Width="800">
                        
                            <Grid>
                                    <!-- Your content here -->
                                        </Grid>
                                        
                                        </Controls:MetroWindow>

Step 4: Update the Code-Behind

In MainWindow.xaml.cs, change the base class from Window to MetroWindow:

using MahApps.Metro.Controls;

public partial class MainWindow : MetroWindow
{
    public MainWindow()
        {
                InitializeComponent();
                    }
                    }

Available Themes

MahApps.Metro supports a wide range of built-in themes combining light/dark base with an accent color. Here are some popular options:

<!-- Light themes -->
Themes/Light.Blue.xaml
Themes/Light.Red.xaml
Themes/Light.Green.xaml
Themes/Light.Purple.xaml

<!-- Dark themes -->
Themes/Dark.Blue.xaml
Themes/Dark.Red.xaml
Themes/Dark.Amber.xaml

Runtime Theme Switching

You can also switch themes programmatically at runtime:

using MahApps.Metro.Theming;
using ControlzEx.Theming;

// Switch to dark theme at runtime
ThemeManager.Current.ChangeTheme(Application.Current, "Dark.Blue");

Summary

Setting up MahApps.Metro is a three-step process: install the package, add resource dictionaries to App.xaml, and convert your Window to MetroWindow. The result is a polished, modern UI that follows Material/Metro design principles — with zero custom styling required out of the box.