Hierarchická navigace

Download Sample Stažení ukázky

Třída NavigationPage poskytuje hierarchické navigační prostředí, ve kterém může uživatel procházet stránkami, předávat a dál, podle potřeby. Třída implementuje navigaci jako v zásobníku objektů stránky za poslední v, First-out (LIFO). Tento článek ukazuje, jak použít třídu NavigationPage k provedení navigace v zásobníku stránek.

Chcete-li přejít z jedné stránky na jinou, aplikace vloží novou stránku do navigačního zásobníku, kde se stane aktivní stránkou, jak je znázorněno v následujícím diagramu:

Pushing a Page to the Navigation Stack

Chcete-li se vrátit zpět na předchozí stránku, aplikace zobrazí aktuální stránku z navigačního zásobníku a nová stránka na nejvyšší úrovni bude aktivní stránkou, jak je znázorněno na následujícím obrázku:

Popping a Page from the Navigation Stack

Navigační metody jsou zpřístupněny Navigation vlastností u všech Page odvozených typů. Tyto metody poskytují možnost předávat stránky do navigačního zásobníku, vkládat stránky z navigačního zásobníku a provádět manipulaci s zásobníkem.

Provádění navigace

V hierarchické navigaci NavigationPage je třída použita k procházení zásobníku ContentPage objektů. Následující snímky obrazovky ukazují hlavní součásti nástroje NavigationPage na jednotlivých platformách:

NavigationPage Components

Rozložení NavigationPage je závislé na platformě:

  • V systému iOS se navigační panel nachází v horní části stránky, která zobrazuje název a má tlačítko zpět , které se vrátí na předchozí stránku.
  • V Androidu se navigační panel nachází v horní části stránky, která zobrazuje název, ikonu a tlačítko zpět , které se vrátí na předchozí stránku. Ikona je definována v [Activity] atributu, který upraví MainActivity třídu v projektu specifickém pro platformu Android.
  • v Univerzální platforma Windows se navigační panel nachází v horní části stránky, která zobrazuje název.

Na všech platformách se hodnota Page.Title Vlastnosti zobrazí jako nadpis stránky. Kromě toho IconColor může být vlastnost nastavena na hodnotu Color , která je použita na ikonu na navigačním panelu.

Poznámka

Doporučuje se, aby NavigationPage měl být vyplněn pouze s ContentPage instancemi.

Vytvoření kořenové stránky

První stránka přidaná do navigačního zásobníku je označována jako Kořenová stránka aplikace a následující příklad kódu ukazuje, jak to lze provést:

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

Tím dojde k tomu, že se instance vloží do Page1XamlContentPage navigačního zásobníku, kde se bude jednat o aktivní stránku a kořenovou stránku aplikace. Zobrazuje se na následujících snímcích obrazovky:

Root Page of Navigation Stack

Poznámka

RootPageVlastnost NavigationPage instance poskytuje přístup k první stránce v navigačním zásobníku.

Vkládání stránek do navigačního zásobníku

Chcete-li přejít na Page2Xaml , je nutné vyvolat PushAsync metodu pro Navigation vlastnost aktuální stránky, jak je znázorněno v následujícím příkladu kódu:

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

Tím dojde Page2Xaml k tomu, že instance bude vložena do navigačního zásobníku, kde se bude jednat o aktivní stránku. Zobrazuje se na následujících snímcích obrazovky:

Page Pushed onto Navigation Stack

Při PushAsync vyvolání metody dojde k následujícím událostem:

  • Volání stránky PushAsyncOnDisappearing vyvolané přepsání.
  • Stránka, na kterou se přechází, má OnAppearing vyvolané přepsání.
  • PushAsyncÚloha se dokončí.

Přesné pořadí, ve kterém se tyto události vyskytují, je ale závislé na platformě. Další informace najdete v kapitole 24 knihy Charles Petzold .

Poznámka

Volání OnDisappearing a OnAppearing přepsání nelze považovat za zaručená označení navigace stránky. Například v iOS se OnDisappearing přepsání volá na aktivní stránce, když se aplikace ukončí.

Vyjímání stránek z navigačního zásobníku

