Pagina's met tabbladen gebruiken met pagina's in de navigatiestack

  • 5 minuten

Flyout- en tabnavigatie zijn slechts twee manieren om een gebruiker in staat te stellen door de gegevens te navigeren die door een app worden gepresenteerd. Een andere techniek is het gebruik van stacknavigatie. Elk type navigatie is geschikt voor verschillende soorten relaties tussen pagina's.

U kunt stacknavigatie gebruiken in combinatie met flyouts en tabbladen. In deze les bekijken we kort de verschillen tussen tab- en flyoutnavigatie en stacknavigatie en leren we vervolgens hoe u apps bouwt die beide technieken combineren.

Controle van flyouts en tabnavigatie

Flyouts en tabnavigatie bieden een handig mechanisme om de gebruiker in staat te stellen te selecteren welke pagina op elk gewenst moment moet worden weergegeven. De gebruiker navigeert naar een pagina door het betreffende tabblad of flyout-item te selecteren. Deze vorm van navigatie is handig voor gegevensitems die een peerrelatie met elkaar hebben. In de astronomie-app zijn de pagina's Zon, Maan en Over allemaal peers; er is geen directe relatie tussen hen.

Voor hiërarchische gegevens is stacknavigatie echter mogelijk geschikter. Met stacknavigatie kan de gebruiker inzoomen op een reeks pagina's, waarbij de volgende pagina in de stack een gedetailleerdere weergave biedt van een geselecteerd item op de vorige pagina.

Bekijk het volgende scenario:

U voegt een nieuwe pagina toe aan de astronomie-app die astronomische lichamen weergeeft. U wilt dat de gebruiker op een van deze hemelsobjecten tikt en vervolgens informatie over deze objecten weergeeft. De pagina met de astronomische lichamen zou het beste worden weergegeven op een tabbladpagina als een niveau van de maanfase en zonsopgangpagina's. De gedetailleerde informatie over het astronomische lichaam wordt beter gepresenteerd als een reeks stappen met behulp van stacknavigatie. Met dit mechanisme kan de gebruiker ook terugkeren naar de hoofdpagina van astronomische lichamen door op een knop Terug te tikken.

De .NET MULTI-platform App UI -shell (MAUI) bevat een navigatie-ervaring op basis van URI die gebruikmaakt van routes om naar een pagina in de app te navigeren, zonder dat u een ingestelde navigatiehiërarchie hoeft te volgen. Bovendien kunt u achteruit navigeren zonder dat u alle pagina's op de navigatiestack hoeft te bezoeken.

De Shell-klasse definieert de volgende navigatie-gerelateerde eigenschappen:

  • BackButtonBehavior, van het type BackButtonBehavior, een gekoppelde eigenschap die het gedrag van de knop Vorige definieert.
  • CurrentItem, van het type ShellItem, het geselecteerde item.
  • CurrentPage, van het type Page, de momenteel gepresenteerde pagina.
  • CurrentState, van het type ShellNavigationState, de huidige navigatiestatus van de Shell.
  • Current, van het type Shell, een type-casted alias voor Application.Current.MainPage.

Navigatie wordt uitgevoerd door de GoToAsync methode vanuit de Shell klasse aan te roepen.

Routes

Navigatie wordt uitgevoerd in een Shell-app door een URI op te geven waar u naartoe wilt navigeren. Navigatie-URI's kunnen drie onderdelen hebben:

  • Een route, die het pad naar inhoud definieert dat bestaat als onderdeel van de Shell-visualhiërarchie.
  • Een pagina. Pagina's die niet aanwezig zijn in de Shell-visualhiërarchie, kunnen vanaf elke locatie in een Shell-app naar de navigatiestack worden gepusht. Een detailpagina is bijvoorbeeld niet gedefinieerd in de Shell-visualhiërarchie, maar kan naar behoefte naar de navigatiestack worden gepusht.
  • Een of meer queryparameters. Queryparameters zijn parameters die kunnen worden doorgegeven aan de doelpagina tijdens het navigeren.

Wanneer een navigatie-URI alle drie de onderdelen bevat, is de structuur: //route/page?queryParameters

Routes registreren

Routes kunnen worden gedefinieerd op FlyoutItem, TabBar, Taben ShellContent objecten via hun Route eigenschappen:

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

Als u naar de moonphase route wilt navigeren, is de absolute route-URI //astronomy/moonphase

Detailroutes registreren

In de Shell subklasseconstructor of een andere locatie die wordt uitgevoerd voordat een route wordt aangeroepen, kunt u expliciet een route registreren met behulp van de Routing.RegisterRoute methode voor detailpagina's die niet worden weergegeven in de Shell-visualhiërarchie.

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

Als u naar het AstronomicalBodyPagebestand wilt navigeren, wordt het volgende aangeroepen:

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

Navigatie naar achteren

Achterwaartse navigatie kan worden uitgevoerd door '.' op te geven als argument voor de GoToAsync methode:

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

Gegevens doorgeven

Primitieve gegevens kunnen worden doorgegeven als queryparameters op basis van tekenreeksen bij het uitvoeren van programmatische navigatie op basis van URI. Geef de gegevens door door ? na een route, gevolgd door een queryparameter-id en =een waarde:

string celestialName = "moon";

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

In dit voorbeeld is de route astronomischbodydetails, de parameter bodyName en de waarde is van de variabelecelestialName.

Gegevens ophalen

Navigatiegegevens kunnen worden ontvangen door de ontvangende klasse te decoreren met een voor elke queryparameter op basis van tekenreeksen QueryPropertyAttribute en navigatieparameter op basis van objecten:

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

    ...
}

In dit voorbeeld geeft het eerste argument voor QueryPropertyAttribute de naam op van de eigenschap die de gegevens ontvangt, met het tweede argument waarmee de parameter-id wordt opgegeven.

Kennis testen

1.

Hoe verzendt u gegevens naar een pagina wanneer u op route gebaseerde navigatie op basis van .NET MAUI Shell gebruikt?