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

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
Set AppShell as MainPage in App.
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>
Call await Shell.Current.GoToAsync("//Home"); when login in , Call await Shell.Current.GoToAsync("//Login"); when login out .
Don't Include LoginPage into AppShell
Set LoginPage as MainPage in App at first.
Call MainPage = new AppShell(); When login in , Call MainPage = new LoginPage(); when login out .

Answer 2

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.