【WPF】MahApps とC#で作るmetro window 入門

「WPFでモダンなUIアプリを作りたいけど、どこから手をつければいいかわからない…」そんな時は、手始めにWindowをモダン化しましょう。

本記事では、初心者でも簡単にWPFアプリに美しいデザインを取り入れられるライブラリ「MahApps.Metro」を使ったWindowのモダン化方法を紹介します。

ステップバイステップで解説するので、一緒に魅力的なMetroスタイルのアプリを作ってみましょう！

MahApps.Metroとは？

MahApps.Metroは、WPFアプリケーションにモダンなデザインを簡単に取り入れることができるオープンソースのライブラリです。Windowsストアアプリのようなフラットデザイン、Fluent Design Systemを意識したUIを、少ないコードで実現できます。

インストール方法

「ツール」⇒「Nugetパッケージマネージャ」⇒「ソリューションのNugetパッケージの管理」を選択して上記画面を表示、MahAppsで検索し、MahApps.Metroをインストールします。

MahApps.Metro

プロジェクトへの組み込み方

MahApps.Metro でMetroなWindowを作成するには、次の３つの作業が必要です。

• App.xaml への追記
• MainWindow.xaml への追記
• MainWindow.cs の継承元クラスを変更

MainWindowの継承元クラスを Window から MetroWindow に変更します。

MahApps.Metro の使い方

公式ドキュメント

詳しい使い方は MahApps の公式サイト（https://mahapps.com/docs）　をご参照ください。
また、SourceChord さんの「MahApps.Metroを使ってみた」という記事が非常に参考になるので紹介しておきます。

テーマの指定（タイトルバー、Window背景色など）

App.xaml に追加した下記の１行を修正することで、テーマの指定（Windowの背景色、タイトルバーの色）を指定することができます。
初期状態は Light.Blue（背景色がLight、タイトルバーがBlue） が指定されていますので、必要に応じて変更してください。

背景色は次の２つの中から指定可能です。背景色を変更することで、テキストボックスやチェックボックスなどの色も適切に調整されます。

Light, Dark

背景色は次の23種類から指定可能です。指定した色に応じてテキストボックスやチェックボックスなどの色も適切に調整されます。

Red, Green, Blue, Purple, Orange, Lime, Emerald, Teal, Cyan, Cobalt, Indigo, Violet, Pink, Magenta, Crimson, Amber, Yellow, Brown, Olive, Steel, Mauve, Taupe, Sienna

サンプルソース

MahAppsには、Window（MetroWindow）以外に様々なコントロールも用意されていますが、作成中のものも多いのが現状です。
多くの場合、MetroWindowでWindow枠をモダン化し、他のライブラリ（Material Design in XAML 、Dragablzなど）でコントロールをモダン化することになると思います。

この章で紹介するサンプルソースは、Window枠のモダン化だけを実現するためのものなので、テンプレートとしてお使い下さい。

App.xaml

MainWindow.xaml

MainWindow.cs

まとめ

この記事では、WPFでモダンなUIを作成するためのライブラリ「MahApps.Metro」の基本的な使い方について解説しました。

Nuget でインストール後、App.xaml、MainWindow.xaml、MainWindow.cs の３ファイルに少し手を加えるだけで、Windowsストアアプリのようなフラットデザインを取り入れた、洗練されたWPFアプリケーションを作成することができます。

WPF標準機能で作成した画面がシンプルに感じたら、是非MahApps.Metroに調整してみてください。
この記事が、あなたのWPF開発の一助となれば幸いです。