如何使用MvvmCross创建MasterDetailPage? [英] How to create a MasterDetailPage using MvvmCross?
问题描述
我正在尝试使用MvvmCross开发Xamarin.Forms应用,并且我想使用Hamburguer菜单(MasterDetailPage),但我不知道该怎么做.我尝试了不同的方法,搜索了教程和示例,但是没有成功.谁能帮我?
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?
推荐答案
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.
您的RootViewModel应该看起来像这样:
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.
xaml RootPage必须实现MvxMasterDetailPage:
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>
和后面的c#代码使用演示者是这样的:
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必须是普通的MvxContentPage,并且在演示者的菜单页上的背后是c#代码:
MenuPage must be normal MvxContentPage and c# code behind implement on menu page the presenter:
[MvxMasterDetailPagePresentation(MasterDetailPosition.Master)]
并且FirstPage也是MvxContentPage,所有详细信息页面也必须是:
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.
我忘记了,有个bug使得导航后导航菜单无法关闭,可能它们将在MvvmCross的版本6上修复,要修复此错误,现在必须将其粘贴到导航中执行导航之前的任务:
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;
}
这篇关于如何使用MvvmCross创建MasterDetailPage?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!