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[”パラメータキー”]
