階層ナビゲーション

[アーティクル]
05/18/2023

NavigationPage クラスは、ユーザーが前後を希望どおりにページを移動することができる階層ナビゲーションエクスペリエンスを提供します。このクラスは、Page オブジェクトの後入れ先出し (LIFO) スタックとしてナビゲーションを提供します。この記事では、NavigationPage クラスを使用してページのスタックでナビゲーションを実行する方法について説明します。

1 つのページから別のページに移動するには、次の図に示すように、アプリケーションは新しいページを、そこでアクティブなページとなるナビゲーションスタックにプッシュします。

Pushing a Page to the Navigation Stack

次の図に示すように、前のページに戻るには、アプリケーションは現在のページをナビゲーションスタックからポップします。そして新しい最上位のページがアクティブページになります。

Popping a Page from the Navigation Stack

ナビゲーションメソッドは、任意の Page 派生型の Navigation プロパティによって公開されます。これらのメソッドには、ページをナビゲーションスタックにプッシュし、ナビゲーションスタックからページをポップし、スタック操作を実行する機能があります。

階層ナビゲーションでは、NavigationPage クラスは ContentPage オブジェクトのスタック間をナビゲートするために使用されます。次のスクリーンショットは、各プラットフォームでの NavigationPage のメインコンポーネントを示します。

NavigationPage Components

NavigationPage のレイアウトは、プラットフォームによって異なります。

iOS では、ナビゲーションバーがページの上部にあり、タイトルが表示され、前のページに戻る [戻る] ボタンがあります。
Android では、ナビゲーションバーがページの上部にあり、タイトル、アイコンと、前のページに戻る [戻る] ボタンが表示されています。 Android プラットフォーム固有プロジェクトでは、アイコンは MainActivity クラスを修飾する [Activity] 属性で定義されています。
ユニバーサル Windows プラットフォームでは、ナビゲーションバーはページの上部にあり、タイトルが表示されています。

いずれのプラットフォームでも、Page.Title プロパティの値がページタイトルとして表示されます。さらに、IconColor プロパティを、ナビゲーションバーのアイコンに適用される Color に設定できます。

Note

NavigationPage を ContentPage インスタンスのみで作成することをお勧めします。

ルートページを作成する

ナビゲーションスタックに追加された最初のページは、アプリケーションのルート ページとなります。次のコード例に、これを実現する方法を示しています。

public App ()
{
  MainPage = new NavigationPage (new Page1Xaml ());
}

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

Root Page of Navigation Stack

Note

NavigationPage インスタンスの RootPage プロパティを使用すると、ナビゲーションスタック内の最初のページにアクセスできます。

Page2Xaml にナビゲートするには、次のコード例で示すように、現在のページの Navigation プロパティで PushAsync メソッドを起動する必要があります。

async void OnNextPageButtonClicked (object sender, EventArgs e)
{
  await Navigation.PushAsync (new Page2Xaml ());
}

これにより、Page2Xaml インスタンスがナビゲーションスタックにプッシュされるようになり、そこがアクティブページとなります。これを以下のスクリーンショットに示します。

Page Pushed onto Navigation Stack

PushAsync メソッドが呼び出されると、次のイベントが発生します。

PushAsync を呼び出すページでは、OnDisappearing のオーバーライドが呼び出されます。
ナビゲート先のページでは、OnAppearing のオーバーライドが呼び出されます。
PushAsync タスクが完了します。

ただし、これらのイベントが発生する正確な順序はプラットフォームによって異なります。詳細については、Charles Petzold 氏著作の Xamarin.Forms ブックの第 24 章を参照してください。

Note

OnDisappearing および OnAppearing のオーバーライドの呼び出しは、ページナビゲーションを示す保証として扱うことはできません。たとえば、iOS では、アプリケーションの終了時にアクティブページで OnDisappearing のオーバーライドが呼び出されます。

アクティブページは、これが物理的なボタンであるか画面上のボタンであるかどうかにかかわらず、デバイスの [戻る] ボタンを押すことによってナビゲーションスタックからポップすることができます。

