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

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

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

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

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

## 2.App.xamlを修正
- リソースディレクショナリを追加します。

```xml: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>
```


```xml: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を追加します。

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

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


```xml: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">
```


```xml: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:cpp(変更前)
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
```

変更後

```cpp:cpp(変更後)
    public partial class MainWindow : MahApps.Metro.Controls.MetroWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
```

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

## おまけ　色を変えたいとき

```xml: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


```xml:<例>黒ベースで赤にしたい場合
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Dark.Red.xaml" />
```