.NET MAUI – Problem with Flyout hamburger menu

I am working on .NET MAUI mobile app. I created a hamburger menu using Flyout Item in AppShell.xaml.
My application starts with a Login page, when user is logged in, a Home page is appeared. On а Login page Flyout is disabled, it is active only on Home page and other pages that are accessible to logged in users. In hamburger menu there is a Home button and the idea is when the user is somewhere in the application to be able to return to the home page. The problem is that the Home button in hamburger menu works only once -> the user is returned to home page. When I am somewhere in the application and try to come back again, nothing happens.

Here is my AppShell.xamp code

<Shell
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:WTO.MobileApp.Views.Pages"
    x:Class="WTO.MobileApp.AppShell"
    FlyoutBackgroundColor="White"
    Shell.FlyoutBehavior="Flyout">
    
    <ShellContent
        Title="Welcome"
        ContentTemplate="{DataTemplate local:WelcomePage}"
        FlyoutItemIsVisible="False"
        Route="WelcomePage" />
    
    <FlyoutItem Title="Home" 
                Icon="houseicon.png">
        <Tab>
            <ShellContent Route="HomePage" 
                      ContentTemplate="{DataTemplate local:HomePage}" />
        </Tab>
        
    </FlyoutItem>
    <FlyoutItem Title="My Profile" 
                Icon="accounticon.png">
        <Tab>
            <ShellContent Route="MyQuotesPage" 
                      ContentTemplate="{DataTemplate local:MyQuotesPage}" />
        </Tab>
        
    </FlyoutItem>
    <FlyoutItem Title="Support" 
                Icon="help.png">
        <Tab>
            <ShellContent Route="SupportPage" 
                      ContentTemplate="{DataTemplate local:AllShipmentsPage}" />
        </Tab>
        
    </FlyoutItem>
    <FlyoutItem Title="About Us"
                Icon="info.png">
        <Tab>
            <ShellContent Route="AboutUsPage" 
                      ContentTemplate="{DataTemplate local:AboutUsPage}" />
        </Tab>
        
    </FlyoutItem>
</Shell>

And here is my Home page xaml code.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:WTO.MobileApp.Views.ContentViews"
             x:Class="WTO.MobileApp.Views.Pages.HomePage"
             BackgroundColor="White"
             Shell.NavBarIsVisible="False"
             Title="HomePage">
    <ScrollView>
        <Grid>
            <Grid Grid.Row="0">
                <!--this is the background image with the overlay-->
                <Image Grid.Row="1" Source="asset.png"
               Aspect="AspectFit"         
               MaximumHeightRequest="400"
               Margin="0,50"
               VerticalOptions="StartAndExpand"
               HorizontalOptions="StartAndExpand"
               Opacity="0.06"/>
            </Grid>
            <Grid Grid.Row="1" RowDefinitions="*,8*,2*">
                <views:Header Grid.Row="0" VerticalOptions="StartAndExpand"/>
                <Grid Grid.Row="1" RowDefinitions="*,3*,*">
                    <Grid Grid.Row="1" RowDefinitions="*,*,*" Padding="30,0">
                        <ImageButton Grid.Row="0"
                             Source="allshipmentsbtn.png"
                             Command="{Binding GoToAllShipmentsPageCommand}"
                             HorizontalOptions="CenterAndExpand"
                             Margin="0"/>
                        <ImageButton Grid.Row="1"
                             Source="myquotesbtn.png"
                             Command = "{Binding GoToMyQuotesPageCommand}"
                             HorizontalOptions="CenterAndExpand"
                             Margin="0"/>
                        <ImageButton Grid.Row="2"
                             Source="newquotesbtn.png"
                             Command = "{Binding GoToNewQuotePageCommand}"
                             HorizontalOptions="CenterAndExpand"
                             Margin="0"/>
                    </Grid>
                </Grid>
            </Grid>
        </Grid>
    </ScrollView>
</ContentPage>

When user click for example on All Shipments – > the GoToAllShipmentsPageCommand is hit. The navigation to AllShipments is like that – await Shell.Current.GoToAsync(“AllShipmentsPage”);

Leave a Comment