NavigationPageをコードビハインドにベタで書いて遷移させる方法を以前書きましたが、
MVVMに則った形で記述する方法については触れていませんでした。
この記事では、MVVMパターンに当てはめてNavigationPageやNavigationParametersを使用してみたいと思います。
プロジェクトの作成

最終的なソリューションの構成を先に載せておきます。
Prism Template Packの使用

プロジェクトの作成にはPrism TemplateのUnityを使うのにゃ~。Prism Template Packについては以下の記事にまとめてるのにゃ~。
まずは遷移元の画面を作ってみる

遷移画面は簡易的な知恵袋をイメージして作りました。
Android | iPhone |
![]() | ![]() |
ListViewタップ時にコマンドを実行させるBehaviorの作成

以下の記事に書いているItemSelectedToCommandBehaviorを追加するのにゃ~。
遷移元のレイアウト

遷移元のレイアウトにSearchBar (ハリボテ)とListViewを置いてみたのにゃ~。ListVIewタップ時にコマンドを実行できるようにするのにゃ~。
ViewModelのコーディング

ViewModelには以下の様に記述したのにゃ~。
動作確認

以下の様に、ページ遷移元の画面が出来た事を確認できました。
Android | iPhone |
![]() | ![]() |
ページ遷移をさせてみる
まずはページ遷移ロジックを作る

再度、MainPageViewModel.csに手を加えます。インターフェース、メソッドの追加、コマンドの設定を新たにしました。
- MVVMでNavigationPageを使いたい場合はINavigatedAwareインターフェースを継承しよう
- INavigationService型のパラメータを受け取るようなコンストラクタを作成しよう
メソッド名 | 説明 |
OnNavigatedFromメソッド | そのページ “から” 遷移する際に実行されます。 |
OnNavigatedToメソッド | そのページ “に” 遷移した後に実行されます。 |
OnNavigatingToメソッド | そのページ “に” 遷移する際に実行されます。 |

詳しい事はnuitsさんが以下の記事にまとめてくださっています。(丸投げ)
ページ遷移先を作成する

MainPageViewModel.csからInputPageに遷移するようにしたのでViewにInputPageを作ります。
新しいViewを追加する

Viewsフォルダを右クリック>追加>新しい項目とすると新しい項目の追加ウィザードが開きます。


左からPrism>Prism ContentPage (Xamarin.Forms)を選択して新たにページを追加しましょう。

また、ページを追加したことでViewModelsフォルダにはInputPageViewModel.csが、App.xaml.csにはInputPageのコンテナが自動的に追加されています。かなり空気を読んでくれて必要そうなファイルや記述をしてくれてます!素晴らしい!!
追加したページを編集する

ページ遷移後のページはかなり簡素な作りにします。遷移元の画面で選択したカテゴリー名とカテゴリーIDを表示するだけにします。
- 遷移元から値を受け取る場合には parameters[“パラメーターキー”] のようにアクセスをすれば取れます。
- ここで parameters[InputKey] で値が正しく取れるのは、遷移元のMainPageViewModel.csでNavigationParameterにInputKeyをキーとして選択した行の値を代入していたからです。
動作確認

選択した行の情報が正しく渡っていますね!
Android | iPhone |
![]() | ![]() |
記事のプログラムをDownload

今回のプログラムを以下にアップロードしましたのでご自由にダウンロードしてください。
まとめ
- 遷移させたい場合はViewModelのコンストラクタにINavigationService型の引数をとるように変更
- 遷移元から遷移先にパラメータを渡したい場合はNavigationParameterにキーと値を渡す
- パラメータの受け取り方はparameters[”パラメータキー”]