How to make a push from flyout items on lateral menu

Question

I create a Xamarin.Forms app with Shell for manage TabBar and Hamburgger menu, i need that the menu items make a push as detail page for the correct navigation

I create the next code:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Pages.BasePage"
FlyoutBehavior="Flyout"
Shell.TitleColor ="Black"
Shell.TabBarBackgroundColor="#F4F4F4"
Shell.TabBarUnselectedColor="Gray"
Shell.NavBarHasShadow="True"
Shell.PresentationMode="Animated"
x:Name="shell">
<TabBar x:Name="bottomBar" Route="main">
    <Tab Title="Tab 1" Icon="img1.png">
        <ShellContent Route="tab-1-page" ContentTemplate="{DataTemplate views:page1}" />
    </Tab>
    <Tab Title="Tab 2" Icon="img2.png">
        <ShellContent Route="tab-2-page" ContentTemplate="{DataTemplate views:page2}" />
    </Tab>
</TabBar>

<MenuItem Text="hamburg menu item 1"
    IconImageSource="menu1.png"
    Command="{Binding NavigateCommand}"
    CommandParameter="menu1-page" />
<MenuItem Text="hamburg menu item 2"
    IconImageSource="menu2.png"
    Command="{Binding NavigateCommand}"
    CommandParameter="menu2-page" /> 
<MenuItem Text="hamburg menu item 3"
    IconImageSource="menu3.png"
    Command="{Binding NavigateCommand}"
    CommandParameter="menu3-page" />  

<Shell.FlyoutHeader>
    <StackLayout BackgroundColor="white">
        <Image Source="title.png" VerticalOptions="FillAndExpand" HorizontalOptions="CenterAndExpand" WidthRequest="180" />
    </StackLayout>
</Shell.FlyoutHeader>

And Codebehind is:

public BasePage()
{
    InitializeComponent();
    BindingContext = new BaseViewModel();  
}

And ViewModel is:

using HandHeldCashier.Pages;
using System;
using System.Collections.Generic;
using System.Windows.Input;
using Xamarin.Forms;

public class BaseViewModel
{
    public Dictionary<string, Type> Routes { get; private set; } = new Dictionary<string, Type>();
    public ICommand NavigateCommand => new Command<string>((route) => Shell.Current.GoToAsync(route));
    public BaseViewModel() { }

    public void RegisterRoutes()
    {
        Routes.Add("detail1-page", typeof(Detail1Page));
        Routes.Add("detail2-page", typeof(Detail2Page));
        Routes.Add("detail3-page", typeof(Detail3Page));    
        Routes.Add("menu1-page", typeof(AboutPage));
        Routes.Add("menu2-page", typeof(CommentsPage));
        Routes.Add("menu3-page", typeof(SettingsPage));            

        foreach (var item in Routes)
        {
            Routing.RegisterRoute(item.Key, item.Value);
        }
    }
}

This no work at the first time, when go back and access again, it's work fine

anyone know how to replace the implementation or correct this bug?

Answer 1

I make a sample code to check. It works on my side. Please check it below.

1. Make sure you have registered the routes. Run RegisterRoutes method in BaseViewModel constructure.

    public BaseViewModel()
    {
        RegisterRoutes();
    }
   
    public void RegisterRoutes()
    {
        Routes.Add("detail1-page", typeof(Detail1Page));
        Routes.Add("detail2-page", typeof(Detail2Page));
        Routes.Add("detail3-page", typeof(Detail3Page));
        Routes.Add("menu1-page", typeof(AboutPage));
        Routes.Add("menu2-page", typeof(CommentsPage));
        Routes.Add("menu3-page", typeof(SettingsPage));
   
        foreach (var item in Routes)
        {
            Routing.RegisterRoute(item.Key, item.Value);
        }
    }
   

2. For better visual effects, you could close the flyout when you do the navigation for manu items.

   public ICommand NavigateCommand => new Command<string>((route) => { Shell.Current.GoToAsync(route); Shell.Current.FlyoutIsPresented = false; });