Použití stránek s kartami se stránkami v navigačním zásobníku

  • 5 min

Kontextová navigace a navigace na záložkách jsou jen dvěma způsoby, jak uživateli umožnit navigaci v datech prezentovaných aplikací. Další technikou je použití navigace v zásobníku. Každý typ navigace je vhodný pro různé typy vztahů mezi stránkami.

Navigaci v zásobníku můžete použít v kombinaci s informačními rámečky a kartami. V této lekci si stručně projdeme rozdíly mezi tabulátorem a navigacemi v informačním rámečku a navigací zásobníku a pak se naučíme vytvářet aplikace, které kombinují obě techniky.

Kontrola informačních panelů a navigace na kartách

Kontextové rámečky a navigace na kartách poskytují užitečný mechanismus, který umožňuje uživateli vybrat, která stránka se má zobrazit najednou. Uživatel přejde na stránku jednoduše tak, že vybere příslušnou kartu nebo kontextovou položku. Tato forma navigace je užitečná pro datové položky, které spolu mají partnerský vztah. V aplikaci astronomie, Slunce, Měsíc a O stránkách jsou všichni peerové; mezi nimi není žádný přímý vztah.

Pro hierarchická data ale může být vhodnější navigace v zásobníku. Navigace v zásobníku umožňuje uživateli přejít k podrobnostem řady stránek, kde další stránka v zásobníku poskytuje podrobnější zobrazení vybrané položky na předchozí stránce.

Zvažte následující scénář:

Do aplikace astronomie, která zobrazuje astronomické tělesa, přidáte novou stránku. Chcete, aby uživatel klepl na jeden z těchto nebeského objektu a zobrazil o něm informace. Stránka s výpisem astronomických těles by byla nejlépe prezentována na stránce karty jako na stejné straně měsíční fáze a východů stránek. Podrobné informace o astronomickém těle jsou lépe prezentovány jako série kroků pomocí navigace zásobníku. Tento mechanismus také umožňuje uživateli vrátit se na hlavní stránku astronomických těles klepnutím na tlačítko Zpět.

Prostředí .NET Multi-Platform App UI (MAUI) zahrnuje navigační prostředí založené na identifikátorech URI, které používá trasy k navigaci na libovolnou stránku v aplikaci, aniž by bylo nutné dodržovat nastavenou navigační hierarchii. Kromě toho umožňuje navigaci vzad, aniž byste museli navštěvovat všechny stránky v navigačním zásobníku.

Třída Shell definuje následující vlastnosti související s navigacemi:

  • BackButtonBehavior, typu BackButtonBehavior, připojená vlastnost, která definuje chování tlačítka Zpět.
  • CurrentItem, typu ShellItem, aktuálně vybraná položka.
  • CurrentPage, typu Page, aktuálně prezentovaná stránka.
  • CurrentState, typu ShellNavigationState, aktuální navigační stav Shell.
  • Current, typu Shell, přetypovaný alias pro Application.Current.MainPage.

Navigace se provádí vyvoláním GoToAsync metody z Shell třídy.

Trasy

Navigace se provádí v aplikaci Prostředí zadáním identifikátoru URI, na který chcete přejít. Identifikátory URI navigace můžou mít tři komponenty:

  • Trasa, která definuje cestu k obsahu, který existuje jako součást hierarchie vizuálů prostředí.
  • Stránka. Stránky, které v hierarchii vizuálů prostředí neexistují, je možné do navigačního zásobníku odeslat odkudkoli v aplikaci Shell. Například stránka podrobností není definována v hierarchii vizuálů prostředí, ale podle potřeby ji lze vložit do navigačního zásobníku.
  • Jeden nebo více parametrů dotazu. Parametry dotazu jsou parametry, které lze předat na cílovou stránku při navigaci.

Pokud navigační identifikátor URI obsahuje všechny tři komponenty, struktura je: //route/page?queryParameters.

Registrace tras

Trasy lze definovat pro FlyoutItem, , TabBarTaba ShellContent objekty prostřednictvím jejich Route vlastností:

<Shell ...>
    <FlyoutItem ... 
        Route = "astronomy">
        <ShellContent ...
            Route="moonphase" />
        <ShellContent ...
            Route="sunrise" />
    </FlyoutItem>
    <FlyoutItem>
        <ShellContent ...
            Route="about" />
    </FlyoutItem>
</Shell>

Pokud chcete přejít na trasu moonphase , absolutní identifikátor URI trasy je //astronomy/moonphase

Registrace podrobných tras

V konstruktoru Shell podtřídy nebo v jakémkoli jiném umístění, které se spouští před vyvoláním trasy, můžete trasu explicitně zaregistrovat pomocí Routing.RegisterRoute metody pro všechny stránky podrobností, které nejsou reprezentovány ve vizuální hierarchii prostředí.

Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));

Chcete-li přejít na AstronomicalBodyPagepříkaz , jeden by pak vyvolat:

await Shell.Current.GoToAsync("astronomicalbodydetails");`

Zpětná navigace

Zpětnou navigaci lze provést zadáním "." jako argumentu GoToAsync metody:

await Shell.Current.GoToAsync("..");

Předávání dat

Primitivní data lze předat jako parametry dotazu založené na řetězci při provádění programové navigace založené na identifikátoru URI. Předejte data připojením ? za trasou, následovanou ID =parametru dotazu a hodnotou:

string celestialName = "moon";

await Shell.Current.GoToAsync($"astronomicalbodydetails?bodyName={celestialName}");

V tomto příkladu je trasa astronomickébodydetails, parametr je bodyName a hodnota je z proměnné celestialName.

Načítání dat

Navigační data lze přijmout dekódováním přijímající třídy pomocí QueryPropertyAttribute parametru dotazu založeného na řetězci a parametru navigace založeného na objektech:

[QueryProperty(nameof(AstroName), "bodyName")]
public partial class AstronomicalBodyPage : ContentPage
{
    string astroName;
    public string AstroName
    {
        get => astroName;
        set
        {
            astroName = value;
        }
    }

    ...
}

V tomto příkladu první argument pro QueryPropertyAttribute určuje název vlastnosti, která přijímá data, s druhým argumentem určujícím ID parametru.

Kontrola znalostí

1.

Jak odesíláte data na stránku při použití trasy založené na prostředí .NET MAUI Shell?