元のページにプログラムを使用して戻るには、Page2Xaml インスタンスが、次のコード例のとおり PopAsync メソッドを起動する必要があります。

async void OnPreviousPageButtonClicked (object sender, EventArgs e)
{
  await Navigation.PopAsync ();
}

これにより、ナビゲーションスタックから Page2Xaml インスタンスが削除され、新しい最上位のページがアクティブページとなります。 PopAsync メソッドが呼び出されると、次のイベントが発生します。

PopAsync を呼び出すページでは、OnDisappearing のオーバーライドが呼び出されます。
戻り先のページでは、OnAppearing のオーバーライドが呼び出されます。
PopAsync タスクが復帰します。

各ページの Navigation プロパティには、PushAsync および PopAsync メソッドだけでなく、次のコード例に示すように、PopToRootAsync メソッドも用意されています。

async void OnRootPageButtonClicked (object sender, EventArgs e)
{
  await Navigation.PopToRootAsync ();
}

このメソッドは、ルート Page 以外のすべてをナビゲーションスタックからポップします。そのため、アプリケーションのルートページがアクティブページになります。

ページ遷移をアニメーション化する

各ページの Navigation プロパティには、次のコード例に示すように、ナビゲーション中にページアニメーションを表示するかどうかを制御する boolean パラメーターを含むオーバーライドされたプッシュおよびポップメソッドも用意されています。

async void OnNextPageButtonClicked (object sender, EventArgs e)
{
  // Page appearance not animated
  await Navigation.PushAsync (new Page2Xaml (), false);
}

async void OnPreviousPageButtonClicked (object sender, EventArgs e)
{
  // Page appearance not animated
  await Navigation.PopAsync (false);
}

async void OnRootPageButtonClicked (object sender, EventArgs e)
{
  // Page appearance not animated
  await Navigation.PopToRootAsync (false);
}

boolean パラメーターを false に設定すると、ページ遷移アニメーションが無効になります。また、パラメーターを true に設定すると、基となるプラットフォームでサポートされている場合はページ遷移アニメーションが有効になります。ただし、プッシュとポップのメソッドでこのパラメーターが指定されていない場合は、既定でアニメーションが有効になります。

ナビゲーション時にデータを渡す

場合によっては、ナビゲーション中に、あるページから別のページにデータを渡す必要があります。これを実現する 2 つの手法では、ページコンストラクターを介してデータを渡し、新しいページの BindingContext をデータに設定しています。これから、それぞれについて順番に説明します。

ページコンストラクターを介してデータを渡す

ナビゲーション中に別のページにデータを渡す最も簡単な手法は、次のコード例で示すように、ページコンストラクターパラメーターを使用することです。

public App ()
{
  MainPage = new NavigationPage (new MainPage (DateTime.Now.ToString ("u")));
}

このコードでは、現在の日付と時刻を ISO8601 形式で渡す MainPage インスタンスを作成します。これは NavigationPage インスタンスでラップされています。

MainPage インスタンスは、次のコード例に示すように、コンストラクターパラメーターを使用してデータを受け取ります。

public MainPage (string date)
{
  InitializeComponent ();
  dateLabel.Text = date;
}

次のスクリーンショットに示すように、Label.Text プロパティを設定することでデータがページに表示されます。

Data Passed Through a Page Constructor

BindingContext を介してデータを渡す

ナビゲーション中に別のページにデータを渡すもう 1 つの方法は、次のコード例に示すように、新しいページの BindingContext をデータに設定することです。

async void OnNavigateButtonClicked (object sender, EventArgs e)
{
  var contact = new Contact {
    Name = "Jane Doe",
    Age = 30,
    Occupation = "Developer",
    Country = "USA"
  };

  var secondPage = new SecondPage ();
  secondPage.BindingContext = contact;
  await Navigation.PushAsync (secondPage);
}

このコードでは、SecondPage インスタンスの BindingContext を Contact インスタンスに設定し、SecondPage にナビゲートします。

