Xamarin.Formsのウィンドウの切り替え

2017-01-14 (最終更新: 2017-01-14)

概要

Xamarin.Formsで、ページ(画面)の切り替えの方法をまとめました。

ページの切り替えには、大きく2つあります。

ひとつめは、非常に簡単な方法で、現在の表示しているページを決定する「MainPage」にページのインスタンスを追加します。

この方法は、一番最初に表示されるページを指定しているApp.xaml.csでの設定方法と同じです。

ただ、App.xaml.csでは、「MainPage = new ****Page();」のように、直接MainPageにインスタンスを指定していますが、App.xaml.cs以外では、下記のようにして、ページを設定します。

Application.Current.MainPage = new ****Page();

Application.Current.MainPageのように指定しする必要があります。

ページ遷移の履歴が残らないので、戻るボタン等で戻ることができません。

何も設定を変えずにXamarin.Formsのプロジェクトを作成すると、ContentPageクラスを使ったページを作ることになります。このクラスは、ひとつめのデメリットである、戻るボタン等で戻ることができないという問題を抱えています。

そのため、戻るボタンを使いたい場合は、Page自体にページ遷移の履歴を残すことができるNavigationPageクラスやTabbedPageクラスやCarouselPageクラスを使います。

今回は、NavigationPageクラスを使って説明します。

NavigationPageクラスには、PushAsync()やPopAsync()メソッドがあるので、これを使ってページの管理をしていきます。

実際の使い方は、まずApp.xaml.csのMainPageを下記のようにします。

MainPage = new NavigationPage(new ****Page());

このようにして、最初のページをNavigationPageクラスで、登録しておく必要があります。

そして、ページを移動したい場合はNavigationを使います。

Navigation.PushAsync(new ****Page(), true);

PushAsync()メソッドは、ページを追加して移動します。

第二引数のtrueは、ページの移動時にアニメーションをするかどうかを決めるもので、今回はtrueということでアニメーションを有効にしています。

有効にしたくない場合は、falseを指定するか、第二引数を書かないようにします。

ページを戻りたい場合も、同じくNavigationを使います。

Navigation.PopAsync(true);

PoPAsync()メソッドは、ひとつ前のページに移動します。

引数のtrueは、ージの移動時にアニメーションをするかどうかを決めるもので、今回はtrueということでアニメーションを有効にしています。

有効にしたくない場合は、falseを指定するか、第二引数を書かないようにします。

実は、PushAsync()やPopAsync()には、他にもPushModalAsync()やPopModalAsync()などがあります。

これらは、移動時のNavigationPageの表示に関係してきます。

これは一例ですが、PushAsync()やPopAsync()では、画面の左上等に戻るボタンが表示されます。

そして、PushModalAync()やPopModalAsync()では、そのようなボタンは表示されず、そのままページの中身が変わります。

これは、実際に使ってみた方がわかりやすいと思います。

ページの移動は、よく使うものなので、覚えて使いこなせるようになりたいです。