Understanding AppShell.xaml's structure

Question

I'm building my first .NET MAUI app and I sort of understand what's going on in AppShell.xaml, but not really. I'm guessing I don't have them "structured" properly for navigation to go back and forth between views.

My app is fairly straight forward.

Starts off with a SplashPage (loads data), then navigates to a LandingPage. Works as expected so far.

From the LandingPage, the user can Login (goes to LoginPage) or Register (RegisterPage).

After either of those, the user is taken to <TabBar Route="MainTabs"> which has two <Tab> with their own <ShellContent>.

Right now, my structure is about like this...

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

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

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

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

<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>

Any tips? Thanks!

Answer 1

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.