次の XAML コード例に示すように、SecondPage ではデータバインディングを使用して Contact インスタンスデータを表示します。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PassingData.SecondPage"
             Title="Second Page">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
            <StackLayout Orientation="Horizontal">
                <Label Text="Name:" HorizontalOptions="FillAndExpand" />
                <Label Text="{Binding Name}" FontSize="Medium" FontAttributes="Bold" />
            </StackLayout>
            ...
            <Button x:Name="navigateButton" Text="Previous Page" Clicked="OnNavigateButtonClicked" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

次のコード例は、C# でデータバインディングを実行する方法を示しています。

public class SecondPageCS : ContentPage
{
  public SecondPageCS ()
  {
    var nameLabel = new Label {
      FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
      FontAttributes = FontAttributes.Bold
    };
    nameLabel.SetBinding (Label.TextProperty, "Name");
    ...
    var navigateButton = new Button { Text = "Previous Page" };
    navigateButton.Clicked += OnNavigateButtonClicked;

    Content = new StackLayout {
      HorizontalOptions = LayoutOptions.Center,
      VerticalOptions = LayoutOptions.Center,
      Children = {
        new StackLayout {
          Orientation = StackOrientation.Horizontal,
          Children = {
            new Label{ Text = "Name:", FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)), HorizontalOptions = LayoutOptions.FillAndExpand },
            nameLabel
          }
        },
        ...
        navigateButton
      }
    };
  }

  async void OnNavigateButtonClicked (object sender, EventArgs e)
  {
    await Navigation.PopAsync ();
  }
}

次のスクリーンショットに示すように、一連の Label コントロールによってデータがページに表示されます。

Data Passed Through a BindingContext

データバインディングの詳細については、「Data Binding Basics」 (データバインディングの基礎) を参照してください。

Navigation プロパティは、ナビゲーションスタックのページを取得する NavigationStack プロパティを公開します。 Xamarin.Forms はナビゲーションスタックへのアクセスを維持していますが、Navigation プロパティには、ページを挿入または削除することでスタックを操作するための InsertPageBefore および RemovePage メソッドが用意されています。

次の図に示すように、InsertPageBefore メソッドによって、ナビゲーションスタック内の指定されたページが既存の指定されたページの前に挿入されます。

Inserting a Page in the Navigation Stack

次の図に示すように、RemovePage メソッドによって、指定されたページがナビゲーションスタックから削除されます。

Removing a Page from the Navigation Stack

これらのメソッドを使用すると、ログインに成功した後に、ログインページを新しいページに置き換えるなど、カスタムのナビゲーションエクスペリエンスを実現できます。次のコード例はこのシナリオを示しています。

async void OnLoginButtonClicked (object sender, EventArgs e)
{
  ...
  var isValid = AreCredentialsCorrect (user);
  if (isValid) {
    App.IsUserLoggedIn = true;
    Navigation.InsertPageBefore (new MainPage (), this);
    await Navigation.PopAsync ();
  } else {
    // Login failed
  }
}

ユーザーの資格情報が正しい場合、MainPage インスタンスは、ナビゲーションスタック内の現在のページの前に挿入されます。次に PopAsync メソッドによってナビゲーションスタックから現在のページが削除され、MainPage インスタンスがアクティブページになります。

すべての Xamarin.FormsView は、NavigationPage のナビゲーションバーに表示できます。これを実現するには、NavigationPage.TitleView 添付プロパティを View に設定します。この添付プロパティは任意の Page に設定できます。また、Page が NavigationPage にプッシュされると、NavigationPage ではプロパティの値が反映されます。

タイトルビューサンプルから取り上げた次の例は、NavigationPage.TitleView 添付プロパティを XAML から設定する方法を示しています。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigationPageTitleView.TitleViewPage">
    <NavigationPage.TitleView>
        <Slider HeightRequest="44" WidthRequest="300" />
    </NavigationPage.TitleView>
    ...
</ContentPage>

次に示すのは、同等の C# コードです。

