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

獲取工具下載 - DevExpress v21.2

主視圖導(dǎo)航

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

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

• 要在設(shè)計(jì)時(shí)注冊(cè)服務(wù)，請(qǐng)調(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)目綁定到將打開(kāi)特定應(yīng)用程序模塊的命令，主ViewModel繼承了 DocumentsViewModel，它也是由 Scaffolding Wizard 生成的。 此 ViewModel 提供了所需的功能：用于存儲(chǔ)應(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í)最初可見(jiàn)的模塊。 為此，請(qǐng)對(duì)用戶(hù)控件的 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)到屬性定義并更改其返回值以將另一個(gè)集合項(xiàng)設(shè)置為應(yīng)用程序啟動(dòng)時(shí)打開(kāi)的默認(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. 啟動(dòng)應(yīng)用程序來(lái)查看當(dāng)前結(jié)果。請(qǐng)注意，單擊功能區(qū)項(xiàng)目確實(shí)會(huì)顯示空白應(yīng)用程序模塊替代您的視圖（參見(jiàn)下圖）。

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

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

您還可以將合并的功能區(qū)頁(yè)面（如果有）設(shè)置為父功能區(qū)的當(dāng)前選定頁(yè)面，為此請(qǐ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

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

DevExpress WinForm | 下載試用

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

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

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