7

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.

Tanaka Mawere
  • 683
  • 1
  • 9
  • 22
  • 1
    Have you considered including the login page as a page in your TabBar as well, and just use visibility to control which tabs are shown? (If there's only one tab visible, the shell automatically hides the tab title.) – Jon Skeet May 25 '22 at 09:59
  • I had not thought of that. Let me try that out – Tanaka Mawere May 25 '22 at 12:20

2 Answers2

18

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 .
Thibault D.
  • 10,041
  • 3
  • 25
  • 56
ColeX
  • 14,062
  • 5
  • 43
  • 240
1

In addition to ColeX's answer, it will still work perfectly without the TabBar control.

 <ShellContent ContentTemplate="{DataTemplate pages:LoginPage}"
               Route="LoginPage"/>

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

Login Button event-handler in LoginPage.xaml.cs

private async void BtnLogin_Clicked(object sender, EventArgs e)
{
    // ApiHelper is a static class with methods that communicate with an API.
    var response = await ApiHelper.Login(EntEmail.Text, EntPassword.Text);

    if (response)
    {
        await Shell.Current.GoToAsync("//HomePage");
    }
    else
    {
        await DisplayAlert("", "Operation failed", "Cancel");
    }
}

NOTE: EntEmail and EntPassword are the names of two Entry controls in LoginPage.xaml.

JoshZ
  • 11
  • 4