How to create a MasterDetailPage using MvvmCross?

Question

I'm trying to develop a Xamarin.Forms app using MvvmCross and I'd like to use a Hamburguer Menu (MasterDetailPage), but I don't know how to do it. I tried different ways, searched for tutorials and samples, but I don't had success. Can anyone help me?

Answer 1

As you can see here MvvmCross Playground, you should create first a RootViewModel, MenuViewModel, and FirstViewModel for example. Then create and a RootPage, MenuPage and FirstPage on your UI folder.

Your RootViewModel should look like this:

public class RootViewModel : BaseViewModel
{
    private readonly IMvxNavigationService _navigationService;
    public RootViewModel(IMvxNavigationService navigationService)
    {
        _navigationService = navigationService;
    }

    public override void ViewAppearing()
    {
        base.ViewAppearing();

        MvxNotifyTask.Create(async ()=> await this.InitializeViewModels();
    }

    private async Task InitializeViewModels()
    {
        await _navigationService.Navigate<MenuViewModel>();
        await _navigationService.Navigate<FirstViewModel>();
    }
}

edit: I move the navigation to an async task to avoid using async void.

The xaml RootPage must implement MvxMasterDetailPage:

<?xml version="1.0" encoding="UTF-8"?>
<views:MvxMasterDetailPage x:TypeArguments="viewModels:RootViewModel"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
    xmlns:mvx="clr-namespace:MvvmCross.Forms.Bindings;assembly=MvvmCross.Forms"
    xmlns:viewModels="clr-namespace:yournamespace.Core.ViewModels"
    x:Class="yournamespace.UI.Views.RootPage"
    Icon="hamburger.png">
</views:MvxMasterDetailPage>

and c# code behind use the presenter like this:

[MvxMasterDetailPagePresentation(MasterDetailPosition.Root, WrapInNavigationPage = false)]
public partial class RootPage : MvxMasterDetailPage<RootViewModel>
{
    public RootPage()
    {
        InitializeComponent();
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
    }
}

MenuPage must be normal MvxContentPage and c# code behind implement on menu page the presenter:

[MvxMasterDetailPagePresentation(MasterDetailPosition.Master)]

And FirstPage are MvxContentPage too and all the detail pages must be:

[MvxMasterDetailPagePresentation(MasterDetailPosition.Detail, NoHistory = true)]

Add the no history to all pages in master detail to prevent navigation back bug.

edit: i forgot, there's a bug that make menu doesn't close after navigate, probably they'll fix on version 6 of MvvmCross, to fix it now you must paste this in your navigation task before execute the navigation:

if(Application.Current.MainPage is MasterDetailPage masterDetailPage)
{
    masterDetailPage.IsPresented = false; 
}
else if(Application.Current.MainPage is NavigationPage navigationPage && navigationPage.CurrentPage is MasterDetailPage nestedMasterDetail)
{
    nestedMasterDetail.IsPresented = false;
}