01.NavigationPageを使用するには？

NavigationPageを使用すると、ページを遷移した時に[Back]ボタンが表示され、タップすると繊維元のページに戻ることが出来ます。

はじめに、遷移先となるページを追加しておいてください。このページは SecondPage.xamlとします。

次に、メインページ（MainPage.xaml）を以下のようにデザインします。このページにはLabelとButtonを1つずつ配置し、Buttonがタップされた時にSecondPageに遷移するようにします。

MainPage.xaml

    <?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
              xmlns:local="clr-namespace:NavigationPageSample" 
              x:Class="NavigationPageSample.MainPage">
    <StackLayout Orientation="Vertical">
    
        <Label Text="First Page" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
        <Button Text="Go to the Next Page" VerticalOptions="CenterAndExpand" Clicked="SecondPage_Clicked" />
    
    </StackLayout>
</ContentPage>

次に、メインページのコードビハインド（MainPage.xaml.cs）を以下のように編集します。

SecondPage_Clickedイベントで、SecondPageに遷移させます。

ページの遷移は、Navigation.PushAsyncメソッドを使用し、引数には遷移先ページのインスタンスを渡します。

MainPage.xaml.cs

  namespace NavigationPageSample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        /// [Go to Second Page]ボタンタップ時の処理
        void SecondPage_Clicked(object sender, System.EventArgs e)
        {
            // SecondPageに遷移する
            this.Navigation.PushAsync(new SecondPage());
        }
    }
}

最後に App.xaml.cs を以下のように編集します。

NavigatioonPageクラスの引数に、最初に表示させたいページを指定することでナビゲーションページを作成します。

これにより、ページを遷移した時に[Back]ボタンが表示されるようになります。

App.xaml.cs

    using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace NavigationPageSample
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            // ↓元々の記述
            //MainPage = new MainPage();

            // ナビゲーションページを使用する
            MainPage = new NavigationPage(new MainPage());
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

実行例を以下に示します。