.NET Core 正式対応版 MahApps.Metro Ver. 2【exhibition #1 WPF UI Gallery】

WPF UI Gallery で紹介中の MahApps.Metro から .NET Core 対応版となる Ver.2.0.0 が正式リリースされました。
そこで .NET Core 対応版が既にリリース済みの Material Design In XAML Toolkit と MahApps.Metro を統合して使用する場合のインストール手順と設定を紹介します。

この連載は Visual Studio 2019 Community Edition で .NET Core 3.1 以上 と C# + Prism 7.2 以降 + MahApps.Metro + Material Design In XAML Toolkit を使用して 、WPF アプリケーションを MVVM パターンで作成するのが目的で、C# での基本的なコーディング知識を持っている人が対象です。

MahApps.Metro Ver.2.0.0 リリース

2019/9/23 の .NET Core 3.0 リリースから約 8 か月、α 版を継続リリースしていた MahApps.Metro の .NET Core 対応版となる Ver.2.0.0 が 2020/5/24 にようやく正式リリースされました。以前の正式版(Ver.1.6.5)からほぼ丸 2 年ぶりのリリースは .NET Core 対応だけでなく 298 件の Issue にも対応した大規模リリースです。
※ 2020/6/16 現在は Ver.2.0.1 が最新。

Material Design In XAML Toolkit MahApps.Metro Ver.2.0 対応版リリース

一方、Material Design In XAML Toolkit の .NET Core 対応版は 2019/12 にリリース済みなので、MahApps.Metro Ver.2.0.0 のリリース待っている状態でしたが、正式リリースに合わせて対応版となる Ver.3.1.3 が 2020/5/25 にリリースされました。

この Ver.3.1.3 は MahApps.Metro と Material Design In XAML Toolkit を統合するための MaterialDesignThemes.MahApps を MahApps.Metro Ver.2 に合わせるのが目的なので、Material Design In XAML Toolkit 本体は Ver.3.1.2 と全く同じだそうです。
このリリースで MahApps.Metro と Material Design In XAML Toolkit の .NET Core 対応については全て完了したと言えるでしょう。

ブログ記事なので細かいバージョンやリリース日まで書きましたが、あまり気にせず基本は最新版をインストールすれば OK です。

.NET Core に対応した MahApps.Metro と Material Design In XAML Toolkit のインストール

MahApps.Metro、Material Design In XAML Toolkit 共に .NET Core 対応に加えていくつかの破壊的変更も行われました。そのため、WPF Prism episode: 19 で紹介した設定から大幅に変わった部分も多いので、このエントリを書くことにしました。

但し現時点(2020/6 現在)では統合して使用する場合の設定内容が公式には公開されていないので、管理人が色々試してみてやっと MahApps.Metro Ver.1.6.5 + Material Design In XAML Toolkit Ver.2.x の頃(.NET Framewok 版)の見た目に近づける設定にできたと思います。

一応、どちらのリポジトリも日々ウォッチしているので間違いに気が付いたり、新しい情報が分かった場合はこのエントリを随時更新するつもりです。

適用するプロジェクトを用意する

まず、MahApps.Metro、Material Design In XAML Toolkit を適用するためのプロジェクトを用意します。
このエントリでは Prism の Blank App(.NET Core)テンプレートから作成したプロジェクトを使用しますが、WPF App(.NET Core)テンプレートから作成した場合でも、既に作成済みのプロジェクトに適用する場合でも設定内容や手順は同じです。

fig.1 新しいプロジェクトの作成ダイアログ

尚、以降紹介する全パッケージの実行には .NET Core 3.1 以上が必要なので未インストールの場合は、先に SDK のインストールを済ましておいてください。

MaterialDesignThemes.MahApps のインストール

まず最初に MahApps.Metro と Material Design In XAML Toolkit を統合するための MaterialDesignThemes.MahApps を Nuget からインストールします。

fig.2 MaterialDesignThemes.MahApps のインストール

