.Net MAUI - Page\View load missing flyout menu option

Question

I have a simple Maui app. I have a flyout menu that works well and navigates to the required Views. However when I try to load a view (UserHomeScreen) from a button click event in another view (LoginScreen) the flyout menu icon doesn't appear (although the back button does) even though it appears if I load the view from the flyout menu..

My XAML (App.Shell.xaml):

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems" Route="ParentRoute" >
        <ShellContent
        Title="Login"
        ContentTemplate="{DataTemplate local:Views.LoginScreen}"/>
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems" Route="ParentRoute">
        <ShellContent
        Title="Home Screen"
        ContentTemplate="{DataTemplate local:Views.UserHomeScreen}"/>
    </FlyoutItem>

My code behind (AppShell.cs) :

public AppShell()
    {
        InitializeComponent();
        
        Routing.RegisterRoute(nameof(LoginScreen), typeof(LoginScreen));
        
        Routing.RegisterRoute(nameof(UserHomeScreen ), typeof(UserHomeScreen ));
           
    }

My XAML (LoginScreen.xaml):

<Button x:Name="btnLoginOK" Text=" OK" Background="White" TextColor="Blue" WidthRequest="100" HorizontalOptions="End" Clicked="btnLoginOK_Clicked" />

My code behind (LoginScreen.xaml.cs):

private async void btnLoginOK_Clicked(object sender, EventArgs e)
    {
       
                await Shell.Current.GoToAsync(nameof(UserHomeScreen));
    }

But for some reason if I load UserHomeScreen from the flyout menu I get the flyout menu icon. If I load UserHomScreen from the button click (btnLoginOK_Clicked) i dont...

Any ideas what im missing or doing wrong??

Answer 1

Here's the correct way to do the navigation that preserves the flyout menu (hamburger icon) via a Button. Note that sample code guarantees the consistency across three platforms: Android, iOS and Windows.

<FlyoutItem  Title="Login" >
        <Tab>
            <ShellContent
        Title="Login"
        ContentTemplate="{DataTemplate local:Views.LoginScreen}" Route="LoginScreen"/>
        </Tab>
 </FlyoutItem>

<FlyoutItem  Title="Home Screen">
      <Tab>
         <ShellContent
        Title="Home Screen"
        ContentTemplate="{DataTemplate local:Views.UserHomeScreen}" Route="UserHomeScreen"/>

        </Tab>
</FlyoutItem>

private async void btnLoginOK_Clicked(object sender, EventArgs e) 
{
     await Shell.Current.GoToAsync($"//{nameof(UserHomeScreen)}");
}

And comment out below in AppShell.cs:

//Routing.RegisterRoute(nameof(LoginScreen), typeof(LoginScreen));
        
//Routing.RegisterRoute(nameof(UserHomeScreen), typeof(UserHomeScreen ));