Shell navigation in .NET MAUI to a page with Bottom Tabs

Question

During a login flow, the login page does not normally have bottom tabs which constitute the main flow of the app.

AppShell.xaml

 <TabBar>
        <ShellContent Title="Home"
             Icon="home.png" 
                      ContentTemplate="{DataTemplate local:HomePage}"/>
        <ShellContent Title="Articles"
                          Icon="articles.png"
                          ContentTemplate="{DataTemplate local:ArticlesPage}" />
    </TabBar>

So I am attempting to navigate from the login page, given login successful, to the HomePage which is part of a TabBar in Shell. Problem is Shell then navigates to the HomePage as if it is a page on its own, without the TabBar. I am assuming that the answer lies in navigating to the TabBar section itself, I don't know.

Answer 1

There are two ways to achieve your requirement.

---

Include LoginPage into AppShell

1. Set AppShell as MainPage in App.

2. Place Two Tabbar in AppShell , and place LoginPage first then HomePage, and set different Route for the two Tabbar.

   <TabBar Route="Login">
     <ShellContent  ContentTemplate="{DataTemplate local:LoginPage}" />
   </TabBar>
   
   <TabBar Route="Home">
        <ShellContent Title="Home" Icon="home.png" ContentTemplate="{DataTemplate local:HomePage}"/>
        <ShellContent Title="Articles" Icon="articles.png"  ContentTemplate="{DataTemplate local:ArticlesPage}" />
   </TabBar>
   

3. Call await Shell.Current.GoToAsync("//Home"); when login in , Call await Shell.Current.GoToAsync("//Login"); when login out .

Don't Include LoginPage into AppShell

1. Set LoginPage as MainPage in App at first.
2. Call MainPage = new AppShell(); When login in , Call MainPage = new LoginPage(); when login out .