Understanding AppShell.xaml's structure

Hello,

Usually AppShell is used to display the main content of the application. For Loading, Login or Registration, these pages do not need to be set in the ShellContent of AppShell for security and aesthetic considerations. This will cause users to still see the navigation bar when they are not logged in.

Therefore, it is recommended that you separate the Loading page from the Shell and complete the navigation in the following way.

Step 1. The AppShell retains the contents of the Tabbar.

<TabBar Route="MainTabs">

<Tab Title="Songs">

<ShellContent Route="SongsPage" ContentTemplate="{DataTemplate views:SongsPage}" />

</Tab>

<Tab Title="Library">

<ShellContent Route="LibraryPage" Title="Library" ContentTemplate="{DataTemplate views:LibraryPage}" />

</Tab>

</TabBar>

Step 2. In App.xaml.cs, directly set the first page as SplashPage through MainPage.

public App()
{
    InitializeComponent();
 
    MainPage = new SplashPage();
}

Step 3. According to your flow, set the same navigation event as the previous step for SplashPage, LoadingPage, Login, RegisterComplete. You can set the navigation by App.Current.MainPage.

App.Current.MainPage = NextPage;

Setp 4. In the event that the user completes the login, reset the App's home page to Shell.

// After logging in.
App.Current.MainPage = new AppShell();

Best Regards,

Alec Liu.

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.