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

獲取工具下載 - DevExpress v21.2

主視圖導(dǎo)航

1. 要實(shí)現(xiàn)主視圖導(dǎo)航，請注冊相應(yīng)的導(dǎo)航服務(wù)。之前的教程中提到了所選容器的類型會影響您需要使用的服務(wù)，您可以根據(jù)內(nèi)容容器選擇使用的服務(wù)。

 如果您在視圖中使用了 DocumentManager 組件，請注冊 DocumentManagerService，在設(shè)計(jì)時(shí)或代碼中執(zhí)行此操作。

• 要在設(shè)計(jì)時(shí)注冊服務(wù)，請調(diào)用 MvvmContext 組件的智能標(biāo)記并單擊Services, Behaviors & Messages組中的 ‘Edit…’ 鏈接，添加 DocumentManagerService 并將TabbedView設(shè)置為編輯器右側(cè)屬性網(wǎng)格中的服務(wù)目標(biāo)。

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

C#

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

VB.NET

mvvmContext1.RegisterService(DocumentManagerService.Create(tabbedView1))

2.將功能區(qū)項(xiàng)目綁定到將打開特定應(yīng)用程序模塊的命令，主ViewModel繼承了 DocumentsViewModel，它也是由 Scaffolding Wizard 生成的。 此 ViewModel 提供了所需的功能：用于存儲應(yīng)用程序模塊的 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

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

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. （可選）設(shè)置在應(yīng)用程序加載時(shí)最初可見的模塊。 為此，請對用戶控件的 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)

默認(rèn)情況下，DefaultModule 屬性返回 Modules 集合的第一項(xiàng)，跳轉(zhuǎn)到屬性定義并更改其返回值以將另一個集合項(xiàng)設(shè)置為應(yīng)用程序啟動時(shí)打開的默認(rèn)模塊。

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. 啟動應(yīng)用程序來查看當(dāng)前結(jié)果。請注意，單擊功能區(qū)項(xiàng)目確實(shí)會顯示空白應(yīng)用程序模塊替代您的視圖（參見下圖）。

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

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

您可以使用更復(fù)雜的方法導(dǎo)航到視圖，而無需使用 ViewType 參數(shù)。

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

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

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

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

DevExpress WinForm | 下載試用

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

更多產(chǎn)品正版授權(quán)詳情及優(yōu)惠，歡迎咨詢

DevExpress技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論