To have a modern look and feel we decided to align our WPF application to Microsoft Metro style. To achieve this, we used the open source toolkit MahApps.Metro. MahApps.Metro is a toolkit for creating Metro / Modern UI styled WPF applications. The MahApps.Metro project was started back in 2011 by Paul Jenkins. The source is available on GitHub (see MahApps.Metro GitHub Repository) and the wide-ranging documentation can be found here.

Getting Started

To get started we just followed the Quick Start. After installing MahApps.Metro 1.5.0 from NuGet we modified the XAML file and the code behind file of the MainWindow accordingly.

MainWindow.xaml

<controls:MetroWindow x:Class="biz.dfch.CS.ArbitraryWpfApplication.UI.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        xmlns:p="clr-namespace:biz.dfch.CS.ArbitraryWpfApplication.UI.Properties"
        mc:Ignorable="d"

        Title="{x:Static p:Resources.Window_MainWindow_Title}"
        WindowState="Maximized" >

    <controls:MetroWindow.RightWindowCommands>
        <controls:WindowCommands>
            <Button Name="ButtonAbout" Content="{x:Static p:Resources.Window_MainWindow_Button__About}" Click="OnButtonAboutClick" />
        </controls:WindowCommands>
    </controls:MetroWindow.RightWindowCommands>

    <DockPanel>
        <Frame x:Name="PageFrame" Source="Pages/Home.xaml" NavigationUIVisibility="Hidden" HorizontalAlignment="Stretch" />
    </DockPanel>

</controls:MetroWindow>

MainWindow.xaml.cs

/**
 * Copyright 2017 d-fens GmbH
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

using System.Windows;
using MahApps.Metro.Controls;
using MahApps.Metro.Controls.Dialogs;

namespace biz.dfch.CS.ArbitraryWpfApplication.UI
{
    public partial class MainWindow : MetroWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void OnButtonAboutClick(object sender, RoutedEventArgs e)
        {
            var aboutText = string.Format(Properties.Resources.Dialog_About__Message, typeof(MainWindow).Assembly.GetName().Version);
            this.ShowMessageAsync(Properties.Resources.Dialog_About__Title, aboutText);
        }
    }
}

Last but not least we added the necessary resource dictionaries to the App.xaml as follows.

App.xaml

<Application x:Class="biz.dfch.CS.ArbitraryWpfApplication.UI.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>
                <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
                <!-- Accent and AppTheme setting -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
                <ResourceDictionary Source="/Resources/Icons.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Controls

An overview about all the MahApps.Metro controls can be found here.

Icons and Resources

MahApps.Metro does not contain any icons or “resources” other than control styles. However there is a package called MahApps.Metro.Resources available that contains icons and additional resources. As well as MahApps.Metro the source code of MahApps.Metro.Resources is also available on GitHub (see here). Although a new package exists that gets recommended to be used (MahApps.Metro.IconPacks) we used the old one in our project. The old one still works but the new one is easier to use.