How to correctly use shell navigation in a maui project?

Question

I am using MVVM for project. I have a page (BuildingOverViewPage) that displays a list of buildings in my app, and i also have another page (ViewEditBuildingPage) that handles View/Add/Edit building. I am using shell navigation. However, the navigation is not quite what i want, and i dont know how to fix it.

In the flyout, i have a shellcontent that points to my BuildingOverViewPage

<ShellContent
    Title="Building"
    ContentTemplate="{DataTemplate views:BuildingOverviewPage}"
    FlyoutIcon="{mi:Material Icon=Apartment,
                             IconColor={AppThemeBinding Dark={StaticResource White},
                                                        Light={StaticResource Black}},
                             IconAutoScaling=True}"
    Route="BuildingOverviewPage" />

In the code behind shell, i also have this page registered as a global route

Routing.RegisterRoute("buildingoverview",typeof(BuildingOverviewPage));

In ViewEditBuildingPage viewmodel, i use a async method to control where each mode should go back by using BackButtonBehavior.

[RelayCommand]
async Task GoBackAsync()
{
    if (Purpose == "Add" || Purpose == "Edit")
    { 
        await Shell.Current.GoToAsync("..");
    }
    if (Purpose == "View")
    {
        await Shell.Current.GoToAsync("buildingoverview");
    }
}

This is my setup. When i navigate from flyout to my building overview page, the flyout hamburger icon is still there. However, when i navigate to a view page or edit/add page, and back to building overview page, the hamburger icon turns into a back arrow, and that back arrow navigates me back to the previous view/edit/add page. I want the hamburger icon to stay whenever i am on the building overview page. Is it possible?

Answer 1

Hello,

I want the hamburger icon to stay whenever i am on the building overview page. Is it possible?

Yes, you can.

Firstly, remove the Routing.RegisterRoute("buildingoverview",typeof(BuildingOverviewPage)); In the code behind shell.

Then you have added Route="BuildingOverviewPage" in the <ShellContent>.

<ShellContent
    Title="Building"
    ContentTemplate="{DataTemplate views:BuildingOverviewPage}"
    FlyoutIcon="{mi:Material Icon=Apartment,
                             IconColor={AppThemeBinding Dark={StaticResource White},
                                                        Light={StaticResource Black}},
                             IconAutoScaling=True}"
    Route="BuildingOverviewPage" />

In the end, when you navigate to the BuildingOverviewPage, please use absolute routing like this Absolute routes document

   await Shell.Current.GoToAsync("//BuildingOverviewPage");

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.