Using Maui Shell navigation how to push a page?

Question

I'm implementing a Maui app using Shell navigation. I have a navigation hieararchy set up, I understand how to navigate from one page to the other using page routes.

However, I have a page that can be opened from multiple source pages, let's call this ItemDetailsPage. On multiple source pages, where I display items, whenever I tap an Item, I navigate to ItemDetailsPage. So far so good. To navigate to ItemDetailsPage I do Shell.Current.GoToAsync(state, animate, arguments). Note that I use the IQueryAttributable argument passing method to pass arguments.

BUT, when I tap the OK button on ItemDetailsPage, I want to navigate back to the source page (which can be a number of different sourfce pages). To do that I use Shell.Current.Navigation.PopAsync(). But the next page on the navigation stack is not the source page, where I came from, but the parent in the navigation hierarchy, as Shell navigation set it when I used GoToAsync() to navigate to ItemDetailsPage.

I could change the source => ItemDetailsPage navigation to use Shell.Current.Navigation.PushAsync(), but PushAsync doesn't support passing arguments (the IQueryAttributable way), so this way I couldn't pass any arguments.

Any chance PushAsync could support IQueryAttributable targets?

Is there some other way to put the source page on the navigation stack so that popping ItemDetailsPage would take me there?

My last resort is to fall back to some other argument passing method, but the rest of the app uses this pattern, so would be nice to stick to IQueryableAttribute's.

score 0 · Answer 1 · answered Mar 19 '23 at 07:40

I found two fairly simple solutions.
a.) The hacky one - using multiple navigation routes
Register multiple navigation routes like source1/ItemDetailsPage, source2/ItemDetailsPage, etc., use one of them when navigating to ItemDetailsPage. Shell navigation will then places source1, source2, etc. on the navigation stack and navigating back will actually go to source1, source2, etc. Tested, works, will give example.
b.) The proper, but fiddly way - using back-navigation actions
When navigating to ItemDetailsPage, pass an extra argument, that is a method, implementing navigating back to the source. Haven't tested, believe it'd work, but navigating back would have to include argument passing, build the page again, etc.

Details of a.), multiple navigation routes
In AppShell.xaml.cs

public const string AlternateRoute1 = $"{Source1Route}/{nameof(ItemDetailsPage)}";
public const string AlternateRoute2 = $"{Source2Route}/{nameof(ItemDetailsPage)}";

public AppShell()
{
    [...]
    Routing.RegisterRoute(AlternateRoute1, typeof(ItemDetailsPage));
    Routing.RegisterRoute(AlternateRoute2, typeof(ItemDetailsPage));
}

When navigating from page1, use AlternateRoute1, and from page2, use AlternateRoute2.

When closing ItemDetailsPage, use

await SafeGoToAsync("..");

and it'll navigate back to the either page1 or page2.

Using Maui Shell navigation how to push a page?

1 Answers1