fig. 2 のように【ソリューションの Nuget パッケージの管理 View】で『material』を検索すると見つかるので、【MaterialDesignThemes.MahApps】をプロジェクトへインストールします。



MahApps.Metro の更新

MaterialDesignThemes.MahApps からインストールされる MahApps.Metro と Material Design In XAML Toolkit は最新版ではないので、まずは fig. 3 のように MahApps.Metro を手動で最新バージョンに更新します。

fig. 3 MahApps.Metro と MahApps.Metro.IconPacks のインストール

fig. 3 のように【ソリューションの Nuget パッケージの管理 View】で『mah』を検索すると見つかるので、プロジェクトへインストールします。

MahApps.Metro と Material Design In XAML Toolkit で画面を作成する場合は MahApps.Metro.IconPacks もあると便利なので一緒にインストールしておきます。(MahApps.Metro.IconPacks は必須ではありません)

Material Design In XAML Toolkit の更新

最後に Material Design In XAML Toolkit も最新版に更新します。

fig.4 Material Design In XAML Toolkit のインストール

fig. 4 のように【ソリューションの Nuget パッケージの管理 View】で『material』を検索すると見つかるので、プロジェクトへインストールします。

併せて Material Design In XAML Toolkitには MaterialDesignColors も必要なのでインストールします。

fig.5 MaterialDesignColors のインストール

fig. 5 のように【ソリューションの Nuget パッケージの管理 View】で『material』を検索すると見つかるので、プロジェクトへインストールします。

以上、5 つのパッケージをインストールしたら準備完了ですが、MahApps.Metro、Material Design In XAML Toolkit、MahApps.Metro.IconPacks の 3 パッケージはそれぞれの GitHub Release ページからデモアプリもダウンロードしておく事をお勧めします。

又、Prism Module のように DLL へ UI 部品を置いているような場合は、DLL のプロジェクトにも同じ手順で 5 パッケージのインストールが必要です。

続いて MetroWindow を設定します。

Window の継承元を MetroWindow に変更

Window を MetroWindow として表示したい場合はプロジェクトに含まれる全 Window に以下の対応を行う必要があります。始めに Window を通常のデザイナで開いて src. 1 のように変更します。

src. 1 の 6 行目のように xmlns を追加してから、元の 3 行目を 1 行目に変更します。1 行目を変更すると 13 行目は自動的に変わります。

続いて、*.xaml だけでなく *.xaml.cs にも変更が必要なので Window のコードビハインドを開いて、src. 2 の 8行目の継承元を MetroWindow に変更します。

以上の 2 か所を変更すると MetroWindow が表示されるようになります。

ここまでは WPF Prism episode: 19 で紹介した内容と同じですが、次に紹介する App.xaml に追加する内容はかなり変わっているので気を付けてください。

App.xaml に Resource を追加する

最後の手順は App.xaml の設定です。MahApps.Metro と Material Design In XAML Toolkit を使用するためにテーマカラーや Resource Dictionary を App.xaml に追加するのは WPF Prism episode: 19 の頃と同じですが、MahApps.Metro Ver.2.x と Material Design In XAML Toolkit Ver.3.x 以降からテーマの取り扱いが変更されたので今までの方法から大きく変わりました。

にもかかわらず、現時点(2020/6 現在)では設定情報は公式に公開されていません。そのため小間切れに公開されている情報を組み合わせて何とかする以外に方法が無いと言う状況だと思います。とりあえず現時点(2020/6 現在)で管理人が確認している 3 つの公開場所を紹介します。



Material Design In XAML Toolkit の Wiki

MahApps.Metro と Material Design In XAML Toolkit を統合するための情報は Material Design In XAML Toolkit 側で開示するようになっているようで、前バージョンまでは App.xaml に設定する内容はここに書かれている内容をそのままコピペすれば OK だったのが Material Design In XAML Toolkit の Wiki です。

