WPFを中心に書いています。Technologies。UWPさて、今回のお題目はNavigationService、つまり画面遷移です。Prismは非常に強力な画面遷移の機構を提供しています。Viewから完全に分離された、ViewModel主体の画面遷移DeepLinkingサポートアプリケーション再開時のナビゲーションスタックの再構築などなど。(正直にいうと3つ目は私も正しくまだ理解しきれていませんが)このため、とても一度で紹介しきれないため、何回かに分けて解説していきたいと思います。以下のように分ける予定です。Study(ここはさらに複数回に分けるかも?)今回はQuickstartということで、新しい画面の追加と画面遷移を解説したいと思います。Xamarin.Forms入門」の一部となっております。以下に目次がありますので、他のエントリーもご覧いただけると嬉しいです。本エントリーでは、以下を達成することを目的としています。Pack」を利用して、プロジェクトが作成済みであることを前提としています。Pack」を利用したプロジェクトの作成については、以下のリンクに詳しく記載していますので良かったらご覧ください。www.nuits.jp新しい画面(ViewとViewModel)の追加それでは早速行きましょう。新しい画面の追加は、以下の手順で実施します。新しいView(Page)の作成まずはプロジェクトへ新しいView(Page)を追加します。この時、PrismではPageを作成するテンプレートをいくつか用意してくれています。今回は以下の画面のように、ContentPageのテンプレートから「SecondPage」という名前で作成してください。作成して中身を見てみると、デフォルトでViewModelLocatorのAutowireViewModelが設定されているのが見て取れるかと思います。テンプレートでやってくれることは、これだけですが地味に楽ですwさて、このままだと新しい画面に遷移しても正常に遷移できたのか、できていないのか分かり難いので、画面に画面名を表示するようにすこしXAMLへコードを追加しておきましょう。Titleも追加していますので、お気を付けください。対応するViewModelの作成それでは続いて、ViewModelを作成します。ViewModelもテンプレートが用意されているので、そちらから作成しましょう。「SecondPage」のViewModelなので「SecondPageViewModel」にします。この辺りのViewModelの詳細については、以下に記載していますので良かったらご覧ください。www.nuits.jpさて、作成されたクラスを見てみましょう。ベースクラスとして、BindableBaseが指定されているかと思います。これはPrismが提供する、INotifyPropertyCangedを実装した、ViewModelなどの標準の基底クラスになります。Containerから取得します。Containerへ登録してあげる必要があります。PCLプロジェクトのApp.xaml.csを開いてください。RegisterTypesメソッド内で、MainPageがすでに登録されていると思いますが、同様に新しく追加したSecondPageも登録してあげましょう。簡単ですね!既存画面から新しい画面への画面遷移の実装それでは、既存のMainPageから新しいSecondPageへの画面遷移を実装します。画面遷移を実装する場合、多くは以下の手順で実施します。今回は、MainPageにボタンを追加して、ボタンをクリックするとSecondPageへ遷移するよう、実装していきます。遷移元のViewModelでINavigationServiceの受け取りPrismでは画面遷移を行う際に、INavigationServiceを利用します。INavigationServiceはコンテナからViewModelにインジェクションしてもらって利用します。今回はMainPageからの画面遷移なので、MainPageViewModelでINavigationServiceを受け取ります。MainPageViewModelのコンストラクタを以下のように修正します。この時に、受け取るパラメータ名がnavigationServiceである必要がありますので注意してください。今回は、MainPageにボタンを追加して、それを起点に画面遷移します。その為、ボタンに対応するCommandを作成し、コマンドの処理として画面遷移を実装します。INavigationServiceのNavigationAsyncメソッドで画面遷移を呼び出します。この時、引数としてデフォルトでは遷移先の画面名を指定します。画面遷移指定が文字列なところなど、ちょっと気に入らないと思われる方もいらっしゃると思いますが、DeepLinkingやアプリケーション再開時のナビゲーションスタックの再構築を考えると、致し方がない処かとは思います。個別に文字列指定するのもどうかと思いますので、いくつかのアイディアをいずれ紹介したいと思います。続いて、MainViewに画面遷移ボタンを追加し、作成したCommandを呼び出すように実装します。ボタンに先ほど作成たNavigateSecondCommandをバインドしましょう。これでこんな感じに画面遷移が実現できたはずです。新しい画面から既存画面へ「前へ戻る」画面遷移の実装それでは続いてアプリケーション内から戻る処理を追加してみましょう。手順としては以下のようになります。SecondPageViewModelへ前画面へ戻る処理の実装SecondPageに戻る処理呼び出しの実装こちらも同様にボタンから遷移できるようにします。戻る処理も同様にINavigationServiceを利用します。SecondPageViewModelに次の処理を施します。具体例は以下の通りです。説明の必要もないかもしれませんが、SecondPageにボタンを追加し、GoBackCommandの呼び出しを実装します。こんな感じで動作するはずです。NavigationPageの適用さて、MainPageとSecondPageで行ったり来たりできるようになりました。なったら次に欲しくなるのはやはり、画面上部のナビゲーションですよね?Xamarin.Formsでは、NavigationPageを利用することで実現できます。Prism.Formsでは非常に簡単にそれらを組み込むことが可能です。具体的な手順は以下の通りです。ContainerへNavigationPageを登録するApp.xaml.csからの画面遷移をNavigationPage経由で遷移するように指定する1.の登録ですが、Xamarin.Formsで提供されているNavigationPageをそのまま登録するだけでかまいません。いずれも、App.xaml.csへの実装になりますので、一度に見てみましょう。Containerへの登録が追加されています。繰り返しになりますが、ここで登録するNavigationPageはXamarin.Formsで提供されている素のNavigationPageクラスです。OnInitialized内の画面遷移をNavigationService.NavigateAsync("MainPage?~からNavigationService.NavigateAsync("NavigationPage/MainPage?~へ変更しています。これだけでNavigationPageが適用されます。言う分けで、新しい画面の追加と、それに伴った画面遷移の実装方法を紹介してきました。今回紹介した内容は、以下に公開していますので良かったら参考にご覧ください。github.com一先ず今回はここまでで、次はNavigationServiceをもう少し掘り下げて説明していきたいと思います。1.0.0をリリースしました。Overview久しぶりにJXUGでしゃべらせていただきました。(1)はてなブログをはじめよう!nuitsjpさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。