[Xamarin][CrossPlatform][Control] NavigationPage

2016.09.27

NavigationPageを使用すると、ページを遷移したときに[戻る]ボタンが表示されるようになります。

はじめにApp.xaml.csのコンストラクタ内部を以下のように編集します。

変数MainPageは画面に表示されるメインページを表すのですが、このMainPageにNavigationPageのインスタンスを入れるようにします。NavigationPageの引数には、実際にメインページとして表示されるクラスのインスタンスを渡します。

public App()
{
  InitializeComponent();

  MainPage = new NavigationPage(new NavigationPageSamplePage());
}

続いて、メインページから他のページへの移動方法を見てみましょう。

はじめにメインページにボタンを1つ配置しましょう。ボタンがクリックされた場合にページを遷移させるには　this.Navigation.PushAsync()メソッドを実行します。このメソッドの引数には遷移先のページのインスタンスを渡します。

private void btnNextPage_Clicked(object sender, EventArgs e)
{
  this.Navigation.PushAsync(new SecondPage());
}

以上でNavigationPageの完成です。

実行結果は以下に示す通りで、遷移先のページには戻るボタンが表示されます。
戻るボタンはiOSの場合は[<Back]、Androidの場合は[←]が表示されます。

Please follow and like us: