search

dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
21.97k stars 1.72k forks source link

Having multiple pages for a Modal scenario using NavigationPage breaks the separation of NavigationStack and ModalStack #8225

Open MaxFelinger opened 2 years ago

MaxFelinger commented 2 years ago

Description

We have an app with a bottom Shell.TabBar and a scenario where we have a feature that allows to pair other devices (this feature is not assigned to any TabItem) that are in the same local network. This connection process consists out of 4 Pages. We could make them all modal but it looks ugly to push all 4 pages in a modal way (they fly in from the bottom). An alternative could be to open the first page modal and then navigate regularly to the consecutive 3 pages (not modal pages). After the connection was successful we show a success message and close all the connection pages. The issue arises when we want to navigate regularly from a modal page. To enable regular navigation from a modal page we need to create a NavigationPage and navigate from there. That means that those 3 consecutive pages are not in the "Shell NavigationStack" (nor in the ModalStack) but rather under the NavigationPage (in the property Pages), which seems wrong (seems like "fighting the framework"). I cannot see anything related on the documentation side: https://docs.microsoft.com/de-de/dotnet/maui/fundamentals/shell/navigation

I don't know how to do it better, because I don't know Shell well enough.

PS: Carousel is not an option because back navigation from page 2 to 3 is not (and should not be) possible https://docs.microsoft.com/de-de/dotnet/maui/user-interface/controls/carouselview/

Public API Changes

I'm not sure how a solution could look like. I'm personally am not even sure if the separation betwen NavigationStack and ModalStack is necessary. Showing NavigationPages in the ModalStack also seems wrong. Any idea?

Intended Use-Case

Having a bottom TabBar and a feature with more than 2 screen that is not related to any TabItem.

SunshineSpring666 commented 1 year ago

Here are some issues I've encountered: (1)Shell's NavigationStack and ModalStack seems have some bug of exposing its stack root value to developer. On my side, the NavigationStack's root (first element) is always "(null)", but when navigating back and forth, it is normal (not null value at all).

(2)The NavigationStack is updated a little delayed. Since Shell doesn't always display hamburger navigation button on all pages, I would like to manually add it (only on those pages when Shell.Current.Navigation.NavigationStack.Count > 1). However, this doesn't work normally, because the navigation stack is not updated when the bound PageWidth's converter of added hamburger button checks the Shell.Current.Navigation.NavigationStack.Count value (the NavigationStack is udpated updater OnSizeAllocated override).

(3) If I make the first page as LoginPage (Shell.PresentationMode="Modal"), I check the Shell.Current.Navigation.NavigationStack.Count is 1 (Shell.Current.Navigation.NavigationStack[0] is "(null)"), while Shell.Current.Navigation.ModalStack.Count is 0. Weird. The Modal Page is not in modal stack.

Thanks.

TeddyAlbina commented 6 months ago

I have a scenario when navigating modal doesn't work if the application is using shell. The user click on a button the Shell navigate to a page with (Shell.PresentationMode="ModalAnimated"), then in this modal it clicks on another button and navigate to another modal everything seems OK; But, at this point it's impossible for the user to go back to the first modal and so he is stuck.