MvvmCross 5.x的MvvmCross侧边栏导航

时间:2017-06-12 10:43:21

标签: navigation mvvmcross sidebar flyout

我要同时为我的应用,侧边栏导航和父子导航实现两种类型的导航。 我的应用程序以汉堡包(侧边栏)菜单开始。

侧栏菜单中的第一项应执行导航堆栈的重置并打开主视图。 主视图控制器应该启动根堆栈导航,这样主视图上的每个按钮都应该打开一个新视图,新视图上的按钮应该打开另一个视图等。

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

我正在使用MvvmCross 5.x,并且没有与5.x版本兼容的示例。 有没有人能指出我可用的样品?

1 个答案:

答案 0 :(得分:10)

首先我假设您正在尝试为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类,将您的iOS项目配置为使用Setup

    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,{ {1}}设置为HintTypeResetRoot设置为ShowPanel),如下所示:

    true
  5. 对于所有子视图(从主视图打开),请确保将[MvxSidebarPresentation(MvxPanelEnum.Center, MvxPanelHintType.ResetRoot, true)] public class HomeView : MvxViewController<HomeViewModel> { ... } 设置为MvxSidebarPresentationAttributePanel设置为Center HintType 并根据您是否要在子页面上显示菜单按钮,将PushPanel设置为ShowPaneltrue ,如下所示:< / p>

    false
  6. 最后一步是为菜单中的所有其他按钮设置视图控制器。这些只需使用[MvxSidebarPresentation(MvxPanelEnum.Center, MvxPanelHintType.PushPanel, true)] public class ChildView : MvxViewController<ChildViewModel> { ... } 属性进行修饰即可将其打开为对话框(可以找到详细的文档here)。一个例子看起来像这样:

    MvxModalPresentationAttribute
  7. 要打开不同的视图,您可以使用MvvmCross中的新导航服务。为此,只需允许MvvmCross IoC容器将一个实例注入到视图模型构造函数中(可以找到更多详细信息here):

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

    编辑1: 为了能够在菜单按钮上显示图标,您需要在组成菜单的视图控制器上实现public class HomeViewModel : MvxViewModel { private readonly IMvxNavigationService _navigationService; public HomeViewModel(IMvxNavigationService navigationService) { _navigationService = navigationService ?? throw new ArgumentNullException(nameof(navigationService)); } } 界面(参见步骤3)。通过实现此接口,您可以覆盖菜单的默认行为,并且可以找到示例here(这是演示MvvmCross XamarinSidebar应用程序的一部分)。

    编辑2: 我错误地建议您可以在导航堆栈上推送的子视图上显示菜单(或它的图标)按钮。事实并非如此,在堆栈上推送的子视图不会显示菜单按钮。在这些情况下,IMvxSidebarMenu属性将被完全忽略。

    编辑3: 有一种方法可以完全实现这种模式。我们可以自定义堆栈导航UI,这样我们就可以模仿像Android工具栏这样的东西。这种方法有效,它基本上要求我们隐藏导航栏并创建我们的自定义工具栏,其中包含汉堡菜单,后退按钮和其他按钮,并将其放在子视图的上半部分。以下是关闭和后退按钮所需的代码:

    ShowPanel