コントロールのスタイルが突然消えた!?【exhibition #3 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 5.0 以上と C# + Prism 8.0 以降 + MahApps.Metro + Material Design In XAML Toolkit を使用して、WPF アプリケーションを MVVM パターンで作成するのが目的で、C# での基本的なコーディング知識.

上記エントリの通りにインストールを進めると MahApps.Metro も同時にインストールされます。

スタイルが消えるとは

Material Design In XAML Toolkit や MahApps.Metro 等を利用して画面を作成している場合や、独自にデザインしたコントロールを使用する場合等に、設定していたスタイルが突然消える（クリアされる）事があります。

ここでは ListBox を例に紹介しますが、ListBox のようなリスト系コントロールだけで起こる現象ではなく、どのコントロールでも起こる可能性はあります。管理人の経験上、リスト系コントロールでは起こる可能性が高いと思っています。

スタイルが消えた ListBox のサンプル

fig. 1 は Material Design In XAML Toolkit 標準の ListBox です。

fig.1 Material Design In XAML Toolkit 標準の ListBox

Material Design In XAML Toolkit の ListBox は外枠線無しのデザインなので、目立たせるために GroupBox の中に配置していますが、Material Design In XAML Toolkit インストール後に Window や UserControl へ ListBox を配置すると ListBoxItem 上のマウスホバーやクリック時には fig. 1 のようなエフェクトが追加されます。

続いて fig. 2 は Material Design In XAML Toolkit のエフェクトが削除（クリア）された ListBox のサンプルです。

fig.2 スタイルが消えた ListBox

fig. 1、2 は同一の XAML ですが、fig. 1 にある設定を追加すると fig. 2 のようなエフェクトに変わります。どこが変わったのか少し分かりにくいかもしれませんが、具体的には以下の個所が変わっています。

ListBoxItem のマウスホバー時の項目選択色がグレー ⇒ ブルーに
ListBoxItem を選択した際に描画される Material Design In XAML Toolkit のリップルエフェクトが無くなっている

ListBox の場合はあまり大きく変わっていないので fig. 2 でも良いんじゃない？と思う人も居るかもしれませんが、ここではスタイルの良し悪しではなく、元に戻したいと思った時にどうやって戻すかを紹介するエントリです。

戻す方法が分かった上で、fig. 2 の方が好みだと言うならそれで構わないと思います。

リスト系コントロールとは

ここまでは特に説明していませんが、リスト系コントロールとは、このサイトで連載中（2021/3 現在）の『.NET 5 WPF MVVM 入門 2020 step: 9』でも紹介した通り、ItemsControl を継承した以下のようなコントロールを指します。

:: halation ghost :: ReactiveCollection 世代の ListBox 達【step: 9 .NET 5 WPF MVVM ReactiveCollect. 🕒️2021年3月25日今回はリスト系コントロール（中でも ListBox）を ReactiveCollection と MVVM パターンでバインドしてデータを一覧形式で表示する方法を紹介します。

ListBox
ComboBox
TreeView
ListView
DataGrid

このエントリでは ListBox を例に紹介しますが、他のコントロールでも以降で紹介する設定を追加すれば同じ状況が発生します。

スタイルが消える原因の Style – Setter

fig. 1 ⇒ 2 のようにスタイルが消える（クリアされる）原因は『.NET 5 WPF ReactiveCollection MVVM 入門 2020 step: 9』でも紹介した src. 1 の Style – Setter が原因です。

src.1: ReactiveSample2.xaml

src. 1 は複数項目選択可能な ListBox で選択項目を取得するために ListBoxItem 用の ViewModel と ListBoxItem.IsSelected をバインドするための設定ですが、src. 1 の 12 ～ 17 行目を追加すると Style が消える…と言うより Style 要素内の TargetType に指定した型の標準スタイルに上書きされます。通常、Style 要素内には変更が必要なプロパティしか指定しないので、未指定のプロパティは Style.TargetType に指定したクラスのスタイルで上書きされます。そのため Style – Setter を指定した～Item は fig. 2 のように標準のスタイルに戻ってしまいます。

