Navigation

Das .NET MAUI App Template nutzt unseren ShellNavigator. Dies ist eine Helper-Klasse, welche alle Funktionen rund um die Shell-Navigation in .NET MAUI vereint.

Verfügbare Navigationsarten

Parameterlose Navigation

Grundsätzlich wird unterschieden, ob der Navigation keine, ein oder mehrere Parameter mit der Navigation mitgegeben werden. Eine parameterlose Navigation wechselt einfach von der aktuellen Seite zur der angegeben Seite.

Beispiel einer parameterlosen Navigation

_ = await ShellNavigator.Instance.GoToAsync(
    $"///{ShellNavigator.Instance.RootPage}",
    false,
    DeviceInfo.Platform == DevicePlatform.Android ? 150 : 50
    );

Hier wird die aus dem LoadingPageViewModel zur definierten Startseite weitergeleitet. Dabei wird der Name der zu navigierenden Seite, sowie angegeben, ob der Vorgang animiert (hier false) und ob eine Wartezeit nötig ist.

Navigation mit QueryParameters

Seit .NET MAUI können nun auch komplexe Objekte (query parameters) mit übergeben werden.

Beispiel einer Navigation mit Parametern

_ = await ShellNavigator.Instance.GoToAsync(ShellRoute.NewStockToDepotModalPage, new Dictionary<string, object> {
    { "depot", CurrentDepot },
});

In diesem Beispiel führen wir eine Navigation aus um eine neue Aktie zu einem Depot hinzuzufügen. Als Parameter wird hier immer ein Wörterbuch mit einem Schlüssel (Name des Parameters) und ein Objekt übergeben. In diesem Fall übergeben wir das Depot, in welches wir eine neue Aktie einfügen möchten.

Das Empfänger ViewModel muss jedoch auf diesen Parameter vorbereitet sein. Dies erfolgt mit dem [QueryProperty…] Attribute, wie unten im Beispiel zu sehen.

[QueryProperty(nameof(SelectedDepot), "depot")]
public partial class NewStockToDepotModalPageViewModel : AppViewModel// BaseViewModel
{
    #region Parameters
    [ObservableProperty]
    protected Depot selectedDepot;
    #endregion
}   

Erfolgt eine Navigation mit dem Parameter „depot“, so wird dieser beim Aufrufen an das ViewModel übergeben und gesetzt.

Zurück navigieren

Das Ganze funktioniert auch Rückwärts, sprich wenn der Benutzer eine Seite verlässt und dazu den „Zurück“-Button nutzt. Auch hier kann ein Parameter rückwärts an den vorherigen Aufrufer übergeben werden. Dies ist vor allem dann sinnvoll, wenn in der aktuellen Ansicht zum Beispiel eine neue Aktie erstellt wurde und diese gleich in der vorherigen Ansicht verwendet werden soll.

_ = await ShellNavigator.Instance.GoToAsync($"..", new Dictionary<string, object>() { { "stockfound", SelectedItem } });

Im obigen Beispiel wird durch die zwei Punkte „..“ eine Rückwärtsnavigation eingeleitet. Dabei wird zum Beispiel die gefundene Aktie an die Aufrufer-Seite zurückgegeben. Auch hier gilt, dass das ViewModel der Aufrufer-Seite auf den Empfang des Parameters „stockfound“ vorbereitet sein muss.

await ShellNavigator.Instance.GoBackAsync(new Dictionary<string, object>()
{
    { "hcc", hex },
});

Ein anderes Beispiel ist die direkte „GoBackAsync“ Funktion. Diese unterstützt ebenfalls die Übergabe von Parametern und erfüllt den gleichen Zweck wie das erste Beispiel mit den zwei Punkten.

ShellRouten und Registrierung neuer Routen

Um die Navigation einfach und übersichtlich zu halten, verwendet die App ShellRouten (Enum).

public enum ShellRoute
{
    LoadingPage,

    // App
    SettingsPage,
    PrivacyPage,
    AboutPage,
    VersionDetailPage,
    ProjectOverviewPage,
    //...
}

Diese Spiegeln einfach den Namen der verfügbaren Seiten wieder. Im Quellcode kann dann einfach über den Zugriff auf den Enum die gewünschte Seite aufgerufen werden. Alternativ kann auch ein String übergeben werden, welcher über die Funktion „nameof(MyPage)“ die gewünschte Zielseite definiert.

Neue Route registrieren

Solltet Ihr eine neue Seite zu der App hinzufügen, dann muss diese im ShellNavigator unter der Methode „RegisterRoutes()“ eingetragen werden, da der Navigator sonst die Route nicht identifizieren kann.

public void RegisterRoutes()
{
    Routing.RegisterRoute(nameof(AboutPage), typeof(AboutPage));
    Routing.RegisterRoute(nameof(SettingsPage), typeof(SettingsPage));
    Routing.RegisterRoute(nameof(PrivacyPage), typeof(PrivacyPage));
    Routing.RegisterRoute(nameof(VersionDetailPage), typeof(VersionDetailPage));
    Routing.RegisterRoute(nameof(ProjectOverviewPage), typeof(ProjectOverviewPage));
    Routing.RegisterRoute(nameof(LoadingPage), typeof(LoadingPage));
    //...
}