WPF 「MahApps.Metro」を使ってWPFアプリケーションをModernUIにしてみる(Ver1.65まで)

この記事の内容はVer1.65までです。Ver2.0からあちこち変更されています。

Ver2.0はこちら

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

手順

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

1.MahApps.Metroを入れる

1. 「プロジェクトエクスプローラ」→「参照設定」を右クリックして「NuGetパッケージ管理」を開きます。
2. ウィンドウ右上のオンラインの検索に「MahApps」と入れてやると出てきます。インストールしましょう。
3. 今回入れたのはバージョン1.1.2.0 最終更新日2015/03/01です。
4. インストールが成功すると「QuickStart」が表示されるはずです。閉じていいです。（実はQuickStartを読むと全部書いてあります）

※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/Colors.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.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/Colors.xaml" />
          ココ→ <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

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

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/この部分.xaml" />

「この部分」を以下のお好きな色に変更してください。
Red, Green, Blue, Purple, Orange, Lime, Emerald, Teal, Cyan, Cobalt, Indigo, Violet, Pink, Magenta, Crimson, Amber, Yellow, Brown, Olive, Steel, Mauve, Taupe, Sienna

あと、「ココ」の次の行、「BaseLight」を「BaseDark」にすると背景が黒になります。

WPF 「MahApps.Metro」MetroWindowプロパティ よく使うやつメモ