但し、現時点(2020/6 現在)ではまだ未整理のようなので最も使ってはいけない情報だと思います。加えて、Material Design In XAML Toolkit の Wiki にはトラップがあって欲しい情報になかなか辿り着けません。
前バージョンまでは Material Design In XAML Toolkit の Wiki ページ右側の目次の 1 番下にある fig. 6 の赤枠で囲んでいる【MahApps Integration】から飛べましたが、現時点(2020/6 現在)でも前バージョンから変更されていません。

fig.6 MahApps Integration へのリンク

実は MahApps.Metro Ver.2.x + Material Design In XAML Toolkit Ver.3.x の Integration ページは隠れた場所に用意されていて、fig. 7 のように辿れば新バージョンの Integration ページへ行くことができます。

fig.7 新しい MahApps Integration ページへのリンク

とりあえず現時点(2020/6 現在)ではこの【MahApps.Metro integration】に書かれている内容は旧バージョンとほとんど同じなので使えない(そのままコピペすると実行時エラーで落ちます)のは間違いありませんが、その内整理された情報が書かれるはずなのでウォッチしていても損は無いと思います。

Material Design In XAML Toolkit のサンプルコード

現時点(2020/6 現在)では 1 番正解に近そうと管理人個人的には思っているのが Material Design In XAML Toolkit のサンプルコードで、2 か所あります。

MaterialDesignInXaml.Examples

1 つ目は Material Design In XAML Toolkit のメンテナーである Keboo さんが管理されている MaterialDesignInXaml.Examples リポジトリです。

このリポジトリは Gitter 等の質問回答用のサンプル置き場として使用されているらしく、小さなサンプルが大量にコミットされています。その中にある MahApps.Metro Ver.2.x との Integration サンプル 内の App.xaml が参考になりそうでした。

Material Design In XAML Toolkit リポジトリのサンプル

そして最も参考にできそうなのが Material Design In XAML Toolkit 本体のソリューションに含まれている【MahMaterialDragablzMashUp】です。

上記サンプルに含まれる App.xaml を参考に MahApps.Metro Ver.2.x + Material Design In XAML Toolkit Ver.3.x で使用できる App.xaml を構築しました。

MahApps.Metro Ver.2.x + Material Design In XAML Toolkit Ver.3.x Integration App.xam

まずは MahMaterialDragablzMashUp サンプルから最低限必要な設定を抜き出したのが src. 3 の App.xaml です。

