LoginSignup
2
5

More than 3 years have passed since last update.

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

Posted at

ここ何ヶ月か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

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5