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

1. May I know what platform you are targeting? 2. Have you set `Shell.FlyoutBehavior = Flyout` in App.Shell.xaml? — Alexandar May - MSFT, Aug 03 '23 at 02:24
Android and ios and yes I have.. the menu option doesn't appear, its as if the page/view (when loaded via the button) is somehow outside the shell (which I know is ridiculous) — Chris Smith, Aug 03 '23 at 06:20
Although oddly I've just tested on windows and the problem doesn't occur on windows.. — Chris Smith, Aug 03 '23 at 06:35
Thankyou that worked - still not 100% sure why , but ill figure that out.. Thankyou Alexandar May - MSFT — Chris Smith, Aug 04 '23 at 07:23

Alexandar May - MSFT · Accepted Answer · 2023-08-03T09:04:30.980

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

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

1 Answers1