Try to make a WPF application Modern UI using WPF MahApps.Metro (Ver2.00 or later)

1 minute read

If you include MahApps.Metro in your WPF application, it will have a modern UI for the time being.
It’s easy to enter, so it’s convenient to make an app that looks a little different.
(Tested at VitualStudio2017)

procedure

  1. Insert MahApps.Metro
  2. Modify App.xaml
  3. Fix XAML in main window
  4. Fixed code-behind file in main window

1. Insert MahApps.Metro

  1. Right-click on Project Explorer → References and open NuGet Package Management.
  2. Enter “Mah Apps” in the online search at the top right of the window and it will appear. Let’s install it.
  3. This time I put in ** version 2.0.0.0 **.
  • If you are not sure about NuGet, go to “Visual Studio NuGet” and it will come out. It is a convenient one that downloads and installs the module you want to use.

2. Modify App.xaml

–Add a resource directionary.

xaml(Before addition)


<Application x:Class="WpfApplicationTest.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application>

xaml(After addition)


<Application x:Class="WpfApplicationTest.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>
                <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/Themes/Light.Blue.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

3. Fix XAML in main window

――Change in two places.

  1. Add namespace
    Add MahApps.Metro to the Window.

xaml


 xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
  1. Change Window class
    ** Window ** → ** Controls: MetroWindow **.

xaml(Change before)


<Window x:Class="WpfApplicationTest.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="MainWindow" Height="350" Width="525">

xaml(After change)


<Controls:MetroWindow x:Class="WpfApplicationTest.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="MainWindow" Height="350" Width="525">

4. Fixed code-behind file in main window

–Since I changed the class with xaml, I also match the class on the code side.

cpp(Change before)


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

After change

cpp(After change)


    public partial class MainWindow : MahApps.Metro.Controls.MetroWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

Yes, it’s modern. I think it’s a blue window.

Bonus: When you want to change the color

App.xaml


<Application x:Class="WpfApplicationTest.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>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
Here →<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

If you change the “here” line, the color will change.

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/base.color.xaml" />
base

-“Light”: White
-“Dark”: Black

color

Red, Green, Blue, Purple, Orange, Lime, Emerald, Teal, Cyan, Cobalt, Indigo, Violet, Pink, Magenta, Crimson, Amber, Yellow, Brown, Olive, Steel, Mauve, Taupe, Sienna

<Example>If you want a black base and red


<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Dark.Red.xaml" />

You May Also Enjoy