NavigationPageについて纏めてみました。

NavigationPageを使う事で画面遷移をすることができます。

特徴として、画面遷移時にパラメータを渡せたり、遷移元・遷移後のページ情報を持っています。

NavigationPageの動き方について

かりまたかりまた

NavigationPageを使うとどのように動くかをまずは見てみましょう。この例では、ボタンを押すことで次のページへ遷移します。

Windows8.1AndroidiPhone

NavigationPageの作り方(ミニマムコード)

遷移元のプログラム

かりまたかりまた

基本的にはコピペで大丈夫ですが、プロジェクト名などは適宜変更してください。


かりまたかりまた

コードビハインドは以下の様にしています。OnTransitNextPageメソッドNextPageに遷移する記述をしています。

遷移先のファイルを作成

かりまたかりまた

次に、ボタン押下時の遷移先を作成します。

ソリューションを右クリック>追加>新しい項目の追加として下さい。

かりまたかりまた

新しい項目の追加が開いたら、Forms Content Page Xamlを選択して、 追加を押してください。今回は分かりやすいように名前をNextPageとします。

かりまたかりまた

そうすると、以下の様にNextPage.xamlNextPage.xaml.csが作成されます。これらのファイルを遷移先のファイルとします。

遷移先のプログラム

かりまたかりまた

NextPage.xamlには以下の様に記述してください。


かりまたかりまた

NextPage.xaml.csでは特に処理を行う必要が無いのでコンストラクタだけで大丈夫です。


かりまたかりまた

そうすると、MainPage.xamlからNextPage.xamlにページ遷移する事ができます。

Windows8.1AndroidiPhone

NavigationPageで遷移後のページにパラメータを渡す

遷移元のプログラム

りんちゃんりんちゃん

遷移元のページで選択した色を遷移後のページの背景色として渡してみるのにゃ~。


りんちゃんりんちゃん

余談だが、相変わらずpickerコントロールDictonaryが最悪の組み合わせなのでListに書き換えたのにゃ~。

遷移先のプログラム

りんちゃんりんちゃん

NextPage.xamlを以下のように変更するのにゃ~。ちなみに、わざわざBoxViewコントロールで背景をコントロールする理由は、iPhoneだとBackGroundColorプロパティが効かないからだにゃ~。


りんちゃんりんちゃん

最後に、NextPage.xaml.csを以下のようにするのにゃ~。BoxViewコントロールにはイベントがないからTapGestureRecognizerでタップ時の動作を付与してやるのにゃ~。


りんちゃんりんちゃん

PopModalAsyncメソッドで遷移元の画面に戻れるのにゃ~。遷移時はPush、遷移元へ戻る場合はPopを使えば良いというわけだにゃ~わかりやすいにゃ~。

Windows8.1AndroidiPhone

まとめ

  • NavagationPageを使用することでページの遷移を行う事ができる
  • 遷移時にはPush、遷移元へ戻る場合はPopを行う