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

user_13253165 0
Viewed 1803

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.

.net-maui maui
1 Answers

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 than 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 .
user_81878000
Related