Verwenden von Registerkartenseiten mit Seiten im Navigationsstapel

Flyout- und Registerkartennavigation sind nur zwei Möglichkeiten, um einem Benutzer die Navigation durch die von einer App präsentierten Daten zu ermöglichen. Eine weitere Technik ist die Verwendung von Stapelnavigation. Jeder Navigationstyp eignet sich für verschiedene Typen von Beziehungen zwischen Seiten.

Sie können die Stapelnavigation in Kombination mit Flyouts und Registerkarten verwenden. In dieser Lektion wiederholen wir kurz die Unterschiede zwischen Registerkarten- und Flyoutnavigation und Stapelnavigation und erfahren dann, wie man Apps erstellt, die beide Techniken kombinieren.

Überprüfen von Flyouts und Registerkartennavigation

Flyouts und Registerkartennavigation bieten einen nützlichen Mechanismus, mit dem der Benutzer jederzeit auswählen kann, welche Seite angezeigt werden soll. Der Benutzer navigiert zu einer Seite, indem er einfach das entsprechende Registerkarten- oder Flyoutelement auswählt. Diese Art der Navigation ist nützlich für Datenelemente, die eine Peerbeziehung miteinander haben. In der Astronomie-App sind die Seiten „Sonne“, „Mond“ und „Info“ alle gleichrangig; es gibt keine direkte Beziehung zwischen ihnen.

Für hierarchische Daten ist die Stapelnavigation jedoch möglicherweise besser geeignet. Mithilfe der Stapelnavigation kann der Benutzer einen Drilldown für eine Reihe von Seiten ausführen, wobei die nächste Seite im Stapel eine detailliertere Ansicht eines auf der vorherigen Seite ausgewählten Elements bietet.

Als Beispiel dient das folgende Szenario:

Sie fügen der Astronomie-App eine neue Seite hinzu, auf der Himmelskörper angezeigt werden. Sie möchten, dass der Benutzer auf einen dieser Himmelskörper tippt und dann Informationen dazu anzeigt. Die Seite, auf der die Himmelskörper aufgeführt sind, wird am besten auf einer Registerkartenseite als gleichgeordnetes Element der Mondphasen- und Sonnenaufgangsseiten dargestellt. Die detaillierten Informationen über den astronomischen Körper sind besser als eine Reihe von Schritten mithilfe der Stapelnavigation dargestellt. Dieser Mechanismus ermöglicht es dem Benutzer auch, zur Hauptseite der Himmelskörper zurückzukehren, indem er auf eine „Zurück“-Schaltfläche tippt.

Navigieren mit Stapelnavigation

Die .NET MAUI-Shell (Multi-Platform App UI) enthält eine URI-basierte Navigationsoberfläche, die Routen verwendet, um zu einer beliebigen Seite in der App zu navigieren, ohne einer festgelegten Navigationshierarchie folgen zu müssen. Darüber hinaus bietet es die Möglichkeit, rückwärts zu navigieren, ohne alle Seiten im Navigationsstapel besuchen zu müssen.

Die Shell-Klasse definiert die folgenden navigationsbezogenen Eigenschaften:

• BackButtonBehavior vom Typ BackButtonBehavior: eine angefügte Eigenschaft, die das Verhalten der Zurück-Schaltfläche definiert.
• CurrentItem, vom Typ ShellItem: Das aktuell ausgewählte Element
• CurrentPage, vom Typ Page: die aktuell dargestellte Seite.
• CurrentState vom Typ ShellNavigationState: der aktuelle Navigationszustand der Shell.
• Current vom Typ Shell: ein Typ-umgewandelter Alias für Application.Current.MainPage.

Navigation erfolgt durch Aufrufen der GoToAsync-Methode aus der Shell-Klasse.

Routen

Die Navigation erfolgt in einer Shell-App durch Angabe eines URI, zu dem navigiert werden soll. Navigation-URIs können drei Komponenten aufweisen:

• Eine Route, die den Pfad zu Inhalt definiert, der als Teil der visuellen Shell-Hierarchie vorhanden ist.
• Eine Seite. Seiten, die in der visuellen Hierarchie der Shell nicht vorhanden sind, können von praktisch überall in einer Shell-App in den Navigationsstapel verschoben werden. Beispielsweise wird eine Detailseite nicht in der visuellen Shellhierarchie definiert, sondern kann nach Bedarf in den Navigationsstapel verschoben werden.
• Mindestens ein Abfrageparameter. Abfrageparameter sind Parameter, die während der Navigation an die Zielseite übergeben werden können.

Wenn ein Navigations-URI alle drei Komponenten enthält, lautet die Struktur „//route/page?queryParameters“.

Registrieren von Routen

Routen können für FlyoutItem-, TabBar-, Tab- und ShellContent-Objekte über ihre Route-Eigenschaften definiert werden:

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

Um zur moonphase-Route zu navigieren, ist der absolute Routen-URI //astronomy/moonphase

Registrieren von Detailrouten

Im Shell-Unterklassenkonstruktor oder an einem anderen Speicherort, der vor dem Aufrufen einer Route ausgeführt wird, können Sie für alle Detailseiten eine explizite Route mit der Routing.RegisterRoute-Methode registrieren, die nicht in der visuellen Shell-Hierarchie dargestellt werden.

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

Um zu AstronomicalBodyPage zu navigieren, würde dann Folgendes aufgerufen:

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

Rückwärtsnavigation

Die Rückwärtsnavigation kann erfolgen, indem Sie ".." als Argument zur GoToAsync-Methode hinzufügen.

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

Übergeben von Daten

Primitive Daten können als zeichenfolgenbasierte Abfrageparameter übergeben werden, wenn eine URI-basierte programmgesteuerte Navigation ausgeführt wird. Übergeben Sie die Daten, indem Sie ? an eine Route anfügen, gefolgt von einer Abfrageparameter-ID (=) und einem Wert:

string celestialName = "moon";

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

In diesem Beispiel ist die Route astronomischbodydetails, der Parameter ist bodyName, und der Wert stammt aus der Variablen celestialName.

Abrufen von Daten

Navigationsdaten können empfangen werden, indem die empfangende Klasse mit einem QueryPropertyAttribute für jeden zeichenfolgenbasierten Abfrageparameter und objektbasierten Navigationsparameter dekoriert wird:

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

    ...
}

In diesem Beispiel gibt das erste Argument für QueryPropertyAttribute den Namen der Eigenschaft, die die Daten empfängt, und das zweite Argument die Parameter-ID an.