プログラムを中心とした個人的なメモ用のブログです。 タイトルは迷走中。
内容の保証はできませんのであしからずご了承ください。

2017/02/13

MahApps.Metro のインストールと基本設定

update2017/10/16 event_note2017/02/13 1:41

WPF アプリケーションにおいて、見た目を簡単にモダンなデザインにできる MahApps.Metro というライブラリがあるので、その導入方法です。

インストール方法

MahApps.Metro は NuGet でインストールできます。
GUI でも出来ますが、パッケージ マネージャー コンソールのほうが楽なので、そちらでインストールしました。
「パッケージ マネージャー コンソール」は以下から開くことができます。

[ツール] > [NuGet パッケージ マネージャー] > [パッケージ マネージャー コンソール]

MahApps.Metro をインストールするには以下のコマンドを入力します。

PM> Install-Package MahApps.Metro

インストールが成功すると「QuickStart」の画面が表示されます。

基本設定

メインウィンドウの Xaml を修正

MainWindow.xaml を開いて、Window タグに以下を追加します。

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

続いて、<Window<Controls:MetroWindow に変更します。

変更前

<Window x:Class="WpfApplicationTest.MainWindow"

変更後

<Controls:MetroWindow x:Class="WpfApplicationTest.MainWindow"

メインウィンドウのコードビハインドを修正

MainWindow.xaml.cs を開いて、基底クラスを Window から MetroWindow に変更します。

変更前

public partial class MainWindow : Window

変更後

using MahApps.Metro.Controls;

public partial class MainWindow : MetroWindow

以上で基本的な設定は完了です。

組込みスタイルの適用

App.xaml の修正

App.xaml を開き、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>

blue.xamlBaseLight.xaml を変更することでデザインを変えることができます。

参考URL