今作っているWPFアプリケーションにMahApps.Metroを入れるとひとまずモダンなUIになります。
さくっと入るので見た目ちょっと違ったアプリ作るのに便利です。
（VitualStudio2017でテストしました）
手順
- MahApps.Metroを入れる
- App.xamlを修正
- メインウィンドウのXAMLを修正
- メインウィンドウのコードビハインドファイルを修正
1.MahApps.Metroを入れる
- 「プロジェクトエクスプローラ」→「参照設定」を右クリックして「NuGetパッケージ管理」を開きます。
- ウィンドウ右上のオンラインの検索に「MahApps」と入れてやると出てきます。インストールしましょう。
- 今回入れたのはバージョン2.0.0.0です。
※NuGetがよくわかんない場合は「VisualStudio NuGet」あたりでググると出てきます。使いたいモジュールをダウンロード，インストールしてくれる便利なやつです。
2.App.xamlを修正
- リソースディレクショナリを追加します。
xaml(追加前)
<Applicationx: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(追加後)
<Applicationx: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><ResourceDictionarySource="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml"/><ResourceDictionarySource="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml"/><ResourceDictionarySource="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(変更前)
<Windowx: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:MetroWindowx: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(変更前)
publicpartialclassMainWindow:Window{publicMainWindow(){InitializeComponent();}}変更後
cpp(変更後)
publicpartialclassMainWindow:MahApps.Metro.Controls.MetroWindow{publicMainWindow(){InitializeComponent();}}はい、モダンになりました。青色のウィンドウになったと思います。
おまけ 色を変えたいとき
App.xaml
<Applicationx: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><ResourceDictionarySource="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml"/><ResourceDictionarySource="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml"/>ココ→ <ResourceDictionarySource="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
黒ベースで赤にしたい場合
<ResourceDictionarySource="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Dark.Red.xaml"/>