Laden...

Wie funktioniert die Seitennavigation in MAUI?

Erstellt von OXO vor einem Jahr Letzter Beitrag vor einem Jahr 790 Views
O
OXO Themenstarter:in
86 Beiträge seit 2020
vor einem Jahr
Wie funktioniert die Seitennavigation in MAUI?

Hallo zusammen,

ich bin relativ neu in der Entwicklung mit .NET MAUI und war etwas erstaunt über die angebotenen Arten von Pages zu denen man navigieren kann. Auf der Seite https://learn.microsoft.com/en-us/dotnet/maui/user-interface/pages/navigationpage?view=net-maui-7.0 werden hier eigentlich nur wenige Seiten angeboten.

An sich wollte ich von einer ContentPage, die ich über ein Tab aus der AppShell heraus anzeige, an einem "+" Zeichen innerhalb eines ToolBarItem eine Art "Add New"-Dialog einblenden. Vorgestellt hatte ich mir das so, dass dieser, ähnlich zu einer AlertMessage, nur so eingeblendet wird und der Hintergrund der bestehenden ContentPage wird ausgegraut, bis der "Add New"-Dialog geschlossen wird.

Leider tu ich mir mit den Pages aus dem Link oben etwas schwer. Hier würde ja nur die NavigationPage in Frage kommen, die dann das vorhandene Fenster komplett überdeckt, bis diese Page wieder vom Stack runter und geschlossen ist.

Ich will mich natürlich nicht gegen gängige Praxis bei der Steuerung und Navigation in Apps streuben, aber irgendwie weiß ich auch nicht, so ganz gefällt mir das nicht.

Außerdem ist mir auch noch nicht ganz klar, wie ich nach dem Einrichten des Commands auf dem "+"-Button dann auch die Page richtig anzeigen muss. Das Binding zum RelayCommand habe ich über das MVVM-Toolkit gemacht und die Methode zum Reagieren auf das Command dann in die entsprechende AddNewDialogViewModel-Klasse gemacht. Hoffe, das war richtig? Zudem war mir nicht ganz klar, ob ich hier besser ein AsyncRelayCommand nehmen sollte oder nicht. Finde eigentlich, dass es hier nicht unbedingt ein Async braucht, oder?

Wie würdet Ihr Obiges sinnigerweise umsetzen?

3.825 Beiträge seit 2006
vor einem Jahr

Ich würde eine weitere Seite öffnen.

Ein Fenster wo man das untere Fenster noch sieht benutzt man in der Regel auf Handys und Tablets nicht.



 Navigation.PushModalAsync(new SamplePage(), true);

...

Navigation.PopModalAsync(true)


Grüße Bernd

Workshop : Datenbanken mit ADO.NET
Xamarin Mobile App : Finderwille Einsatz App
Unternehmenssoftware : Quasar-3

F
10.010 Beiträge seit 2004
vor einem Jahr

Oder man schaut sich im Maui CommunityToolkit das Popup an
Popup - .NET MAUI Community Toolkit - .NET Community Toolkit

2.080 Beiträge seit 2012
vor einem Jahr

So ein Popup ist ja auch nicht viel anders, als sowas:


<Grid>
    <Content />

    <Popup IsVisible="..." Background="...">
        <PopupContent Margin="..." />
    </Popup>
</Grid>

Also der PageContent, dank einem Grid über dem aktuellen Conten + Margin und irgendein halbtransparenter Hintergrund. Kann man sich also auch wunderbar selber bauen.
Oder das Community Toolkit, damit macht man eigentlich nicht viel falsch.

Aber ich stimme Bernd zu, ich wüsste auf Anhieb keine App, die das so macht 😁
Außerdem kann die Shell dann die ganze Navigation übernehmen: .NET MAUI Shell navigation - .NET MAUI

NuGet Packages im Code auslesen
lock Alternative für async/await

Beim CleanCode zählen nicht die Regeln, sondern dass wir uns mit diesen Regeln befassen, selbst wenn wir sie nicht befolgen - hoffentlich nach reiflichen Überlegungen.

O
OXO Themenstarter:in
86 Beiträge seit 2020
vor einem Jahr

Okay, dann werde ich von dem ursprünglichen Vorhaben absehen. Denke, wenn das eher unüblich ist, macht es auch keinen Sinn.

Um ehrlich zu sein, hab ich die Navigation über AppShell dann noch nicht ganz verstanden. Die AppShell übernimmt bei mir die Anordnung in meine Tabs und die entsprechenden Seiten dazu:


<TabBar>
        
        <Tab Title="Tab 1" Icon="...">
            <ShellContent
                ContentTemplate="{DataTemplate pages:Tab1View}"
                Route="Tab1View"
                Shell.PresentationMode="Animated" />
        </Tab>

        <Tab Title="Tab 2" Icon="...">
            <ShellContent           
                ContentTemplate="{DataTemplate pages:Tab2View}"
                Route="Tab2View"
                Shell.PresentationMode="Animated" />
        </Tab>
        
    </TabBar>

Bei mir ist aber so, dass die Tab2View selber im XAML ein Icon in Form eines "+" bereitstellt und daran ein RelayCommand angebunden hat. Wenn der Command-Handler dazu aufgerufen wird, müsste ich erst die Tab2AddNewView instanziieren und laden.

Das würde ich jetzt gedanklich erst einmal nicht im XAML der AppShell.xml definieren, sondern wenn dann würde bei mir das Routing wie oben in der Tab2View.xml angeordnet werden. Aber ich müsste die ja dynamisch erzeugen und darstellen. Ist mir so noch nicht ganz klar, wie ich das mache.

Das von Bernd vorgeschlagene

Navigation.PushModalAsync(new Tab2AddNewView(), true);

kann ich nicht aufrufen. Es gibt bei mir wohl kein Navigation-Objekt und beim PushModalAsync(...) würde bei mir eher ein Tab2AddNewViewViewModel() gefragt werden. Da stimmt noch was nicht ganz...

2.080 Beiträge seit 2012
vor einem Jahr

Schau dir meinen Link an.
Oder lies dich am besten direkt in das ganze Kapitel zur Shell ein.
Ich musste auch erst ein bisschen damit herumspielen, bevor ich einen Überblick hatte ^^

Du definierst die Inhalte der Shell und damit indirekt auch den Aufbau der Anwendung, also z.B. Tabs oder Flyout-Inhalte.
Die Navigation arbeitet dann mit Routen, ein bisschen vergleichbar mit der Navigation in einer Web-Anwendung.

Du definierst die Inhalte und Routen und wie das alles zusammenhängt und rufst die Routen auf, um zu navigieren.

NuGet Packages im Code auslesen
lock Alternative für async/await

Beim CleanCode zählen nicht die Regeln, sondern dass wir uns mit diesen Regeln befassen, selbst wenn wir sie nicht befolgen - hoffentlich nach reiflichen Überlegungen.

O
OXO Themenstarter:in
86 Beiträge seit 2020
vor einem Jahr

Okay, denke ein wenig mehr Klarheit konnte ich in meine Umsetzung mit den Routen rein bringen und funktioniert jetzt über das Shell-Objekt direkt dann 🙂


...
await Shell.Current.GoToAsync(nameof(Tab2Details), true);
...