如何使用MvvmCross创建MasterDetailPage？

Question

我正在尝试使用MvvmCross开发一个Xamarin.Forms应用程序,我想使用Hamburguer菜单(MasterDetailPage),但我不知道该怎么做.我尝试了不同的方法,搜索教程和样本,但我没有成功.谁能帮我？

Answer 1

正如您在此处可以看到的MvvmCross Playground,您应首先创建一个RootViewModel,MenuViewModel和FirstViewModel.然后在UI文件夹上创建一个RootPage,MenuPage和FirstPage.

您的RootViewModel应如下所示:

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

编辑:我将导航移动到异步任务以避免使用async void.

xaml RootPage必须实现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>

和c#代码后面使用这样的演示者:

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

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

MenuPage必须是普通的MvxContentPage和c#代码后面的菜单页面上的实现者:

[MvxMasterDetailPagePresentation(MasterDetailPosition.Master)]

FirstPage也是MvxContentPage,所有细节页面必须是:

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

将无历史记录添加到主详细信息中的所有页面以防止导航返回错误.

编辑:我忘了,有一个错误导致菜单在导航后没有关闭,可能他们将修复MvvmCross的第6版,现在必须修复它,你必须在执行导航之前将其粘贴到导航任务中:

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