WPF Prism episode: 12 ~ Prism メッセージボックスの Service な日常 ~

前回記事「Prism が画面遷移キャンセルするのは IConfirmNavigationRequest インタフェースだけど INavigationAware インタフェースじゃない【episode: 11 WPF Prism】」

 

前回は Prism の IConfirmNavigationRequest インタフェースを利用して Navigation(画面遷移)をキャンセルする方法を紹介しました。
今回は Navigation をキャンセルした際等に Prism 組み込みのメッセージボックスを表示する方法と、Prism 組み込みのメッセージボックス表示処理を Service として分離する方法を紹介します。

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

Prism 組み込みのメッセージボックスを MVVM パターンで表示する

前回のエントリでは Validation でエラーが存在した場合に View の遷移をキャンセルする方法を紹介しましたが、現状の動作では通常の Validation と同じエラーメッセージが表示されるだけなので、何故 View が切り替わらないかユーザに伝わりにくいと思います。
こんな場合は、遷移できない理由をメッセージボックスで表示するのがよくあるパターンだと思うので Prism からメッセージボックスを表示する方法を紹介します。

まず、WPF でメッセージボックスを表示する最も簡単な方法は Windows Form でもお馴染みの MessageBox クラスを使用する方法で、表示する方法も Windows Form の場合と変わりませんが、MVVM パターンで開発する場合は

  • 「MessageBox の表示は View の責務なんだから VM から MessageBox を Show するのは気持ち悪い!」
  • 「ユニットテスト中に MessageBox が表示されたらそこで止まっちゃうだろ!」

等の意見もある為、忌避される傾向にあるようです。

そのため、MVVM パターンで作成する WPF アプリケーションから MessageBox を表示するためのデザインパターンに【Messenger パターン】が採用される事が多いようですが、Prism は【Messenger パターン】で実装されたメッセージボックスを VM から表示する機能を標準で備えています

Messenger パターンについては Microsoft MVP の gushwell さんが『MVVM:Messengerを理解するために自作してみた(1)』で紹介されている(2022/8/23 現在、サイトが無くなっているようです)ので、Messenger パターンの内部動作に興味があれば見てみると良いでしょう。
管理人はアプリが作れればいいので内部動作までは確認していませんw

OK ボタンのみのメッセージボックスを MVVM パターンで表示する

Prism でメッセージボックスを表示するためにまず PhysicalEditView.xaml を以下のように変更します。

episode:6 でも紹介した Interaction.Triggers を使用するために System.Windows.Interactivity.dll のエイリアスを追加します。(3 行目)

続いて、VM とバインドするための InteractionRequestTrigger を定義して、実行するアクションに Prism の PopupWindowAction を指定して、VM とのバインド先を SourceObject に設定します
以下のプロパティも併せて設定して XAML 側の変更は完了です。

プロパティ説明
IsModaltrue を指定すると PopupWindow をモーダルで表示します。
CenterOverAssociatedObjectPopupWindow を TriggerAction を配置したコントロールの中央に表示します。
ここでは UserControl に配置しているので、UserControl(身体測定データ編集ビュー)の中央に表示されます。
※ WindowStartupLocation プロパティと同時に設定すると無視されるようです
WindowStartupLocationTriggerAction を UserControl に配置した場合でも UserControl のオーナー(Window)中央にメッセージボックスを表示します。
※ アプリ画面の中央に表示する場合はこちらのプロパティのみ設定すれば OK です

次に VM 側へ以下のハイライト行を追加します。

まず、XAML で定義した InteractionRequestTrigger とバインドするための InteractionRequest を定義して、コンストラクタ等で初期化します。(15、70 行目。初期化する場所はどこでも構いません)

実際にメッセージボックスを表示するための処理は MessageBox クラスの ShowDialog メソッドを模した showInformationMessage メソッドに切り出しておきます。(20 ~ 29 行目)
※ メソッドの切り出しは必須ではありませんが、切り出した方が使い易いと思います。

メッセージボックスのタイトルを毎回指定するのは面倒なので、showInformationMessage メソッドの第 2 パラメータ: title は、省略可能パラメータとして定義していますが、どちらでも構いません。
showInformationMessage メソッド内で宣言している Prism.Interactivity.InteractionRequest.Notification は Prism に標準で組み込まれているOK ボタンのみを備えたダイアログを表します。

そしてメッセージボックスを呼び出したい場所から showInformationMessage メソッドを呼び出す(44 – 45 行目)と、以下のように Prism 組み込みの OK ボタンのみのメッセージボックスが表示されます。

fig.1 情報メッセージボックス

Windows Form でメッセージボックスを表示するコードと比べてかなり記述量が増えますが、MVVM パターン で開発する際、まず最初にぶつかる壁と言う話もよく聞くメッセージボックスの表示を、比較的簡単に呼び出す仕組みが標準で備わっているのは Prism の利点と言えると思います。

ただ、このメッセージボックス、手軽に使えるのは良いのですが、下 fig.2 の赤枠で囲んだ部分のようにタスクバーに別 Window として表示されてしまいます。

