ここ何ヶ月か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に設定します。
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new MainPage() { Title = "メインページ"});
}
これにより、MainPage ContentPageインスタンスがナビゲーションスタックにプッシュされるようになり、そこがアクティブページであり、アプリケーションのルートページとなります。
Page遷移
Page遷移先のコンストラクタの指定は各自対応お願いします。
PushAsync
現在のNavigationStack上の1つ後のページに遷移する。
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つのみ存在することになります。
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