public class TitleViewPage : ContentPage
{
    public TitleViewPage()
    {
        var titleView = new Slider { HeightRequest = 44, WidthRequest = 300 };
        NavigationPage.SetTitleView(this, titleView);
        ...
    }
}

この結果、NavigationPage でナビゲーションバーに Slider が表示されます:

重要

ビューのサイズが WidthRequest およびHeightRequest のプロパティで指定されていない場合、多くのビューはナビゲーションバーに表示されません。または、HorizontalOptions および VerticalOptions プロパティを適切な値に設定してビューを StackLayout にラップすることができます。

Layout クラスは View クラスから派生しているため、複数のビューを含むレイアウトクラスを表示するように TitleView 添付プロパティを設定することができます。 iOS およびユニバーサル Windows プラットフォーム (UWP) では、ナビゲーションバーの高さを変更できないため、ナビゲーションバーに表示されるビューがナビゲーションバーの既定サイズより大きい場合、クリップが発生します。一方 Android では、NavigationPage.BarHeight バインディング可能プロパティを新しい高さを表す double に設定することで、ナビゲーションバーの高さを変更できます。詳細については、「Setting the Navigation Bar Height on a NavigationPage」(NavigationPage でナビゲーションバーの高さを設定する) を参照してください。

また、ナビゲーションバーにコンテンツの一部を配置し、ナビゲーションバーと色を合わせたビューの一部をページコンテンツの上部に配置して、拡張ナビゲーションバーを提案することもできます。さらに、iOS では、NavigationPage.HideNavigationBarSeparator バインド可能プロパティを true に設定することで、ナビゲーションバーの下部にあるセパレーターと影を削除できます。詳細については、「Hiding the Navigation Bar Separator on a NavigationPage」(NavigationPage でナビゲーションバーのセパレーターを非表示にする) を参照してください。

Note

BackButtonTitle、Title、TitleIcon、TitleView のプロパティのいずれでも、ナビゲーションバー上の領域を占める値を定義できます。ナビゲーションバーのサイズはプラットフォームや画面サイズによって変わりますが、これらのプロパティをすべて設定すると、領域が限られているために競合が発生します。これらのプロパティの組み合わせを使用するのではなく、TitleView プロパティのみ設定して目的のナビゲーションバーのデザインを改善することをお勧めします。

制限事項

NavigationPage のナビゲーションバーに View を表示するときに注意が必要な制限事項がいくつかあります。

iOS では、NavigationPage のナビゲーションバーに配置されるビューは、大きなタイトルが有効かどうかによって表示される位置が変わります。大きなタイトルを有効にする方法については、「Displaying Large Titles」(大きなタイトルの表示) を参照してください。
Android では、NavigationPage のナビゲーションバーにビューを配置することは、app-compat を使用するアプリでのみ実現できます。
ListView や TableView などの大きくて複雑なビューを NavigationPage のナビゲーションバーに配置することはお勧めしません。

ナビゲーションを実行する

ルートページを作成する

ナビゲーションスタックにページをプッシュする

ナビゲーションスタックからページをポップする

ページ遷移をアニメーション化する

ナビゲーション時にデータを渡す

ページコンストラクターを介してデータを渡す

BindingContext を介してデータを渡す

ナビゲーションスタックの操作

ナビゲーションバーにビューを表示する

制限事項

その他のリソース

階層ナビゲーション

ナビゲーションを実行する

ルート ページを作成する

ナビゲーション スタックにページをプッシュする

ナビゲーション スタックからページをポップする

ページ遷移をアニメーション化する

ナビゲーション時にデータを渡す

ページ コンストラクターを介してデータを渡す

BindingContext を介してデータを渡す

ナビゲーション スタックの操作

ナビゲーション バーにビューを表示する

制限事項

関連リンク

その他のリソース

ルートページを作成する

ナビゲーションスタックにページをプッシュする

ナビゲーションスタックからページをポップする

ページコンストラクターを介してデータを渡す

ナビゲーションスタックの操作

ナビゲーションバーにビューを表示する