但し、MahMaterialDragablzMashUp の App.xaml をそのままコピペすると実行時例外『InvalidOperationException: Operation is not valid due to the current state of the object.』が飛んで来て『System.Windows.Markup.XamlParseException: ”プロパティ ‘MaterialDesignThemes.Wpf.BundledTheme.SecondaryColor’ の Set で例外がスローされました。’ 』と怒られるので 14行目は変更しています。(元:BaseTheme=”Inherit” 正:BaseTheme=”Light”

src. 3 の App.xaml を実行すると fig. 8 のような MetroWindow が表示されます。

fig.8 App.xaml サンプル 1

パッと見は問題なさそうに思えますが、右下のボタンに設定している『MaterialDesignFloatingActionAccentButton Style』が前バージョンとは違っています。テーマカラーは 14行目の【MahAppsBundledTheme】に指定しているだけなので、これの【SecondaryColor】を【Lime】に変更して実行すると fig. 9 が表示されます。

fig.9 App.xaml サンプル 2

右下のボタンは Material Design In XAML Toolkit のアクセントカラーが反映されるようになりましたが、Window の枠までアクセントカラーになってしまっています。まあ、MetroWindow.GlowBrush で枠線の色は変更できますが、どこまで影響が出るのか分からないので別の方法を考えました。

MahApps.Metro の SecondaryColor は MahMaterialDragablzMashUp サンプルのまま【Purple】になって欲しいけど、Material Design In XAML Toolkit のアクセントカラーも使いたいので App.xaml を src. 4 のように変更してみました。

追加した 15 行目の BundledTheme は Material Design In XAML Toolkit Ver.3.x から導入された新しい Theme 用の設定クラスです。14 行目の MahAppsBundledTheme は MaterialDesignThemes.MahApps パッケージに含まれるクラスです。BundledTheme と MahAppsBundledTheme が上手い事共存してくれれば想像通りの見た目で表示されそうなので、祈りつつ実行してみると fig. 10 の Window が表示されました。

fig.10 App.xaml サンプル 3

大体想像通りと言える画面が表示されたので、やはり App.xaml は下に書いた内容が上書きされる後勝ち方式かも… と勝手に納得しました。

ただ… fig. 11 の旧バージョンで作成した画面と比べるとタイトルバーの色が濃すぎる気はしますが、現時点では設定方法が不明なので、現時点ではこれで良しとします。

fig.11 旧バージョンで作成した画面

最後の仕上げとして、MetroWindow の GlowBrush を設定して光る枠線にします。



MahApps.Metro のブラシ定数

MetroWindow.GlowBrush は WPF UI Gallery case: 1-2 で紹介した通りに設定するだけですが、設定しようとするとブラシ定数の候補が fig. 12 で表示されているだけしか表示されません。

fig.12 ブラシの一覧

MahApps.Metro Ver.2.0.0 での破壊的変更には『ブラシ名称の整理』もあり、選択可能なブラシ名がかなり増えている にもかかわらず、fig. 12 のブラシしか選択できません。

上のリンクからブラシ名をコピペで貼り付けても実行時エラーになるので、いくつか試してみると MahApps.Metro のテーマカラーを指定するための ResourceDictionary を App.xaml に追加すると fig. 13 のように MahApps.Metro Ver.2.0.0 から追加されたブラシ名が表示されるようになり、ブラシを選択しても実行時エラーになりません。

fig.13 MahApps.Metro Ver.2.0.0 のブラシが選択可能

まあ、管理人が実際に GlowBrush に設定するつもりだったのは Material Design In XAML Toolkit の【PrimaryHueMidBrush】なので、この時点で MahApps.Metro Ver.2.0.0 のブラシが選択できる必要はありませんが、できるに越したことは無いと思います。

次項で MahApps.Metro Ver.2.0.0 のブラシも表示できるようにした App.xaml 全文を紹介します。

現時点(2020/7/6 現在)で動作可能な App.xaml

MahApps.Metro Ver.2.x + Material Design In XAML Toolkit Ver.3.x で動作する、管理人が確認できている App.xaml の全文が src. 5 です。(2020/7/6 更新)

結局、MahApps.Metro、Material Design In XAML Toolkit、MaterialDesignThemes.MahApps の 3 パッケージ全てにテーマを設定すると言う不格好な App.xaml になりましたが、前バージョンと同じ見た目を維持したいならここまで設定する必要があると思います。

以降では、設定した内容について管理人が理解できている限りの内容を紹介します。

12 行目の ResourceDictionary

MahApps.Metro の Wiki – Quick Start で紹介されている MahApps.Metro Ver.2.x 以降でテーマを指定するための ResourceDictionary です。見て分かる通りベースカラーは『Light』、プライマリカラーに『Purple』を指定しています。

この ResourceDictionary を追加すると『ベースカラー:Light、プライマリカラー:Purple』から生成されるコントロール用のブラシもリソースとして利用できるようになります。

ただ、コントロールの Style は Material Design In XAML Toolkit の Style しか使わない!と言う場合は追加する必要は無いと思います。追加すると使用メモリが 6 MB 程増えるようですし…

15 行目の MahAppsBundledTheme

この MahAppsBundledTheme に指定した PrimaryColor と SecondaryColor は MetroWindow 等に反映されるようです。

この MahAppsBundledTheme を 12 行目の ResourceDictionary より上の行に書いてしまうと下に書いた設定で上書かれてしまうので記述位置に注意する必要があります。

16 行目の BundledTheme

Material Design In XAML Toolkit のコントロール Style に適用されるテーマカラーです。

この BundledTheme も MahAppsBundledTheme と同じで、1 番下の行に記述しないと他のテーマカラーで上書きされてしまうようなので注意してください。

App.xaml の設定についてのまとめ

上で紹介した通り、前バージョンに近い配色にはとりあえずできるようですが、正しい方法なのか、たまたま存在する抜け道なのかも分かりません。バージョンアップ等のタイミングで突然カラーが変わってしまう可能性も十分考えられるので一応覚悟はしておいてください。

最後に当然の注意点として BundledTheme の SecondaryColor 以外は基本同じ色か同系色を設定する必要があります。特に 12 行目の ResourceDictionary ではプライマリカラーに指定できるカラーが決まっているので注意してください。

Prism Module への適用(2020/8/20 追記)

このサイトで紹介しているサンプルは MVVM フレームワークの Prism を使用したものがほとんどです。ここまでは Shell と呼ばれる実行可能プロジェクトに対してのインストールや設定を紹介して来ましたが、Prism には Module と呼ばれるクラスライブラリプロジェクトに置いた UserControl を Window へ動的に表示する機能を持ち、.NET Core WPF Prism MVVM 入門 2020 step: 4 で紹介した通り、入力項目のようなユーザが実際に操作するコントロールは Module の部分 View に配置します。

そのため、Material Design In XAML Toolkit 等のコントロールは Module にも配置する事がほとんどです。そして Module は途中で追加する事も多いので、新規で追加した Prism の Module へ MahApps.Metro と Material Design In XAML Toolkit をインストールする手順も紹介します。

まず、実行可能プロジェクトと同じく fig. 14 のように【ソリューションの Nuget パッケージの管理】を開いて【インストール済み タブ】から新規に追加した Module へインストールします。

fig.14 ソリューションの Nuget パッケージの管理 – インストール済みタブ

fig. 14 のように新規追加した Module に対して以下の 4 パッケージをインストールします。

  • MaterialDesignThemes.MahApps
  • MaterialDesignThemes
  • MaterialDesignColors
  • MahApps.Metro

参照タブからインストールしても構いませんが、都度検索する必要も無いので【インストール済み タブ】からインストールする方が楽だと思います。インストールが完了すると Module 側の準備は完了です。

後は、Shell(スタートアッププロジェクト)に Module の参照を追加して一度ビルドかリビルドを通しておけば Module へ MahApps.Metro や Material Design In XAML Toolkit のコントロールが配置できるようになります。別途 ResourceDictionary.xaml 等を追加する必要はありません

場合によっては MahApps.Metro や Material Design In XAML Toolkit の【Style】等を指定した後に『リソースが見つかりません』的なコンパイルエラーが発生する事もありましたが、何度か実行したり、ソリューションを開きなおしたり、Visual Studio を再起動したり… 等とりあえずしばらくすればコンパイルエラーが消えるので、それまで待つしかないと思います。管理人も確実な解決方法は知りません。

重要なのは【特に何もしない】事です。何か設定等を変更して解消した事はありません。何か分かれば追記しますが、IntelliSence の候補も表示されますし、実行しても問題なく設定した Style のコントロールが表示されるので、とりあえずしばらく待ってみてください。

Prism の Module で MahApps.Metro や Material Design In XAML Toolkit を使用する場合の準備は以上です。

まとめ的なひとこと

MahApps.Metro と Material Design In XAML Toolkit の .NET Core 対応はようやく始まったばかりなので完全統合とはいかず、少し歪な感じの統合ですが今後はテーマの指定方法も集約していく方向に進んでいくと思うので、とりあえずは経過を見守ろうかと思っています。

今回紹介したサンプルもいつも通り GitHub リポジトリ に上げておきます。

 

 

おすすめ

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。