Help us understand the problem. What is going on with this article?

【Xamarin.Forms】ページ遷移(モーダル, モーダレス)に関してメモ

ここ何ヶ月かXamarinでアプリケーション開発をしていたのですが、GitのREADME.mdにメモを残すのも見栄えが悪くなりそうなので、私もQiitaに自分の備忘録として開発で得た知識を残すことにしました。

ページ遷移に関しては、わざわざまとめる必要もないかもしれませんが、初投稿ということで投稿の練習も兼ねて、この内容で投稿したいと思います。(Prismを使わない)

2種類の画面遷移スタックとそれぞれのメソッド

Modal Stack Navigation Stack
Dependency Application NavigationPage
Forward PushModalAsync PushAsync
Back PopModalAsync PopAsync
その他 PopToRootAsync

初期画面のスタック

App.xaml.cs(変更可能)にて初期画面(MainPage)のクラスを呼び出す場合、以下のように、NavigationPageをMainPageに設定します。

App.xaml.cs
public App()
{
    InitializeComponent();
    MainPage = new NavigationPage(new MainPage() { Title = "メインページ"});
}

これにより、MainPage ContentPageインスタンスがナビゲーションスタックにプッシュされるようになり、そこがアクティブページであり、アプリケーションのルートページとなります。

Page遷移

Page遷移先のコンストラクタの指定は各自対応お願いします。

PushAsync

現在のNavigationStack上の1つ後のページに遷移する。

MainPage.cs
async void PushAsync(object sender, EventArgs e)
{
      await this.Navigation.PushAsync(new NavigationPage(new MyPage() { Title = "MyPage" }));
}

PopAsync

現在のNavigationStack上の1つ前のページに遷移すると同時にNavigationStackにページを追加する。

async void PopAsync(object sender, EventArgs e)
{
      await this.Navigation.PopAsync(new NavigationPage(new MyPage() { Title = "MyPage" }));
}

PushModalAsync

新しいNavigationStackが追加されます。
するとModalStack上に NavigationPageが設定され、新しいNavigation Stackがもう一つ増えます。
つまり、 NavigationStackはNavigationPageと 1:1で存在し、NavigationPageが増えればその分増えます。
それに対してModalStackはシステムに1つのみ存在することになります。

MainPage.cs
async void PushModalAsync(object sender, EventArgs e)
{
      await this.Navigation.PushModalAsync(new NavigationPage(new MyPage() { Title = "MyPage" }));
}

PopModalAsync

1つ前のNavigationStackの一番後ろのページへ遷移する。
その際、Navigation Barからは前のNavigationStackには戻れない

async void PopModalAsync(object sender, EventArgs e)
{
      await this.Navigation.PopModalAsync(new NavigationPage(new MyPage() { Title = "MyPage" }));
}

PopToRootAsync

現在いるNavigationStack上のModalStackをすべて削除し、の現在のNavigationStackの先頭のPageに遷移します。
その際、Navigation Barからは前のNavigationStackには戻れない

async void PopToRootAsync(object sender, EventArgs e)
{
      await this.Navigation.PopToRootAsync(new NavigationPage(new MyPage() { Title = "MyPage" }));
}

最後に

最後まで読んでいただきありがとうございました。
本当は図を使って説明したいところなんですけど、少し面倒かつ下記のサイトにすでに掲載してあるので、割愛させて頂きます。

やはり今回書いたページ遷移のやり方より、よりコンパクトに書ける、PrismのNavigationServiceを使った方が良さそうです。

参考にしたサイト

Xamarin.Forms Navigation Overview
http://www.nuits.jp/entry/2017/05/27/170909

Xamarin.Forms モーダル ページ
https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/app-fundamentals/navigation/modal

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away