fig.2 タスクバーに表示されるメッセージボックス

オブジェクトブラウザで Prism.Interactivity.PopupWindowAction を見ても ShowInTaskBar プロパティが無いので諦めようかと思いましたが、ググると Stack Overflow に解決法がありました。

PopupWindowAction へ Style を定義すると対応できるようなので XAML へ以下の Style を追加。

実行して確認すると…

fig.3 巨大なメッセージボックス

確かにタスクバー上にメッセージボックスは表示されなくなりましたが、予想外に巨大なメッセージボックスが表示されて一瞬ビビりましたが、以下の Style を再度追加するとちゃんとした大きさのメッセージボックスが表示されるようになります。

ここまで設定してやっと以下のように思った通りのメッセージボックスが表示されるようになります。

fig.4 想定通りのメッセージボックス

OK とキャンセルボタンのあるメッセージボックスを MVVM パターンで表示する

Prism 組み込みのメッセージボックスは情報を通知する OK ボタンのみのメッセージボックスだけではなく、OK・キャンセルボタンが配置された処理の続行を確認するためのメッセージボックスも組み込まれています。

確認メッセージボックスを表示する方法も 情報メッセージボックスの場合とほとんど同じで、XAML へは以下のように定義します。

実は、確認メッセージボックスを表示するための XAML 側の記述は Notification の場合と全く同じで、違うのは SourceObject に設定するバインド先のみです。
Prism の公式サンプル等でも別々に定義されているため、別々に定義する必要があるように感じますが、XAML 側の定義は Notification と共有できるので、1 つの画面で両方のメッセージボックスを表示する場合でも定義は 1 つだけで動作します

又、共有できるのは XAML 側の定義だけではなく VM 側のインタフェースも同様です。

15 行目で宣言している InteractionRequest<INotification> MessageBoxRequest プロパティは Notification で情報メッセージボックスを表示した時から変更していないため、情報・確認メッセージボックスを呼び出すインタフェースとして両方から共有しています

確認メッセージボックスを実際に表示するための showConfirmMessage メソッドの内部では、Prism.Interactivity.InteractionRequest.Confirmation を new して InteractionRequest の Raise メソッドにセットしています。(30 ~ 33 行目)
Notification と Confirmation で InteractionRequest を共有できるのは、両クラスが下 fig.5 のクラス図ような継承関係にあるからです。

fig.5 Notification クラス図

Notification と違い、Confirmation はユーザが選択したボタンを取得する必要があるため、Raise メソッドには戻り値を取得するためのコールバックが指定できる overload が 定義されています
overload で定義されている第 3 パラメータ: callback に返される IConfirmation.Confirmed プロパティに true がセットされている場合は OK ボタン。false がセットされている場合はキャンセルボタンが押されたことが判別できます。

実行すると、以下のような問い合わせメッセージボックスが表示されます。

fig.6 確認メッセージボックス

キャンセルをクリックすると画面遷移がキャンセルされ、OK をクリックすると TreeView で選択した View に切り替わる動作が確認できます。
独り言 実際のアプリでは、この場面で問い合わせメッセージを表示するのはおかしいと思いますが、組み込む場所が思い付かなかったので、あくまでサンプルとして見てください。

メッセージボックス表示機能を使い回すために Service として分離する

Prism 組み込みのメッセージボックスを表示する方法は前章で紹介した通りですが、他の View でもメッセージボックスを表示したい場合、View ごとに同じ記述を追加するのは非常に非効率です。

Prism で作成するアプリは 1 つの Window と複数の View(UserControl)で構成されるようなパターンが多いので、メッセージボックスの表示は Window に任せて他の View は Window にバインドされたメッセージボックスを呼び出せる仕組みにできれば開発効率が良さそうです。
このような場合はメッセージボックス表示機能を Service として分離すると他 View でも使い回すことができます。

Prism を使用せず WPF 標準の機能のみで Service に分離する方法が SourceChord の『MVVMな設計のTips~サービスを作ってVMの依存性を排除~』 で紹介されているので、この方法を Prism で作成するアプリに応用します。

まず、【メッセージボックスを表示する Service のインタフェース】を定義します。

IMessageBoxService の実装クラスも追加します。実装の中身は前章で View に実装した内容と同じです。

ここではちゃんとメッセージボックスを表示するクラスを紹介していますが、このクラスとは別に表示する文字列を Debug.WriteLine するようなテストクラスを作成しておくとユニットテストでメッセージボックスが表示されずに済むでしょう。

DI コンテナの Unity へ登録したインタフェースを Singleton として扱う

作成した Service をサンプルアプリで使用するために、App.xaml のコードビハインドで override している RegisterTypes メソッドで Service を DI コンテナの Unity へ登録します

IMessageBoxService インタフェースの使い方自体は後述しますが、このインタフェースは Window と View(UserControl)間でインスタンスを共有する必要があるため、Singleton である必要があります。

16 行目の RegisterInstance は episode: 4 で紹介したデータクラスのインスタンスを登録するためのメソッドですが、今回作成した IMessageBoxService インタフェースは 17 行目の RegisterSingleton メソッドでDI コンテナへ登録しています。

