1. 程式人生 > 其它 >介面控制元件DevExpress WinForms MVVM入門教程——建立主、詳細檢視

介面控制元件DevExpress WinForms MVVM入門教程——建立主、詳細檢視

在上文中,Scaffolding Wizard 為您建立了ViewModel,現在您需要建立與這些ViewModel相關的檢視。

獲取工具下載 - DevExpress v21.2

主檢視

主應用程式檢視是您的主要應用程式表單。 要構建其內容,請刪除任何適當的內容容器(NavigationFrameDocumentManagerXtraTabControl等)和包含開啟模組按鈕的 RibbonControl 。

提示:所選內容容器的型別將影響您以後需要使用的服務。 如果您根本不刪除任何內容容器,將需要使用 WindowedDocumentManagerService 並且所有模組都將作為單獨的表單開啟。

例如您選擇了文件管理器,在這種情況下,您的主檢視將如下所示。

將所有功能區專案保留為fakes - 您將在下一步中提供它們的功能。

最後,將 MvvmContext 元件拖放到表單上,並在其智慧標記中選擇與此檢視關聯的主檢視模型。 由 Scaffolding Wizard 生成的主 ViewModel 將被稱為 <Your_DbContext_Name>ViewModel

詳細檢視

上一步中生成的Account、Transaction 和 Category 實體的 ViewModel 已經具有基本功能 - 建立新記錄、新增和刪除現有記錄等,現在為這些 ViewModel 中的每一個建立一個相關的檢視。

1. 新增一個新的 Views 解決方案資料夾,其中包含三個子資料夾:Account、Category 和 Transaction。 為每個資料夾放置一個新的 UserControl - 這些將是您的詳細檢視(參見下圖)。

2. 開啟 AccountView 使用者控制元件並建立一個簡單的 UI - 顯示帳戶的 GridControl 和執行簡單操作(新增、建立、修改和刪除帳戶)的 RibbonControl,可以得到這樣的結果:

3. 與主檢視類似,將 MvvmContext 元件拖放到使用者控制元件上,並將 AccountCollectionViewModel 設定為相關的 ViewModel。

重要提示:Scaffolding Wizard 將為每個表生成兩個 ViewModel,儲存在 DbContext 中。 例如,對於 Transactions 表,它將生成 TransactionsViewModel 和 TransactionsCollectionViewModel。 第一個 ViewModel 設計用於處理單個事務物件,適用於稍後建立的編輯表單;第二個 ViewModel 與整個交易集合一起使用,應該在詳細檢視中使用。

4. 現在您需要將專案新增到您的 RibbonControl,與主 ViewModel 不同,在這裡您可以自動生成專案。 您自動生成的 AccountCollectionViewModel 派生自父 CollectionViewModel,它聲明瞭使用集合的基本方法 - 新增新物件、重新整理集合、編輯當前物件等,此功能位於命令中。MvvmContext 元件能夠從 ViewModel 檢索命令並將相應的按鈕新增到 RibbonControl,為此,請呼叫元件智慧標籤並單擊 ‘Retrieve Commands’連結。

這將檢索四個命令 - 新建、編輯、重新整理和刪除,將為它們中的每一個建立一個相應的 RibbonControl 項。 重建解決方案,這些自動生成的專案將自動從影象庫和上下文相關影象接收適當的影象。

5. 如果您檢查 CollectionViewModel,將看到此 ViewModel 宣告的命令比新增到功能區控制元件的這四個命令還多。 未新增所有剩餘命令的原因是因為它們標有特定的顯示Data Annotation Attribute,該屬性從命令編輯器中“隱藏”了此命令。

C#

[Display(AutoGenerateField = false)]
public void Close() {
if(DocumentOwner != null)
DocumentOwner.Close(this);
}

VB.NET

<Display(AutoGenerateField := False)>
Public Sub Close()
If DocumentOwner IsNot Nothing Then
DocumentOwner.Close(Me)
End If
End Sub

要為編輯器 ‘open’ 此命令,請將 false 替換為 true 或簡單地刪除整個屬性。 當您這樣做時, ‘Close’ 命令應出現在命令編輯器中,您將能夠為其生成功能區專案。

進一步的 CollectionViewModel 檢查將顯示一些命令,如‘Edit’和‘Delete’,後面跟著相應的布林值“Can…”屬性。 在 POCO ViewModels 中,此類屬性充當 CanExecute 條件,指定相關命令當前是否可用,因此繫結到該命令的 UI 元素當前是否啟用。

C#

public bool CanEdit(TProjection projectionEntity) {
return projectionEntity != null && !IsLoading;
}

VB.NET

Public Function CanEdit(ByVal projectionEntity As TProjection) As Boolean
Return projectionEntity IsNot Nothing AndAlso Not IsLoading
End Function

這是一種合理的方法,因為如果當前沒有選擇集合物件(例如,特定交易),您將無法單擊‘Edit’等按鈕。 這意味著 Scaffolding Wizard 也會處理這些細節,您無需手動實現此邏輯。

6. 重複前面的步驟,為 CategoriesCollection 和 TransactionsCollection ViewModels 建立類似的詳細檢視。

DevExpress WinForm | 下載試用

DevExpress WinForm擁有180+元件和UI庫,能為Windows Forms平臺建立具有影響力的業務解決方案。DevExpress WinForms能完美構建流暢、美觀且易於使用的應用程式,無論是Office風格的介面,還是分析處理大批量的業務資料,它都能輕鬆勝任!


DevExpress技術交流群5:742234706      歡迎一起進群討論

更多DevExpress線上公開課、中文教程資訊請上中文網獲取