PrismでXamarin.Formsする方法

C#Xamarin.FormsでPrismでMVVM実装#08 画面遷移

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。

前回までで,ViewとViewModelに分ける意味や,テストコードをどのように記述するのかという事を解説してきました。今回はViewとViewModelに分けたことで,実装しづらくなった部分の対処法を解説していきます。例えば画面遷移時のNavigation.PushAsync等はContentPageには問題なく記述できていましたが,ViewModelには記述できません。そこでViewModelにロジックを書く場合はどのようにして画面遷移をすればいいのか?やはりコードビハインド側にコードを書く必要があるのか?という問題が出てくるので,そのあたりの対処法を解説していきます。結果から言うと,画面遷移,メッセージ表示,デバイスごとの切り替えは,コードビハインドに書かなくても,ViewModel側に記述できるように,Prismは対応されています。今回はそのやり方を実装していきます。 

画面遷移用の画面を作成

画面遷移用の画面を1つ追加します。

画面を作成するときは「Views」フォルダーに作成します。Viewsフォルダーを右クリックして,「追加」から「新しい項目」を選択します。

「新しい項目の追加」画面で左側のツリーから「Prism」を選択し,さらに「Xamarin.Forms」を選択します。中央に「Prism ContentPage(Xamarin.Forms)」が選択できるので,それを選択します。名前は「PageBView」にして「追加」ボタンを押下します。

Viewを作成すると自動的に対応する「ViewModel」も作成してくれます。

ただ,Viewを「PageBView」のように,語尾にViewを付けてしまうと,ViewModelは「PageBViewViewModel」というように,ViewViewModelという重複した名前になってしまいます。これをPageBViewModelになるようにファイル名やクラス名を変更します。

次のようにPageBViewModelに変更します。

App.xaml配下のApp.xaml.csにもPageBViewViewModelの記述があるのでPageBViewModelに変更します。

PageBView には,PageBViewであることがわかるようにPageBViewのXAMLに,ラベルを設置して,「Page b」とテキストに設定しておきます。

MainPageのXAMLにボタンを追加し,Textを「Next page」とし,CommandにはNextCommandをバインドしておきます。これで,NextCommandボタンをクリックしたら,PageBViewに遷移するように実装したいと思います。

NextCommandのバインディングの方法は,前述のButtonCの時と同じやり方になります。

NextCommandという名前でDelegateCommandのプロパティを作成し,コンストラクタでインスタンスを生成します。引数のActionにはPageBShowというメソッド名を指定します。PageBShowメソッドは画面遷移のためのコードを書く必要がありますが,ここでNavigationServiceというものを使っています。これはMainPageViewModelのコンストラクタで取得し,baseに引き渡しているものです。NavigationServiceを使用することで,ViewModel側でも簡単に画面遷移ができるようになっています。画面遷移をするにはNavigationServiceに続けてNavigateAsyncを記述し,引数に遷移したいViewの名前を記載します。今回は「PageBView」と記載したため,これでPageBViewに画面遷移できるようになりました。これで一度実行してみましょう。   画面が起動しました。

「NEXT PAGE」ボタンを押下するとPageBViewが表示されれば成功です。

「Page b」が表示されました。

これで画面遷移がうまくできていることが確認できました。

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。