在之前的介紹中，您已經擁有了ViewModel和相關視圖，其中功能區項綁定到命令。但是主視圖中的功能區項目是假的并且沒有綁定到任何東西，因此從起始視圖導航是不可能的，首先為這些按鈕添加功能。

獲取工具下載 - DevExpress v21.2

主視圖導航

1. 要實現主視圖導航，請注冊相應的導航服務。之前的教程中提到了所選容器的類型會影響您需要使用的服務，您可以根據內容容器選擇使用的服務。

 如果您在視圖中使用了 DocumentManager 組件，請注冊 DocumentManagerService，在設計時或代碼中執行此操作。

• 要在設計時注冊服務，請調用 MvvmContext 組件的智能標記并單擊Services, Behaviors & Messages組中的 ‘Edit…’ 鏈接，添加 DocumentManagerService 并將TabbedView設置為編輯器右側屬性網格中的服務目標。

• 為了在代碼中做同樣的事情，將以下行添加到視圖的代碼中。

C#

mvvmContext1.RegisterService(DocumentManagerService.Create(tabbedView1));

VB.NET

mvvmContext1.RegisterService(DocumentManagerService.Create(tabbedView1))

2.將功能區項目綁定到將打開特定應用程序模塊的命令，主ViewModel繼承了 DocumentsViewModel，它也是由 Scaffolding Wizard 生成的。 此 ViewModel 提供了所需的功能：用于存儲應用程序模塊的 Modules 集合......

C#

public TModule[] Modules { get; private set; }

VB.NET

Private privateModules As TModule()
Public Property Modules() As TModule()
Get
Return privateModules
End Get
Private Set(ByVal value As TModule())
privateModules = value
End Set
End Property

…以及顯示它們的 Show 方法。

C#

public void Show(TModule module) {
ShowCore(module);
}

public IDocument ShowCore(TModule module) {
if(module == null || DocumentManagerService == null)
return null;
IDocument document = DocumentManagerService.FindDocumentByIdOrCreate(module.DocumentType, x => CreateDocument(module));
document.Show();
return document;
}

VB.NET

Public Sub Show(ByVal [module] As TModule)
ShowCore([module])
End Sub

Public Function ShowCore(ByVal [module] As TModule) As IDocument
If [module] Is Nothing OrElse DocumentManagerService Is Nothing Then
Return Nothing
End If
Dim document As IDocument = DocumentManagerService.FindDocumentByIdOrCreate([module].DocumentType, Function(x) CreateDocument([module]))
document.Show()
Return document
End Function

因此，您需要做的就是將按鈕綁定到這些參數化命令。

C#

var fluentAPI = mvvmContext1.OfType<MyDbContextViewModel>();
fluentAPI.BindCommand(biAccounts, (x, m) => x.Show(m), x => x.Modules[0]);
fluentAPI.BindCommand(biCategories, (x, m) => x.Show(m), x => x.Modules[1]);
fluentAPI.BindCommand(biTransactions, (x, m) => x.Show(m), x => x.Modules[2]);

VB.NET

Dim fluentAPI = mvvmContext1.OfType(Of MyDbContextViewModel)()
fluentAPI.BindCommand(biAccounts, Sub(x, m) x.Show(m), Function(x) x.Modules(0))
fluentAPI.BindCommand(biCategories, Sub(x, m) x.Show(m), Function(x) x.Modules(1))
fluentAPI.BindCommand(biTransactions, Sub(x, m) x.Show(m), Function(x) x.Modules(2))

3. （可選）設置在應用程序加載時最初可見的模塊。 為此，請對用戶控件的 Load 事件使用 Event-to-Command Behavior。

C#

fluentAPI.WithEvent<EventArgs>(this, "Load")
.EventToCommand(x => x.OnLoaded(null), x => x.DefaultModule);

VB.NET

