MvvmCross 5.x的MvvmCross侧边栏导航 [英] MvvmCross sidebar navigation for MvvmCross 5.x

问题描述

我可以同时为我的应用实现两种类型的导航，即边栏导航和父子导航. 我的应用程序以汉堡包(侧边栏)菜单开头.

I with to implement two types of navigation for my app, sidebar navigation and parent-child navigation at the same time. My app starts with hamburger (sidebar) menu.

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

First item in sidebar menu should perform reset of the navigation stack and open home view. Home view controller should start a root stack navigation so every button on the home view should open a new view, button on a new view should open another view etc.

侧边栏菜单中的所有其他项目都应打开一个新视图作为对话框.

Every other item in sidebar menu should open a new view as a dialog.

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

I'm using MvvmCross 5.x, and there is no sample compatible with 5.x version. Is there anyone who can point me to a usable sample?

推荐答案

首先，我假设您正在尝试为iOS实现此功能.如果是Android，则只需使用导航抽屉即可.

First of I assume you are trying to implement this for iOS. In case of Android you could simply use the Navigation Drawer.

iOS上的示例尚未转换为MvvmCross 5.x(我将从a.s.a.p.开始这样做)，但这应该是微不足道的.让我尝试向您介绍:

The sample on iOS is not yet converted to MvvmCross 5.x (I will start doing so a.s.a.p.), however this should be trivial. Let me try to walk you through it:

1. 确保将MvvmCross iOS支持软件包添加到iOS项目:Install-Package MvvmCross.iOS.Support -Version 5.0.2(或使用GUI)

2. 通过将以下代码添加到iOS项目中的Setup类中，将iOS项目配置为使用MvxSidebarPresenter:

1. Make sure you add the MvvmCross iOS Support package to your iOS project: Install-Package MvvmCross.iOS.Support -Version 5.0.2 (or use the GUI)

2. Configure your iOS project to use the MvxSidebarPresenter by adding the following code to the Setup class in your iOS project:

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

创建一个视图控制器，用作弹出菜单并用MvxSidebarPresentationAttribute装饰它.该视图控制器将充当您的菜单.您可以(或者更好的方法)将其链接到将处理导航部分的视图模型(当用户选择菜单项时).这个视图控制器可能看起来像这样:

Create a view controller which acts as you flyout menu and decorate it with the MvxSidebarPresentationAttribute. This view controller will act as your menu. You can (or better should) link it to a view model which will handle the navigation part (when the user selects a menu item). This view controller could look something like this:

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

要确保您的主视图充当根控制器，只需将MvxSidebarPresentationAttribute添加到主视图控制器，并确保将属性Panel设置为Center，将HintType设置为ResetRoot和ShowPanel设置为true)，如下所示:

To make sure your home view act as a root controller simply add the MvxSidebarPresentationAttribute to the home view controller and make sure the property Panel is set to Center, HintType is set to ResetRoot and ShowPanel is set to true), like so:

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

对于所有子视图(从主视图打开)，请确保设置MvxSidebarPresentationAttribute，并将属性Panel设置为Center，HintType设置为PushPanel 并取决于如果要在子页面上显示菜单按钮，请将ShowPanel设置为true或false ，如下所示:

For all child views (opened from the home view) make sure you set the MvxSidebarPresentationAttribute with the property Panel set to Center, HintType set to PushPanel and depending if you want to display the menu button on the child pages set the ShowPanel to true or false, like so:

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

最后一步是为菜单中的所有其他按钮设置视图控制器.可以简单地用MvxModalPresentationAttribute属性装饰它们，以将它们作为对话框打开(详细文档可以在

The last step is to setup the view controller for all other buttons in the menu. These can simply be decorated with the MvxModalPresentationAttribute attribute to open them as a dialog (detailed documentation can be found here). An example could look something like this:

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

要打开不同的视图，可以使用MvvmCross中的新导航服务.为此，只需允许MvvmCross IoC容器向您的视图模型构造函数中注入一个实例(更多详细信息，请参见此处):

To open the different views you can make use of the new navigation service in MvvmCross. To do so simply allow the MvvmCross IoC container to inject an instance into your view models constructor (more details can be found here):

public class HomeViewModel : MvxViewModel
{
    private readonly IMvxNavigationService _navigationService;

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

为了能够在菜单按钮上显示图标，您需要在构成菜单的视图控制器上实现IMvxSidebarMenu界面(请参阅第3步).通过实现此接口，您可以覆盖菜单的默认行为，并且可以在

EDIT 1: To be able to show an icon on as menu button, you'll need to implement the IMvxSidebarMenu interface on the view controller that makes up the menu (see step 3). By implementing this interface you can override the default behaviour of the menu, and example can be found here (which is part of the demo MvvmCross XamarinSidebar application).

我错误地建议您可以在推入导航堆栈的子视图上显示菜单(或其图标)按钮.事实并非如此，推送到堆栈上的子视图将不会显示菜单按钮.在这些情况下，ShowPanel属性将被完全忽略.

EDIT 2: I have mistakenly suggested that you can show the menu (or it's icon) button on a child view which is pushed on the navigation stack. This is not the case, child views that are pushed on the stack will not show the menu button. In these cases the ShowPanel property is ignored completely.

有一种方法可以完全完成该模式.我们可以自定义堆栈导航UI，以便模仿Android工具栏之类的东西.这种方法有效，并且基本上需要我们隐藏导航栏，并创建包含汉堡菜单，后退按钮和其他按钮的自定义工具栏，并将其放在子视图的上部.这是关闭和后退按钮所需的代码:

EDIT 3: There is a way to accomplish that pattern entirely. We can customize stack navigation UI so we can mimic something like Android toolbar. This approach works and it basically requires us to make navigation bar hidden and create our custom toolbar that has hamburger menu, back button and other buttons and put it in the upper part of the child view. Here is the code needed for close and back buttons:

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

这篇关于MvvmCross 5.x的MvvmCross侧边栏导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！