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