hamburger menu prism xamarin forms?

Question

I am trying to create an app using Prism in Xamarin Forms.

Xamarin Forms Version: 2.3.3.175

Prism Version: 6.2.0

The hamburger menu works in Android but when I run it UWP it won't display the icon and also when I navigate through menu, the menu totally disappears and I wont have the method go back to other pages too. In other words, I need to close and restart the app.

Here is what I tried so far.

1. After creating the prism project I added a MasterDetailPage:

   <MasterDetailPage.Master>
       <ContentPage Title="Default">
           <StackLayout>
               <Button Text="Billing" Command="{Binding Path=NavigationCommand}" CommandParameter="MyNavigationPage/BillingPage"/>
               <Button Text="Your Order" Command="{Binding Path=NavigationCommand}" CommandParameter="MyNavigationPage/PlaceOrderPage"/>
               <Button Text="Settings" Command="{Binding Path=NavigationCommand}" CommandParameter="MyNavigationPage/SettingsPage"/>
               <Button Text="Settings"/>
           </StackLayout>
       </ContentPage>
   </MasterDetailPage.Master>
   

MasterDetailPage ViewModel

public class MDPageViewModel : BindableBase
    {
        private INavigationService _navigationService;


        public DelegateCommand<string> NavigationCommand => new DelegateCommand<string>(Navigation);



        public MDPageViewModel(INavigationService navigationService)
        {
            _navigationService = navigationService;

        }

        private void Navigation(string page)
        {
            _navigationService.NavigateAsync(page);
        }
    }

2. After that I created a navigation page and also respective pages and view models. Here is App.Xaml.cs file:

   public partial class App : PrismApplication { public App(IPlatformInitializer initializer = null) : base(initializer) { }

       protected override void OnInitialized()
       {
           InitializeComponent();
   
           NavigationService.NavigateAsync("MDPage/MyNavigationPage/ItemsPage");
       }
   
       protected override void RegisterTypes()
       {
           Container.RegisterTypeForNavigation<MDPage>();
           Container.RegisterTypeForNavigation<BillingPage>();
           Container.RegisterTypeForNavigation<PlaceOrderPage>();
           Container.RegisterTypeForNavigation<SettingsPage>();
           Container.RegisterTypeForNavigation<MyNavigationPage>();
       }
   }
   

3. So when I run the app in UWP it loads like this

But when I click on the links in menu , menu will disappear and it looks like this.

What I am doing wrong and How can I solve it?

I created a project in github so you can easily view the error.

https://github.com/codemasterblackperl/Hamburger_Menu_Prism_Forms_Repo

Answer 1

This is a bug in the latest version of Xamarin. It works when using 2.3.1.114. I've posted the bug here since i just ran into this.

Answer 2

This will only answer your question partially. Not being able to see the icon got me too, although it's documented in the Prism.Forms docs. In order to get the icon, go to the App.Xaml in your UWP project and add the following data template between <Application.Resources>...</Application.Resources>

<DataTemplate x:Key="ItemTemplate">
    <uwp:ItemControl HorizontalContentAlignment="Stretch"
                     VerticalContentAlignment="Stretch" />
</DataTemplate>

Define the uwp prefix at the top like xmlns:uwp="using:Xamarin.Forms.Platform"

You App.Xaml should look something like this:

<Application x:Class="MyApp.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:uwp="using:Xamarin.Forms.Platform">
<Application.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <uwp:ItemControl HorizontalContentAlignment="Stretch"
                         VerticalContentAlignment="Stretch" />
    </DataTemplate>
</Application.Resources>

After you've done that, it will display the icon. However, this will show you that once you click an item in the master, the menu collapses. I've not been able to fix that.

Answer 3

Just use IMasterDetailPageOptions interface in your MasterDetail code-behind:

public partial class ShellView : MasterDetailPage, IMasterDetailPageOptions
{
    public ShellView()
    {
        InitializeComponent();
    }

    public bool IsPresentedAfterNavigation
    {
        get { return Device.Idiom != TargetIdiom.Phone; }
    }
}