Aktivní stránku můžete z navigačního zásobníku odblokovat stisknutím tlačítka zpět na zařízení, bez ohledu na to, jestli se jedná o fyzické tlačítko na zařízení nebo na tlačítku na obrazovce.

Chcete-li se programově vrátit na původní stránku, Page2Xaml instance musí vyvolat PopAsync metodu, jak je znázorněno v následujícím příkladu kódu:

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

Tím dojde Page2Xaml k odebrání instance z navigačního zásobníku, přičemž nová vrchní stránka se stane aktivní stránkou. Při PopAsync vyvolání metody dojde k následujícím událostem:

  • Volání stránky PopAsyncOnDisappearing vyvolané přepsání.
  • Vrácená stránka má své OnAppearing vyvolané přepsání.
  • PopAsyncÚloha se vrátí.

Přesné pořadí, ve kterém se tyto události vyskytují, je ale závislé na platformě. Další informace najdete v kapitole 24 knihy Charles Petzold .

Stejně jako PushAsync metody a PopAsync , Navigation vlastnost každé stránky poskytuje také PopToRootAsync metodu, která je uvedena v následujícím příkladu kódu:

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

Tato metoda se dostaví jako kořen Page z navigační hromádky, takže se Kořenová stránka aplikace stane aktivní stránkou.

Animace přechodů stránky

NavigationVlastnost každé stránky obsahuje také přepsané metody push a pop, které obsahují boolean parametr, který určuje, zda se má během navigace zobrazit animace stránky, jak je znázorněno v následujícím příkladu kódu:

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);
}

Nastavení boolean parametru pro false zákaz animace přechodu na stránce, při nastavení parametru pro true Povolení animace přechodu na stránku, za předpokladu, že je podporována základní platformou. Metody push a pop, které nemají tento parametr, ale ve výchozím nastavení tuto animaci povolují.

Předávání dat při navigaci

Někdy je nutné, aby stránka před navigací předávala data na jinou stránku. Dva způsoby, jak toho dosáhnout, jsou předávání dat prostřednictvím konstruktoru stránky a nastavením nové stránky BindingContext na data. Každý z nich bude nyní projednán.

Předávání dat prostřednictvím konstruktoru stránky

Nejjednodušším způsobem, jak předat data na jinou stránku během navigace, je pomocí parametru konstruktoru stránky, který je zobrazen v následujícím příkladu kódu:

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

Tento kód vytvoří MainPage instanci s předáním aktuálního data a času ve formátu ISO8601, který je zabalen v NavigationPage instanci.

MainPageInstance obdrží data prostřednictvím parametru konstruktoru, jak je znázorněno v následujícím příkladu kódu:

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

Data se pak zobrazí na stránce nastavením Label.Text vlastnosti, jak je znázorněno na následujících snímcích obrazovky:

Data Passed Through a Page Constructor

Předávání dat prostřednictvím BindingContext

Alternativním přístupem k předávání dat na jinou stránku během navigace je nastavení nové stránky BindingContext na data, jak je znázorněno v následujícím příkladu kódu:

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);
}

Tento kód nastaví BindingContextSecondPage instanci instance na Contact instanci a pak přejde na SecondPage .

SecondPagePotom používá datovou vazbu k zobrazení Contact dat instance, jak je znázorněno v následujícím příkladu kódu XAML:

<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>

Následující příklad kódu ukazuje, jak lze datovou vazbu provést v jazyce 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 ();
  }
}

Data se pak zobrazí na stránce řadou Label ovládacích prvků, jak je znázorněno na následujících snímcích obrazovky:

Data Passed Through a BindingContext

Další informace o datové vazbě najdete v tématu základy datových vazeb.

Manipulace s navigačním zásobníkem

NavigationVlastnost zpřístupňuje NavigationStack vlastnost, ze které lze získat stránky v navigačním zásobníku. I když Xamarin.Forms udržuje přístup k navigačnímu zásobníku, Navigation vlastnost poskytuje InsertPageBefore metody a RemovePage pro manipulaci s zásobníkem vložením stránek nebo jejich odebráním.

InsertPageBeforeMetoda vloží určenou stránku do navigačního zásobníku před existující určenou stránku, jak je znázorněno v následujícím diagramu:

Inserting a Page in the Navigation Stack

RemovePageMetoda odstraní určenou stránku z navigačního zásobníku, jak je znázorněno v následujícím diagramu:

Removing a Page from the Navigation Stack

Tyto metody umožňují vlastní navigační prostředí, jako je například nahrazení přihlašovací stránky novou stránkou, po úspěšném přihlášení. Následující příklad kódu ukazuje tento scénář:

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
  }
}

Za předpokladu, že přihlašovací údaje uživatele jsou správné, MainPage instance je vložena do navigačního zásobníku před aktuální stránkou. PopAsyncMetoda pak odebere aktuální stránku z navigačního zásobníku, přičemž MainPage instance se stane aktivní stránkou.

Zobrazení zobrazení na navigačním panelu

Jakékoli Xamarin.FormsView lze zobrazit v navigačním panelu NavigationPage . Toho lze dosáhnout nastavením NavigationPage.TitleView připojené vlastnosti na View . Tato připojená vlastnost může být nastavena na libovolnou Page a když Page je vložena do NavigationPage ,, NavigationPage bude brát ohled na hodnotu vlastnosti.

Následující příklad, který je pořízen z Ukázka zobrazení názvu, ukazuje, jak nastavit připojenou vlastnost z 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>

Zde je ekvivalentní kód jazyka C#:

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

Výsledkem je, že se Slider zobrazí v navigačním panelu na NavigationPage :

Slider TitleView

Důležité

Mnoho zobrazení se v navigačním panelu nezobrazí, pokud velikost zobrazení není zadána s WidthRequestHeightRequest vlastnostmi a. Alternativně lze zobrazení zabalit StackLayout s HorizontalOptionsVerticalOptions vlastnostmi a nastavenými na příslušné hodnoty.

Všimněte si, že vzhledem k tomu, že Layout Třída je odvozena z View třídy, TitleView lze vlastnost připojené nastavit tak, aby zobrazila třídu rozložení, která obsahuje více zobrazení. v systémech iOS a Univerzální platforma Windows (UWP) nejde změnit výšku navigačního panelu, takže pokud je zobrazení zobrazené na navigačním panelu větší než výchozí velikost navigačního panelu, dojde k jeho oříznutí. V systému Android však lze změnit výšku navigačního panelu nastavením NavigationPage.BarHeight vlastnosti BIND na hodnotu double představující novou výšku. Další informace najdete v tématu nastavení výšky navigačního panelu na NavigationPage.

Případně můžete rozšířit navigační panel tak, že umístíte nějaký obsah do navigačního panelu a některé v zobrazení v horní části obsahu stránky, který barevně odpovídá navigačnímu panelu. Kromě toho je možné v systému iOS odebrat oddělovací čáru a stín, která je v dolní části navigačního panelu, nastavením NavigationPage.HideNavigationBarSeparator vlastnosti BIND na true . Další informace najdete v tématu skrytí oddělovače navigačních panelů na NavigationPage.

Poznámka

Všechny BackButtonTitle vlastnosti , , a mohou definovat TitleTitleIconTitleView hodnoty, které zabírají místo na navigačním panelu. I když se velikost navigačního panelu liší podle velikosti platformy a obrazovky, nastavení všech těchto vlastností bude mít za následek konflikty kvůli omezenému dostupnému prostoru. Místo toho, abyste se pokusili použít kombinaci těchto vlastností, můžete zjistit, že můžete dosáhnout požadovaného návrhu navigačního panelu tím, že nastavíte pouze TitleView vlastnost .

Omezení

Existuje několik omezení, o které byste měli vědět při zobrazení v View navigačním panelu NavigationPage :

  • V iOSu se zobrazení umístěná v navigačním panelu zobrazí na jiné pozici v závislosti na tom, jestli jsou povolené NavigationPage velké nadpisy. Další informace o povolení velkých názvů najdete v tématu Zobrazení velkých názvů.
  • V Androidu lze umístění zobrazení do navigačního panelu provádět pouze v aplikacích, NavigationPage které používají kompatibilitu aplikací.
  • Nedoporučuje se do navigačního panelu v souboru umístit velká a složitá zobrazení, jako je ListViewTableView a NavigationPage .