Edited at

WPF 「MahApps.Metro」を使ってWPFアプリケーションをModernUIにしてみる

More than 1 year has passed since last update.

今作っている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クラスの変更

WindowControls: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プロパティ よく使うやつメモ