WPF Prism extra: 1 ~ TreeViewItem を MVVM パターンで展開する ~

← 前回記事【WPF Prism episode: 5 ~ ご注文は TreeView ですか? ~】

前回は List 系コントロールの各項目ごとに VM を作成する方法を紹介したので、本来は View で発生したイベントを Command へバインドする方法を紹介するのが本筋ですが、Prism 入門の付録的なエントリとして TreeViewItem を全展開する方法を紹介します。

尚、この記事は Visual Studio 2017 Community Edition で .NET Framework 4.7.2 以上 と C# + Prism 7.1 + ReactiveProperty を使用して 、WPF アプリケーションを MVVM パターンで作成するのが目的で、C# での基本的なコーディング知識を持っている人が対象です。

IsExpanded をバインドして TreeView を全展開

現時点でサンプルアプリを実行すると fig. 1 のように TreeViewItem が全て閉じた状態で起動しますが、全展開した状態で起動する方法を紹介します。

fig.1 TreeViewItem が全て閉じた状態で起動する MainWindow

Windows Form であれば TreeView の ExpandAll メソッドを呼ぶだけで目的は達成できますが、MVVM パターンで作成する場合はコントロールのメソッドを直接呼ばないので TreeViewItem.IsExpanded プロパティをバインドすることで実現します

TreeViewItem のプロパティをバインド

TreeView 自体のプロパティをバインドする方法は今まで紹介してきた通りですが、子項目のプロパティをバインドするためには src. 1 のように Style として定義する必要があります。

子項目のプロパティをバインドするために Style を定義すると言うのは何となく違和感がありますが、『クラス型のコントロールプロパティとバインドするには Style を定義する』と解釈すれば良いと思います。
又、Style の定義を Resources タグで囲むのは以下のように XAML での決まりのようです。

スタイルを宣言する最も一般的な方法は、前の例で示したように XAML ファイルの Resources セクションのリソースとしてです。
スタイルとリソース - スタイルの基本 - スタイルとテンプレート【Microsoft Docs】

XAML の Resources セクションについて検索すると「外観を共通化するために Resources へブラシを定義する」等の例が多く見つかると思いますが、上に書いた通りクラス型のコントロールプロパティをバインドする場合にも使用します

VM 側にも src. 2 のハイライト箇所を追加します。

ReactivePropertySlim で宣言したバインド先の IsExpanded は View 側の値を受け取る必要もあるため、読み書き可能なプロパティとして定義して、XAML 側にも src. 1 のように『Mode=”TwoWay”』を追加します。
そして、コンストラクタで IsExpanded の初期値を true に設定するだけで、fig. 2 のように TreeViewItem が全展開された状態で起動するようになります。(展開状態を個々に設定したい場合は、VM 側で IsExpanded に値を設定します)

fig.2 TreeViewItem を全展開した MainWindow

このように extra シリーズは Prism 入門のオマケ的な情報を紹介するエントリになる予定です。
次回の本筋 episode は、最初に書いた通り View のイベントを Command へバインドする方法を紹介する予定です。

ここで紹介したソースコードも他の Prism 入門の episode と同じく GitHub リポジトリ に上げていますが、このエントリの内容は元々 episode: 6 の一部だったため episode: 6 のソリューション に含まれています。

 

【WPF Prism episode: 6 ~ されどイベントは ViewModel と踊る ~】次回記事 →

 

あわせて読みたい

コメントを残す

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

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

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