本系列教程致力于教大家如何創(chuàng)建流行的應(yīng)用程序UI，這種經(jīng)典布局包含代表主要工作區(qū)域的選項(xiàng)卡式或 MDI 文檔、表單側(cè)面的面板和頂部的主菜單，類(lèi)似于 Microsoft Visual Studio 中的 UI 。

獲取工具下載 - DevExpress WinForm v21.1

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ù)，它都能輕松勝任！

本教程將向您展示如何執(zhí)行以下操作：

• 使用創(chuàng)建傳統(tǒng)的基于文檔的工作區(qū)；
• 添加 組件并實(shí)現(xiàn)常規(guī)或自動(dòng)隱藏面板；
• 使用組件來(lái)管理文檔和面板。

Step 1 - 文檔管理器

在這一步中，您將學(xué)習(xí)如何使用 Document Manager 組件。

文檔管理器允許您根據(jù)相應(yīng)的視圖(Views)創(chuàng)建選項(xiàng)卡式或 MDI 應(yīng)用程序 UI，主要的文檔管理器元素是文檔 - 能夠封裝所需內(nèi)容并基于父視圖顯示的對(duì)象。

1. 啟動(dòng) Visual Studio，創(chuàng)建一個(gè)新的Windows Forms Application項(xiàng)目，然后指定其名稱(chēng)和位置。

2. 在 Visual Studio 工具箱中找到 DocumentManager 組件并將其拖放到您的表單上。

3. 通過(guò)單擊控件右上角的智能標(biāo)記按鈕調(diào)用 DocumentManager 的智能標(biāo)記，默認(rèn)情況下，新添加的 DocumentManager 應(yīng)用了選項(xiàng)卡式視圖。您可以通過(guò)相應(yīng)的‘Convert to…’鏈接將其更改為另一個(gè)可用的視圖，默認(rèn)選項(xiàng)卡式視圖適用于當(dāng)前示例，因此保持不變并調(diào)用 DocumentManager Designer。

4. 切換到設(shè)計(jì)器中的 ‘Documents’ 部分。

 5. 在Solution Explorer中右鍵單擊您的項(xiàng)目并選擇Add New Item，如下所示。

在顯示的對(duì)話框中，選擇User Control并輸入其名稱(chēng)。

根據(jù)您的要求多次重復(fù)此步驟，然后將控件添加到每個(gè)User Control并根據(jù)需要自定義其屬性，確保您的項(xiàng)目編譯沒(méi)有錯(cuò)誤，然后繼續(xù)下一步。

6. 您現(xiàn)在擁有多個(gè)代表最終用戶工作區(qū)的User Control，現(xiàn)在為每個(gè)現(xiàn)有的User Control添加一個(gè)文檔。 打開(kāi)設(shè)計(jì)器并再次轉(zhuǎn)到Documents部分，如您所見(jiàn)，Populate按鈕現(xiàn)在可用，單擊此按鈕可為項(xiàng)目中的每個(gè)User Control添加一個(gè)文檔。

請(qǐng)注意，每個(gè)文檔都通過(guò) BaseDocument.ControlName 和 BaseDocument.ControlTypeName 屬性與相應(yīng)的用戶控件相關(guān)聯(lián)。

7. 最后，處理視圖的 事件并將所需的控件傳遞給每個(gè)文檔：

C#

private void tabbedView1_QueryControl(object sender, DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs e) {
if (e.Document.ControlName == "UserControl1") e.Control = new UserControl1();
else e.Control = new UserControl2();
}

VB.NET

Private Sub tabbedView1_QueryControl(sender As Object, e As DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs)
If e.Document.ControlName = "UserControl1" Then
e.Control = New UserControl1()
Else
e.Control = New UserControl2()
End If
End Sub

8. 下圖說(shuō)明了應(yīng)用 Office 2013 皮膚的結(jié)果。

在下一步中，您將學(xué)習(xí)如何在您的應(yīng)用程序中結(jié)合使用 Document Manager 和 Dock Manager。

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