NavigationPageをコードビハインドにベタで書いて遷移させる方法を以前書きましたが、

MVVMに則った形で記述する方法については触れていませんでした。

この記事では、MVVMパターンに当てはめてNavigationPageやNavigationParametersを使用してみたいと思います。

NavigationPageの基本的な知識について

プロジェクトの作成

かりまたかりまた

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

Prism Template Packの使用

りんちゃんりんちゃん

プロジェクトの作成にはPrism TemplateUnityを使うのにゃ~。Prism Template Packについては以下の記事にまとめてるのにゃ~。

まずは遷移元の画面を作ってみる

かりまたかりまた

遷移画面は簡易的な知恵袋をイメージして作りました。

AndroidiPhone

 ListViewタップ時にコマンドを実行させるBehaviorの作成

りんちゃんりんちゃん

以下の記事に書いているItemSelectedToCommandBehaviorを追加するのにゃ~。

遷移元のレイアウト

りんちゃんりんちゃん

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

 

ViewModelのコーディング

りんちゃんりんちゃん

ViewModelには以下の様に記述したのにゃ~。

 

動作確認

かりまたかりまた

以下の様に、ページ遷移元の画面が出来た事を確認できました。

AndroidiPhone

ページ遷移をさせてみる

まずはページ遷移ロジックを作る

かりまたかりまた

再度、MainPageViewModel.csに手を加えます。インターフェース、メソッドの追加、コマンドの設定を新たにしました。

MVVMでNavigationPageを作成する際の補足説明

  • MVVMでNavigationPageを使いたい場合はINavigatedAwareインターフェースを継承しよう
  • INavigationService型のパラメータを受け取るようなコンストラクタを作成しよう
メソッド名説明
 OnNavigatedFromメソッドそのページ “から” 遷移する際に実行されます。
 OnNavigatedToメソッドそのページ “に” 遷移した後に実行されます。
 OnNavigatingToメソッドそのページ “に” 遷移する際に実行されます。
かりまたかりまた

詳しい事はnuitsさんが以下の記事にまとめてくださっています。(丸投げ)

ページ遷移先を作成する

かりまたかりまた

MainPageViewModel.csからInputPageに遷移するようにしたのでViewInputPageを作ります。

新しいViewを追加する

かりまたかりまた

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

かりまたかりまた

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

かりまたかりまた

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

追加したページを編集する

かりまたかりまた

ページ遷移後のページはかなり簡素な作りにします。遷移元の画面で選択したカテゴリー名とカテゴリーIDを表示するだけにします。

 

NavigationParametersの補足説明
  • 遷移元から値を受け取る場合には parameters[“パラメーターキー”] のようにアクセスをすれば取れます。
  • ここで parameters[InputKey] で値が正しく取れるのは、遷移元のMainPageViewModel.csでNavigationParameterにInputKeyをキーとして選択した行の値を代入していたからです。

動作確認

かりまたかりまた

選択した行の情報が正しく渡っていますね!

AndroidiPhone

記事のプログラムをDownload

かりまたかりまた

今回のプログラムを以下にアップロードしましたのでご自由にダウンロードしてください。

まとめ

  • 遷移させたい場合はViewModelのコンストラクタにINavigationService型の引数をとるように変更
  • 遷移元から遷移先にパラメータを渡したい場合はNavigationParameterにキーと値を渡す
  • パラメータの受け取り方はparameters[”パラメータキー”]