WPF Prism extra: 5 ~ ReactvieProperty の変更通知を Subscribe して MVVM 的にデータを更新する ~

← 前回記事【WPF Prism episode: 17 ~ IDialogService にコモンダイアログを求めるのは間違っているだろうか ~】

前回の episode: 17 は Prism から表示するダイアログを制御する IDialogAware とコモンダイアログを表示する方法を紹介しました。今回の extra シリーズは元々 episode: 17 内の一章でしたが、文字数の関係で分割しました。

通常のアプリケーションではある値の変化に連動して他の値も更新するような動作はよくあると思います。
今回の extra シリーズは ReactvieProperty の相互バインディングと Subscribe メソッドを利用してそのような連動更新を MVVM 的に行う方法を紹介します。

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

ReactvieProperty を利用した画面項目の MVVM っぽい更新

episode: 17 でダイアログを表示するボタンは fig. 1のようなコードを入力すると名称を表示する、業務系システム等でもよく見かける UI にしました。

fig. 1 MainWindow の UI

この UI での処理は本来 episode: 14 で紹介するつもりでしたが、すっかり忘れていたので改めて紹介します。

Window Form で fig. 1 のような UI を処理する場合、TextBox の Change イベントや Leave、Validating 等のイベントをコードビハインドへ記述して処理していたと思いますが、MVVM パターンで実装する場合は VM へ処理を書くのではなく、更新処理は Model 層に書き、更新された値をバインドするのが基本的な考え方になるので、ここではプロパティを ReactvieProperty で定義したモデルと VM が双方向でバインドしている場合の方法を紹介します。

VM と Model を双方向でバインドする

src. 1 は BLEACH の登場人物情報を表すための BleachCharacter クラスで、全プロパティを ReactvieProperty で定義した MVVM パターンではエンティティ系のモデルに分類されるクラスです。

src. 1 のようにプロパティを ReactvieProperty で定義したモデルは src. 2 のように VM のプロパティと双方向でバインドすることができます。
fig. 1 のような UI でキャラクターコードからキャラクター名を表示したい場合、VM の BlearchCharacterCode プロパティで処理することはすぐに予想できると思います。

但し、Window Form での開発に慣れていた場合、VM へ処理を書いてしてしまう事も多いと思いますが、MVVM パターンでは VM 層を極力薄くするため、Model 層(BleachCharacter クラス等)で処理する設計にする事が重要だと思います。

ReactiveProperty.Subscribe で値変更時のイベントを購読する

一般的にバインドしたプロパティの値変更に対応した処理を記述するには INotifyPropertyChanged.PropertyChanged を利用することが多く、INotifyPropertyChanged を継承した ReactvieProperty で PropertyChanged イベントを処理したい場合は src. 3 のように Subscribe(購読)メソッドを使用します。

Subscribe メソッドは src. 3 の 34-35 行目のように Delegate 先を指定するかラムダ式で処理を直接記述します。
又、ReactiveProperty の特徴として src. 3 の 34 行目のように Rx(Reactive Extension)を挟むことで入力値をフィルタリングしたり変換することが可能な点です。
src. 3 では値が空文字又は 3 文字の場合のみ後続の処理を実行するように指定しています。

src. 1、2 のように View ⇔ VM ⇔ Model がそれぞれ双方向でバインドされていると、View での入力が Model まで即座に伝播するので BleachCharacter.Code を Subscribe して同じモデルの BleachCharacter.Name を更新するだけで fig. 2 のように View へキャラクター名が表示されるようになります。(キャラクター名のクリアも同様)

fig.2 ReactvieProperty.Subscribe で他のプロパティを操作する

ここで勘違いして欲しくないのですが、管理人が言いたいのは『MVVM パターンでデータを読み込みたい場合はモデルのプロパティを Subscribe すれば良い』と言うことではありません

ここではサンプルとして作成した画面的に分かり易い例として BleachCharacter.Code プロパティを Subscribe する方法を紹介しましたが、実際のアプリケーションでは、DB から取得したデータを Dapper 等の ORM を使ってマッピングする場合も多く、Code プロパティの Subscribe でデータを取得するとデータの取得処理が複数個所に分散することになります。

又、src. 1、2 のような構造では Code プロパティの Subscribe 内で Dapper 等を使用することは難しく、データマッピング処理を複数書く羽目になってしまうので避けた方が良いと思います。

とは言え、src. 3 の方法が全く間違いと言う訳ではなく、Entity 系モデルのプロパティを Subscribe して他の値を更新するのはアプリケーションによってはアリだと思いますが、通常は Agent や Controller 系のアプリケーションロジック層へ処理を書く方が構造的に健全だと思います。

MVVM っぽいデータの連動更新

今まで連載記事内で何度か書きましたが、MVVM パターンでは View と ViewModel 以外は全て Model であり、一般的に Model は何層かに分割します

つまり src. 4 のように Model の アプリケーションロジック層に分類される BleachAgent を Subscribe 内で呼び出す方法です。

src. 3 で紹介した BleachCharacter.Code の Subscribe は削除して、37 ~ 38 行目のようにMainWindowViewModel の BlearchCharacterCode を Subscribe するように変更して、値の設定を BleachAgent へ委譲しても動作は fig. 2 と全く同じになります。

src. 4 は委譲した BleachAgent です。

この設計がベスト!だと言うつもりはありませんが、VM からコードを Model 層へ追い出すことで VM の肥大化を防ぐことができ、MVVM っぽい作りにすることができます。

このエントリで管理人が最も言いたいのは『MVVM パターンで VM はその名の通り View と Model の関係のみを記述する薄いレイヤーである』事と、View と Model の関係以外は Model 層に記述すべきと言う点です。

ここで紹介したサンプルコードは大して為になるサンプルではないと思いますが、こんな感じのサンプルはあまり見たことがありませんし、実際に MVVM パターンで何度が実装しないと実感しない部分だと思うので何かの参考になればと思い記事としてまとめてみました。

ここで紹介したサンプルコードはいつもの通り GitHub リポジトリ へアップしています。

このエントリで紹介したサンプルコードは元々 episode: 17 で作成していたので、フォルダが分かれていません。
episode: 17 用のソリューションを開いてください。

次回は .NET Core 関連のネタを書いている最中で、2 週間ほど先の公開を予定しています。

 

【WPF Prism episode: 18 ~ Livet が Prism に「IDisposable 呼び出し用」としてゲッツされた件 ~】次回記事 →

 

 

あわせて読みたい

コメントを残す

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

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

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