2020/8/8 追記
DI コンテナについては改めて .NET Core WPF Prism MVVM 入門 2020 step: 4 で詳しく紹介しています。

今まで DI コンテナへの登録はインスタンスを登録するための RegisterInstance メソッドしか紹介していませんでしたが、型(インタフェース・クラス)を登録するためのメソッドとして以下の 2 種類が定義されています。
※ Prism の Navigation(画面遷移)に使用する View を登録するための RegisterForNavigation メソッドは除く

  • Register
  • RegisterSingleton

上記 2 つのメソッドとも登録された型がインジェクションされる場合、DI コンテナ内で生成した新規インスタンスをインジェクションしますが、RegisterSingleton メソッドの型第 2 パラメータへクラスを指定した場合は、第 2 パラメータに指定したクラスのインスタンスを Singleton クラスとしてインジェクションしてくれます

Service を経由してメッセージボックスを表示する

前章までは Prism の View である UserControl に PopupWindowAction を設定していましたが、ここではメッセージボックスを MainWindow からポップアップするので、MainWindow.xaml へ以下のように PopupWindowAction を追加します。

前章で身体測定データ View に追加したコードと全く同じです。

そして、前章と同じく MainWindow の VM にも InteractionRequest を定義します。

定義した InteractionRequest は new せず、コンストラクタにインジェクションされたIMessageBoxService から InteractionRequest を受け取ってセットしています。
Service 内に定義した InteractionRequest が MainWindow.xaml にバインドされる形になります)

そして、実際にメッセージボックスを表示する箇所は以下のように変更します。(ここでは身体測定データ編集 View)

前章では View 内に定義していた InteractionRequest を呼び出していましたが、Service のメソッドを呼び出すように修正しています。IMessageBoxService のインスタンスは MainWindow と同じくコンストラクタへ Unity からインジェクションしてもらっています。
MainWindow と Prism Module 内の View(UserControl)で Service のインスタンスを共有したかったので、DI コンテナへ Service を登録する際に Singleton で登録しました

後はメッセージボックスを表示したいところで、MessageBoxService のメソッドを呼び出す(33 行目)だけで前章までと変わらず以下のようにメッセージボックスが表示されるはずです。

fig.7 分離したサービスを経由してメッセージボックスを表示

episode:11 で紹介した ConfirmNavigationRequest 内で情報メッセージを表示する部分はコメントアウトしているので、コメントを切替えると情報・確認メッセージボックスの両方の表示が確認できます。

ここでは MessageBoxService をサンプルアプリのソリューションに含めていますが、別プロジェクトに分けておくと、当然別のプロジェクトへも使い回しができるようになります
VM がいろんなクラスに依存してきて肥大した場合や、処理の再利用が必要になった場合は、このように Service として分割すると応用が利くでしょうし、ここで紹介した方法を応用すれば、MainWindow でバインドした内容を Service 経由で View へ通知したり、その逆もできると思います。

 

今回はここで終了です。
次回は Prism からダイアログ(別ウィンドウ)を表示する方法を紹介する予定です。
そしていつものように今回紹介したコードも GitHub リポジトリへ置いています。

 

次回記事「カスタマイズしたらメッセージボックスだった件【episode: 13 WPF Prism】」

 

 

おすすめ

3件のフィードバック

  1. 匿名 より:

    こちらに書かれている内容を参考にメッセージボックスの表示をService化してみました。

    私が作っているアプリケーションでは、メイン画面とサブ画面(モードレス:メイン画面が起動時に作成)という構成で、
    メイン画面を閉じる際にアプリケーションを終了するかどうかの確認メッセージを表示させるようにしています。

    ところが、
    メイン画面を閉じる→確認メッセージでOK→終了
    となるはずが、
    メイン画面を閉じる→確認メッセージでOK→サブ画面で確認メッセージが表示される
    という動きになってしまいます。

    これは実装がマズいのでしょうか?

    • 沖田玲朗 より:

      返信が遅くなりました。管理人です。

      モードレスダイアログは WPF では作ったことが無いこととソースコードも見ていないので想像でしかお答えできませんのでご了承ください。
      サブ画面で確認メッセージが表示されるのは、サブ画面に表示する View 側にも InteractionRequestTrigger と PopupWindowAction を設定されているのが原因だと想像しています。

      このエントリで紹介している Service はメイン画面のみに InteractionRequestTrigger と PopupWindowAction を設定して、InteractionRequest をサービスで使い回すための方法なので、サブ画面側の XAML に InteractionRequestTrigger と PopupWindowAction を追加しなくても Service 経由でメッセージが表示できるはずです。(モードレスは動かしたことが無いのであくまでも想像ですが…)

      ソース(部分的にでも)を GitHub 等で見れれば何か分かるかもしれませんが、今の状態ではこの程度の回答が精一杯です。

      • 匿名 より:

        回答ありがとうございます。

        ご指摘の通り、サブ画面側にもInteractionRequestTriggerとPopupWindowActionを設定していました。
        それらを無くせば期待通りの動作になりました。
        ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

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