MahApps.Metro.IconPacks で SVG アイコンを表示する【exhibition #2 WPF UI Gallery】
MahApps.Metro や Material Design In XAML Toolkit のようなモダン UI フレームワークで画面を作成する際に使用されることの多い SVG 形式アイコンのパッケージを多数含んだ MahApps.Metro.IconPacks を紹介します。尚、本エントリの内容は元々 WPF UI Gallery case: 1-1 の一部でしたが、サイトの記事構成の都合上、別記事に分割しました。
この連載は 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.IconPacks とは
MahApps.Metro.IconPacks は名前の通り MahApps.Metro と同じく punker76 さんがメンテナーをされている WPF と UWP にも対応した SVG アイコンパッケージセットで、.NET Framework と .NET Core の両方に対応しています。
MahApps.Metro.IconPacks はアイコンだけでなく表示用コントロールやコンバーター等も付属しているので、インストールするだけで即使用する事ができます。尚、MahApps.Metro.IconPacks の使用に MahApps.Metro や Material Design In XAML Toolkit は必要ありません。
MahApps.Metro.IconPacks のインストール
MahApps.Metro.IconPacks は fig. 1 の『ソリューションの Nuget パッケージの管理画面』で【mahapps】を検索すると見つかります。
fig.1 Nuget の MahApps.Metro.IconPacks
fig. 1 の赤枠で囲んだ【MahApps.Metro.IconPacks】をインストールすると複数のアイコンパッケージの中から好きなアイコンを使用する事ができます。
IconPacks.Browser
MahApps.Metro.IconPack を使用する場合、fig. 1 の Nuget パッケージと併せて MahApps.Metro.IconPacks の Releases ページ で配布されている IconPacks.Browser もダウンロードする事をお勧めします。
IconPacks.Browser を使うと fig. 2 のように MahApps.Metro.IconPacks に含まれるアイコンをパッケージ毎に一覧表示したりキーワードで絞り込む事もできます。
fig.2 IconPacks.Browser
【ALL タブ】を開いて【Filter by…】を入力すると全パッケージからキーワードに一致するアイコンを表示する等、アイコンを検索する時にはかなり便利なのでダウンロードしておいた方が良いと思います。尚、本エントリは fig.2 の IconPacks.Browser が起動できる前提で書いています。
MahApps.Metro.IconPacks アイコン表示コントロール
WPF Prism episode: 20 で『MahApps.Metro では Material Design In XAML Toolkit の PackIcon 程お手軽には扱えない』と書いたのは嘘でした…
実際は『MahApps.Metro で SVG 形式のアイコンを表示するには MahApps.Metro.IconPacks が必要で、Material Design In XAML Toolkit と比べて扱えるアイコンは数倍になる』でした。MahApps.Metro.IconPacks には fig. 3 のように『PackIcon』から始まる名前のアイコンを表示するためのコントロールが付属しています。
fig.3 各パッケージ用 PackIcon Control
fig. 3 の【PackIcon】の後ろは fig. 2 等でも確認できる MahApps.Metro.IconPacks に含まれる各アイコンパッケージ名になっていて、対象パッケージのアイコンのみ表示することができます。
各パッケージアイコン用の表示コントロール
例えば、PackIconFontAwesome を使用する場合、fig. 4 のように Kind プロパティの enum 候補から表示するアイコンを選択できます。
fig.4 Kind プロパティから選択
おそらく enum 値を見てもどんなアイコンなのかは分からないと思うので、予め fig. 2 の IconPacks.Browser 等でアイコン名を調べておくような手順が必要になります。
又、MahApps.Metro.IconPacks には Material Design In XAML Toolkit と同じアイコン（パッケージ名：Material）も含んでいるため、WPF Prism episode: 20 で紹介したのとは逆にアイコン表示には MahApps.Metro.IconPacks のみ使用する方が良いと思います。
PackIconControl コントロール
PackIconFontAwesome 等は各アイコンパッケージ専用の表示コントロールなので他パッケージのアイコンを指定することはできませんが、複数パッケージからアイコンを選択したい場合もあると思います。その場合は、fig. 3 赤枠内の上から 2つ目に見えている PackIconControl を使用すれば MahApps.Metro.IconPacks 内の全アイコンから選択することができます。
但し、PackIconControl は各アイコンパッケージ専用のコントロールと違い Kind プロパティを enum から選択できないため、src. 1 のようにパッケージ名とアイコン名を組み合わせたリソースキーを指定する必要があります。
1 2 3 | <iconPacks:PackIconControl Kind="{x:Static iconPacks:PackIconBoxIconsKind.LogosAirbnb}" Width="24" Height="24" /> |
enum の一覧から選択するだけと言う訳にはいきませんが、管理人の場合、fig. 5 のようにアイコンを指定しています。
fig.5 PackIconControl Kind 指定
IntelliSense にアイコンパッケージの列挙型は表示されませんが、何故か『PackIcon（パッケージ名）DataFactory』は表示されるので、それを変更して enum 値の表示に利用しています。姑息な方法ですがパッケージ名を全て入力するよりは多少楽だと思います。IntelliSense にアイコンパッケージ列挙型を表示する方法はあるかもしれませんが、管理人は fig. 5 の方法しか知りません。
宿題のようなまとめ
【まとめ】と言う程のものではありませんが、MahApps.Metro.IconPacks は各アイコンパッケージ毎に DLL が分かれているため、ビルドすると 20 個以上の DLL が実行フォルダにコピーされます。ですが、使用しているパッケージが 1 ～ 2 個の場合は不要な DLL をコピー対象から除外したいと思う事もあると思います。
セオリー的には MahApps.Metro.IconPacks と同時にリリースされる fig. 6 のような個別パッケージをインストールすべきかもしれません。
fig.6 個別パッケージの一覧
ですが、個別パッケージには前章で紹介した PackIconControl コントロールが含まれておらず、個別パッケージ用のアイコン表示コントロールしか含まれていません。画面に PackIconControl コントロールを配置していた場合は結局 MahApps.Metro.IconPacks 本体が必要になるため後から個別パッケージに変更するのは難しいと思います。
使用しない DLL を実行フォルダから削除する方法もありますが、実際試してみると特に問題なく正常に動作します… 詳しい事は分かりませんがアプリ内で使用しているパッケージの DLL を別フォルダへ移動しても正常に動作しました。
尚、試しに PackIconControl コントロールが含まれている MahApps.Metro.IconPacks.Core.dll を別フォルダへ移動しても正常に動作したので正直訳が分かりません。
使用するアイコン等のリソースは exe や DLL 内部に静的にリンクされるから DLL が不要と言う可能性も考えられますが、詳細を調べても見つかりませんでした。そのため、ユーザに配布するファイルに使用していない MahApps.Metro.IconPacks の DLL ファイルを含めるかどうかは自己責任でお願いします。
この件については積極的にではありませんが調べて何か分かった場合は又、ここにでも情報として追記したいとは思っているため、DLL の取り扱いについては宿題として本エントリを終了します。
