Skip "inbetween" pages when navigating back to the first page, from the last page in the navigation stack

Question

How do I navigate back without losing the title bar or going through all the previous pages first?
Is there any way to skip all of the "inbetween" pages and navigate straight back to the first page from the last page in the navigation stack in my .NET MAUI application? (and doing this without showing the animations of all the previous "modal style" pages?)

Here's what I am trying to do:

                ItemDetailsPage
               /
              /
ItemListPage /
             \
              \
               \
                NewItemStep1 ____ NewItemStep2 ____ NewItemStep3 ____ ItemDetailsPage

From the ItemListPage you can do two things:

Show an item on ItemDetailsPage or...
Create a new item in 3 steps: From NewItemStep1 to NewItemStep2 to NewItemStep3 and finally to ItemDetailsPage displaying your freshly created new item.

Now I want to navigate back from ItemDetailsPage to ItemListPage without animating the "between" modal-style pages. So basically just go straight to a new page and animate that, but don't animate the removal of any other pages that are inbetween on the navigation stack.

Here's what I've tried so far:
On the last page (Step 3 page):

Dictionary<string, object> Params = new() {
    {"Item", Item } 
};

await Shell.Current.GoToAsync($"{nameof(ItemDetailsPage)}", Params);

This will navigate to ItemDetailsPage and display the created item, as expected! But now the ItemDetailsPage has no title bar, therefore no back button to go back to any page at all. I assume this messes with the navigation stack in some way.

Dictionary<string, object> Params = new() {
    {"Item", Item } 
};

await Shell.Current.GoToAsync($"//{nameof(ItemListPage)}");
await Shell.Current.GoToAsync($"{nameof(ItemDetailsPage)}", Params);

And this will navigate to ItemDetailsPage to display the created item too, with title bar (and back button) to go back to ItemListPage directly. Perfect! But doing so will go all the way back through Step3, then Step2, then Step1, then ItemListPage, showing all these pages animate out of the screen, before finally ending up on ItemDetailsPage to show the created item. This is how I want it to work, but without going back through the previous (1,2,3) steps pages first.

Thanks for the reply. This does the same as the `GoToAsync("//absolute(root)path")`, it goes back through `Step3`, through `Step2`, through `Step1` to the root, showing the animations for these pages that belong to the modal presentation mode. I do not want these middle pages to show up at all and just move over directly to the root page (or ItemDetailPage). — Al John, Jul 22 '23 at 17:39
Odd. You can use `Remove` to remove pages from the navigation stack, that might solve it — Jason, Jul 22 '23 at 17:43
Thanks but not any different from the previous attempts. It works, as in it does go back to root or wherever you want. But while doing that, it still animates the removal of the previous pages. So I end up seeing the Step 3/2/1 pages animate downward (modal style) before showing the destination page. — Al John, Jul 22 '23 at 18:06
There is an optional parameter to control animation. I've added an answer. — ToolmakerSteve, Jul 22 '23 at 21:12

ToolmakerSteve · Accepted Answer · 2023-07-22T22:03:37.853

PopToRootAsync takes an optional parameter that controls animation. The default is true (animate). [Which now that I think about it, feels like a dubious default when popping multiple pages. But its consistent with the other navigation methods.]

To skip animation:

await Shell.Current.Navigation.PopToRootAsync(false);

The same optional parameter exists for GoToAsync:

await Shell.Current.GoToAsync($"{nameof(ItemDetailsPage)}", false, Params);

To have ItemDetailsPage with a back button, its ROUTE needs to have ItemListPage as its ROOT.

See "Navigation Type 3: Shell Navigation" in https://stackoverflow.com/a/76741424/199364.

ASSUMING ItemListPage has Route ItemListPage, something like this:

Routing.RegisterRoute("ItemListPage/ItemDetailsPage", typeof(ItemDetailsPage));

await Shell.Current.Navigation.PopToRootAsync(false);
await Shell.Current.GoToAsync("//ItemListPage/ItemDetailsPage");

I think this will show ItemListPage momentarily (no animation),
then animate to ItemDetailsPage, with back button.

Given Shell's design, I don't think its possible to animate directly from one non-root page to another non-root page. (Each tab is a "root".) Especially since you want "back" to return to the root.

Thanks for your answer. It works for the "between" pages as they are no longer animated. But is there a way to do this while still maintaining the transition animation to `ItemDetailsPage`? — Al John, Jul 22 '23 at 21:17

Skip "inbetween" pages when navigating back to the first page, from the last page in the navigation stack

1 Answers1