NET MAUI, how to set the first page to load depending on do I have a JWT or not in the Shell

Question

For example, if I had a Shell, where I add FlyoutItem(s) in code, I need to set some Content on the app start (for example, depending on that I do have a JWT or not), how can I do that.

public partial class AppShell : Shell    
{
     public AppShell ()        
     {
            InitializeComponent ();
            
            FlyoutItem flyoutItem = new FlyoutItem ();
            flyoutItem.FlyoutDisplayOptions = FlyoutDisplayOptions.AsMultipleItems;
            
            flyoutItem.Items.Add (new ShellContent () { Title = "NewPage1", Content = new NewPage1 () });
            flyoutItem.Items.Add (new ShellContent () { Title = "home", Content = new MainPage () });
            
            myshell.Items.Add (flyoutItem);
            
     }
      
}

Or similar in xaml

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiUI.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiUI"
    xmlns:pages="clr-namespace:MauiUI.Pages"
    FlyoutHeaderBehavior="CollapseOnScroll"
    Shell.FlyoutBehavior="Flyout">


    <FlyoutItem IsVisible="False">
        <ShellContent
            Title="Login"
            Route="login"
            ContentTemplate="{DataTemplate pages:LoginPage}" />
    </FlyoutItem>

    <FlyoutItem IsVisible="False">
        <ShellContent
            Title="Register"
            Route="register"
            ContentTemplate="{DataTemplate pages:RegisterPage}" />
    </FlyoutItem>

    <FlyoutItem>
        <ShellContent
            Title="Amazons of Volleyball"
            Route="main"
            ContentTemplate="{DataTemplate pages:MainPage}" />
    </FlyoutItem>

    <FlyoutItem>
        <ShellContent
            Title="Detaiils"
            Route="details"
            ContentTemplate="{DataTemplate pages:PlayerDetailsPage}" />
    </FlyoutItem>

        <FlyoutItem>
            <ShellContent
            Title="Add new Amazon"
            Route="add-or-update"
            ContentTemplate="{DataTemplate pages:AddOrUpdatePlayer}" />
        </FlyoutItem>

</Shell>

use the xaml version and implicit use the dependency injection just built in - anyway you should use the DI power of MAUI — Sir Rufo, Feb 07 '23 at 12:57

score 2 · Answer 1 · answered Feb 07 '23 at 17:47

Depending on the size of the data you have to load and what you want the user to see in the meantime.

If you don't have much to load you can just do everything in Application.OnStart like this answer said, there is also a bunch of other app lifecycle events that can suit your needs (like OnCreated).

Just be cautious if you use async / await in these methods since the app will continue to load in the mean time and if you are waiting on data that should be displayed you should design your UI with that in mind (using events and dependency injection).

If the data you are loading take some time to load (>few seconds) you can change the start page of your app by a page dedicated to loading data, once the data is loaded you can simply navigate to the good page with Shell.Current.GoToAsync("/home/or/login").

You can also directly load data inside MauiProgram.CreateMauiApp() and pass down information with dependency injection, the splash screen will stay on screen during the loading.

NET MAUI, how to set the first page to load depending on do I have a JWT or not in the Shell

1 Answers1