31
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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クラスの変更
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プロパティ よく使うやつメモ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
31
Help us understand the problem. What are the problem?