fluentAPI.WithEvent(Of EventArgs)(Me, "Load")
.EventToCommand(Function(x) x.OnLoaded(Nothing), Function(x) x.DefaultModule)

默認情況下，DefaultModule 屬性返回 Modules 集合的第一項，跳轉到屬性定義并更改其返回值以將另一個集合項設置為應用程序啟動時打開的默認模塊。

C#

//Sets the third module, 'Transactions', as the default module
public virtual TModule DefaultModule { get { return Modules.ElementAt(2); } }

VB.NET

'Sets the third module, 'Transactions', as the default module
Public Overridable ReadOnly Property DefaultModule() As TModule
Get
Return Modules.ElementAt(2)
End Get
End Property

4. 啟動應用程序來查看當前結果。請注意，單擊功能區項目確實會顯示空白應用程序模塊替代您的視圖（參見下圖）。

發生這種情況是因為由于 MvvmConxtext 組件，每個 View 都知道其相關的 ViewModel，但 ViewModel 不知道它們在哪些 View 中使用。 要告訴應用程序應該為這個特定模塊使用哪個特定視圖，請使用 ViewType 屬性標記您的視圖，此屬性將字符串名稱作為參數。您的視圖名稱應該是相關視圖模型的名稱減去 ‘Model’ ，例如，與“AccountCollectionViewModel”相關的“Accounts”視圖應接收“AccountCollectionView”名稱，以下代碼片段顯示了所有三個詳細視圖所需的代碼。

C#

[DevExpress.Utils.MVVM.UI.ViewType("AccountCollectionView")]
public partial class AccountsView {
// ...
}

[DevExpress.Utils.MVVM.UI.ViewType("CategoryCollectionView")]
public partial class CategoriesView {
// ...
}

[DevExpress.Utils.MVVM.UI.ViewType("TransactionCollectionView")]
public partial class TransactionsView {
// ...
}

VB.NET

<DevExpress.Utils.MVVM.UI.ViewType("AccountCollectionView")>
Partial Public Class AccountsView
' ...
End Class

<DevExpress.Utils.MVVM.UI.ViewType("CategoryCollectionView")>
Partial Public Class CategoriesView
' ...
End Class

<DevExpress.Utils.MVVM.UI.ViewType("TransactionCollectionView")>
Partial Public Class TransactionsView
' ...
End Class

您可以使用更復雜的方法導航到視圖，而無需使用 ViewType 參數。

5. 最后，將詳細視圖的 RibbonControl 與主視圖的功能區合并。 為此，請將 DocumentManager 的 屬性設置為 Always。 您還可以將視圖中每個 RibbonControl 的 設置為 Always - 無論詳細視圖是否最大化，這都會合并您的功能區。

您還可以將合并的功能區頁面（如果有）設置為父功能區的當前選定頁面，為此請將以下代碼添加到主視圖的代碼中。

C#

ribbonControl1.Merge += ribbonControl1_Merge;

void ribbonControl1_Merge(object sender, DevExpress.XtraBars.Ribbon.RibbonMergeEventArgs e) {
ribbonControl1.SelectPage(e.MergedChild.SelectedPage);
}

VB.NET

Private ribbonControl1.Merge += AddressOf ribbonControl1_Merge

Private Sub ribbonControl1_Merge(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Ribbon.RibbonMergeEventArgs)
ribbonControl1.SelectPage(e.MergedChild.SelectedPage)
End Sub

下圖說明了結果 - Accounts 模塊打開，子功能區合并到主視圖的 RibbonControl。

DevExpress WinForm | 下載試用

DevExpress WinForm擁有180+組件和UI庫，能為Windows Forms平臺創建具有影響力的業務解決方案。DevExpress WinForms能完美構建流暢、美觀且易于使用的應用程序，無論是Office風格的界面，還是分析處理大批量的業務數據，它都能輕松勝任！

更多產品正版授權詳情及優惠，歡迎咨詢

DevExpress技術交流群6：600715373      歡迎一起進群討論