MvvmCross MvvmCross 5.x的侧栏导航

Question

我用来为我的应用程序，边栏导航和父子导航同时实现两种类型的导航。 我的应用程序以汉堡（侧边栏）菜单开始。

边栏菜单中的第一项应执行导航堆栈的重置并打开主页视图。 主视图控制器应该启动根堆栈导航，因此主视图上的每个按钮应打开一个新视图，新视图上的按钮应打开另一个视图等。

边栏菜单中的每个其他项目都应打开一个新视图一个对话框。

我使用MvvmCross 5.x，并且没有与5.x版本兼容的示例。 有没有人能指点我一个可用的样本？

Answer 1

我首先假设你正在尝试为iOS实现这个功能。在Android的情况下，你可以简单地使用导航抽屉。

iOS上的示例尚未转换为MvvmCross 5.x（我将开始这样做a.s.a.p.），但这应该是微不足道的。让我尽量走你通过它：

1. 确保您的MvvmCross iOS的支持软件包添加到您的iOS项目：Install-Package MvvmCross.iOS.Support -Version 5.0.2（或使用GUI）

2. 配置您的iOS项目通过向使用MvxSidebarPresenter下面的代码到Setup类在iOS项目：

   protected override IMvxIosViewPresenter CreatePresenter() 
   { 
       return new MvxSidebarPresenter((MvxApplicationDelegate)ApplicationDelegate, Window); 
   } 
   

3. 创建为你弹出菜单，并与MvxSidebarPresentationAttribute装饰它作用一个视图控制器。这个视图控制器将作为你的菜单。您可以（或更好地）将其链接到将处理导航部分的视图模型（当用户选择菜单项时）。此视图控制器可能是这个样子：

   [MvxSidebarPresentation(MvxPanelEnum.Left, MvxPanelHintType.PushPanel, false)] 
   public class LeftPanelView : MvxViewController<LeftPanelViewModel> 
   { 
       ... 
   } 
   

4. 为了确保您的主页视图充当根控制器，只需将MvxSidebarPresentationAttribute添加到主视图控制器，并确保财产Panel设置为Center，HintType是设置为ResetRoot和ShowPanel设置为true），像这样：

   [MvxSidebarPresentation(MvxPanelEnum.Center, MvxPanelHintType.ResetRoot, true)] 
   public class HomeView : MvxViewController<HomeViewModel> 
   { 
       ... 
   } 
   

5. 对于所有子视图（从主视图中打开），请确保您设置的MvxSidebarPresentationAttribute与道具erty Panel设置为Center，HintType设置为PushPanel 和依赖，如果你想显示的子页面菜单按钮设置 ShowPanel到 true或 false ，就像这样：

   [MvxSidebarPresentation(MvxPanelEnum.Center, MvxPanelHintType.PushPanel, true)] 
   public class ChildView : MvxViewController<ChildViewModel> 
   { 
       ... 
   } 
   

6. 的最后一步是为菜单中的所有其他按钮设置视图控制器。这些可以简单地用MvxModalPresentationAttribute属性进行修饰，以打开它们作为对话框（详细文档可以在here找到）。一个例子可能是这个样子：

   [MvxModalPresentation(ModalPresentationStyle = UIModalPresentationStyle.OverFullScreen, ModalTransitionStyle = UIModalTransitionStyle.CrossDissolve)] 
   public partial class ModalView : MvxViewController<ModalViewModel> 
   { 
       ... 
   } 
   

要打开不同的观点，你可以使用在MvvmCross新的导航服务。这样做只是让MvvmCross IoC容器注入一个实例到您的视图模型构造（更多细节可以发现here）：

public class HomeViewModel : MvxViewModel 
{ 
    private readonly IMvxNavigationService _navigationService; 

    public HomeViewModel(IMvxNavigationService navigationService) 
    { 
     _navigationService = navigationService ?? throw new ArgumentNullException(nameof(navigationService)); 
    } 
} 

编辑1： 为了能够表现出作为菜单的图标按钮，您需要在构成菜单的视图控制器上实现IMvxSidebarMenu界面（请参阅步骤3）。通过实现此接口，您可以覆盖菜单的默认行为，并且可以找到示例here（它是演示MvvmCross XamarinSidebar应用程序的一部分）。

编辑2： 我错误的认为，可以显示菜单（或它的图标），在其上导航压栈子视图按钮。情况并非如此，在堆栈上推送的子视图不会显示菜单按钮。在这些情况下，ShowPanel属性完全被忽略。

EDIT 3： 有完全完成该图案的一种方式。我们可以自定义堆栈导航UI，以便我们可以模仿Android工具栏。这种方法的工作原理，它基本上要求我们隐藏导航栏，并创建我们的自定义工具栏，它具有汉堡菜单，后退按钮和其他按钮，并将其放置在子视图的上部。这是需要密切和后退按钮的代码：

public override void ViewDidLoad() 
     { 
      base.ViewDidLoad(); 
      NavigationController.NavigationBarHidden = true; 

      btnClose.TouchUpInside += (object sender, EventArgs e) => 
      { 
       NavigationController.NavigationBarHidden = false; 
       NavigationController.PopViewController(false); 
      }; 

      btnShowMenu.TouchUpInside += (object sender, EventArgs e) => 
      { 
       var sideMenu = Mvx.Resolve<IMvxSidebarViewController>(); 
       sideMenu?.Open(MvxPanelEnum.Left); 
      }; 
     }