WPF 「MahApps.Metro」を使ってWPFアプリケーションをModernUIにしてみる(Ver2.00以降)

今作っているWPFアプリケーションにMahApps.Metroを入れるとひとまずモダンなUIになります。
さくっと入るので見た目ちょっと違ったアプリ作るのに便利です。
（VitualStudio2017でテストしました）

手順

1. MahApps.Metroを入れる
2. App.xamlを修正
3. メインウィンドウのXAMLを修正
4. メインウィンドウのコードビハインドファイルを修正

1.MahApps.Metroを入れる

1. 「プロジェクトエクスプローラ」→「参照設定」を右クリックして「NuGetパッケージ管理」を開きます。
2. ウィンドウ右上のオンラインの検索に「MahApps」と入れてやると出てきます。インストールしましょう。
3. 今回入れたのはバージョン2.0.0.0です。

※NuGetがよくわかんない場合は「VisualStudio NuGet」あたりでググると出てきます。使いたいモジュールをダウンロード，インストールしてくれる便利なやつです。

2.App.xamlを修正

• リソースディレクショナリを追加します。

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>

    </Application.Resources>
</Application>

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

3. メインウィンドウのXAMLを修正

• 二箇所変更します。

1.ネームスペースの追加
WindowにMahApps.Metroを追加します。

xaml

 xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"

2.Windowクラスの変更
Window → Controls:MetroWindow にします。

xaml(変更前)

<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(変更後)

<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. メインウィンドウのコードビハインドファイルを修正

• xamlでクラスを変更したので、コード側のクラスも合わせます。

cpp(変更前)

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

変更後

cpp(変更後)

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

はい、モダンになりました。青色のウィンドウになったと思います。

おまけ　色を変えたいとき

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

「ココ」の行を変更すれば色が変わります。

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/ベース.色.xaml" />

ベース

• "Light" ：白
• "Dark" ：黒

色

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

黒ベースで赤にしたい場合

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