Style の上書きを防ぐための BasedOn

ListBoxItem.IsSelected に代表される～Item のプロパティをバインドするための記述は .NET 5 WPF ReactiveCollection MVVM 入門 2020 step: 9 でも紹介した通り、WPF アプリを MVVM パターンで作成する場合は重要な手法ですし、使う機会も多いので当然回避手段も用意されています。

Style – Setter を指定しても元のスタイルを維持する場合は src. 2 のように Style へ BasedOn 属性を追加します。

src.2: ReactiveSample2.xaml

src. 2 のように BasedOn を指定すると Setter を指定しないプロパティやスタイルは全て BasedOn で指定したリソースから読み込まれるようになります。ここでは Material Design In XAML Toolkit のスタイルにしたいので、定義済みの MaterialDesignListBoxItem を指定します。

ListBox 以外のコントロールの場合は BasedOn に何を指定してするの？と言う方も居るかもしれませんが、Material Design In XAML Toolkit には【MaterialDesign】から始まるリソースが定義されていますし、IntelliSence で候補も表示されるのでそこまで困ることは少ないと思います。

src. 2 のように BasedOn を指定して実行すると fig. 1 の Material Design In XAML Toolkit のスタイルが戻ってきますし、Style – Setter で指定した ListBoxItem.IsSelected のバインドもちゃんと動作します。

まとめ的な

src. 2 のように BasedOn を指定するとスタイルが消える（クリアされる）問題は解決できますが、Style – Setter を指定した全てのコントロールに指定する必要があるので非常に面倒な気はしますが、これ以外の方法は無さそうです…。基本的には App.xaml で指定したスタイルを引き継いでくれれば良いのにわざわざ記述しないといけないのは互換性の問題なのか WPF の普及が鈍く、開発リソースをあまり割り当てられなかったからなのかは分かりませんが、正に『WPF のそう言うトコやぞ！』と言いたくなります。

とは言え、BasedOn を指定する以外は回避しようがなさそうなので、Material Design In XAML Toolkit やMahApps.Metro のような UI デザインフレームワークを使用する場合は【BasedOn】もセットで覚えておく必要があります。

YouseiSakusen/WpfGettingStarted2020 https://github.com/YouseiSakusen/WpfGettingStarted2020/tree/master/08_Step09

WPF 入門 2020 年度版. Contribute to YouseiSakusen/WpfGettingStarted2020 development by creating an account on GitHub.

いいね:

2021年12月1日 2021年4月22日 2021年3月25日 2020年12月24日 2020年11月6日 2020年10月10日 2020年9月20日 2020年9月13日 2020年8月29日 2020年8月20日おすすめ MahApps.Metro の HamburgerMenu から Prism の RequestNavigate で画面を切り替える【case: 1-1 WPF UI Gallery】 2020年2月29日 by 沖田玲朗 · Published 2020年2月29日 · Last modified 2020年8月6日 MetroWindow のプロパティに連動する Behavior【case: 1-2 WPF UI Gallery】 2020年4月11日 by 沖田玲朗 · Published 2020年4月11日 · Last modified 2020年8月6日 MahApps.Metro.IconPacks で SVG アイコンを表示する【exhibition #2 WPF UI Gallery】 2020年8月6日 by 沖田玲朗 · Published 2020年8月6日コメントを残すコメントをキャンセル

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

次の記事2021 年秋アニメ（10 月～ 12 月放送）一覧画像
前の記事Enum と ListBox は使いよう【step: 10 .NET 5 WPF MVVM 入門 2020】

連載

.NET Core WPF Prism MVVM 入門 2020 エントリまとめ
新作アニメ一覧画像まとめ
.NET 6 時代のデスクトップアプリ系エントリまとめ
WPF UI Gallery エントリまとめ
WPF Prism 入門エントリまとめ
WPF MVVM L@bo エントリまとめ