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

本文專門介紹流行的應(yīng)用程序界面如何構(gòu)建——一個(gè)經(jīng)典的布局，包含代表主要工作區(qū)域的選項(xiàng)卡或MDI文檔、窗體一側(cè)的面板和頂部的主菜單，類似于Microsoft Visual Studio中的用戶界面。

獲取DevExpress v22.2正式版下載

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

本系列文章將分成三部分展示如何執(zhí)行以下操作：

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

在接下來(lái)的這個(gè)部分中，將學(xué)習(xí)如何使用Document Manager（文檔管理器）組件。

Step 2 - Dock Manager

在這個(gè)部分中，您將學(xué)習(xí)如何在單個(gè)應(yīng)用程序中使用Document Manager組件和Dock Manager，Dock Manager提供對(duì)其擁有的Dock面板的行為和視圖設(shè)置的集中控制。

1. 在Visual Studio工具箱中找到DockManager組件，并將其拖放到窗體上。

或者，您也可以通過(guò)DocumentManager的智能標(biāo)記來(lái)實(shí)現(xiàn)，如下圖所示。

2. 調(diào)用DockManager智能標(biāo)記，并通過(guò)相應(yīng)的鏈接添加所需的DockPanels。

在Visual Studio中，Toolbox自動(dòng)隱藏面板停靠在窗體的左側(cè)邊緣，Solution Explorer（解決方案資源管理器）和Properties（屬性）面板停靠在右側(cè)邊緣，“錯(cuò)誤”、“警告”和“消息”面板組合在窗體底部的選項(xiàng)卡組中，通過(guò)添加六個(gè)面板來(lái)模擬下面所示的布局。

注意，Document Manager組件會(huì)在新面板出現(xiàn)時(shí)自動(dòng)縮放。

3. 拖動(dòng)面板來(lái)重新排列，并通過(guò)停靠提示將它們停靠到特定的地方。

自定義面板之后，應(yīng)該有一個(gè)類似于下面的UI。

4. 現(xiàn)在，當(dāng)DockManager和DocumentManager在一個(gè)表單中同時(shí)使用時(shí)，您將從這些控件中獲得幾個(gè)獨(dú)特的特性，下面列出了它們的兩個(gè)主要特征。

• 最終用戶可以按Ctrl+Tab或Ctrl+Shift+Tab在文檔選擇器中的文檔和面板中導(dǎo)航。
• DockPanels可以作為標(biāo)簽文檔停靠到DocumentManager，但是不能做相反的事情——文檔不能停靠到面板上，此操作由DockManager.DockMode屬性控制，并模擬Visual Studio的操作。

5. Dock面板顯示默認(rèn)按鈕——關(guān)閉，自動(dòng)隱藏和最大化，開(kāi)發(fā)者可以通過(guò)、 和 屬性隱藏這些按鈕和/或添加自己的頭部按鈕，下圖演示了添加到Errors面板的自定義“Print”按鈕。

如您所見(jiàn)，自定義打印按鈕圖標(biāo)在懸停時(shí)以皮膚顏色繪制。這個(gè)特性被稱為Glyph skininning，它允許開(kāi)發(fā)者以與默認(rèn)按鈕相同的模式繪制自己的自定義按鈕，同時(shí)還可以使用它為應(yīng)用程序構(gòu)建單色UI，其中項(xiàng)目的標(biāo)題和符合用相同的顏色繪制。除了DockManager之外，許多其他控件也支持此功能。

所有DevExpress控件及其元素都使用皮膚中的圖像和圖像設(shè)置，要修改默認(rèn)DockPanel按鈕的圖像(關(guān)閉，自動(dòng)隱藏)，運(yùn)行WinForms Skin Editor（皮膚編輯器）并創(chuàng)建一個(gè)自定義皮膚。

• 在皮膚編輯器中，跳轉(zhuǎn)到“Bars”集合并展開(kāi)“Dock Panel Button Glyphs”項(xiàng)。
• 選擇所需的項(xiàng)目狀態(tài)(例如，Normal)并加載一個(gè)新的字形，還可以對(duì)現(xiàn)有圖像進(jìn)行著色。為此，雙擊任何字形面板來(lái)打開(kāi)Edit SVG Palette對(duì)話框，選擇所需的字形并設(shè)置其新顏色。
• 保存自定義皮膚，將其導(dǎo)出為.dll程序集，并將此庫(kù)添加到Visual Studio項(xiàng)目中。

類似Visual Studio UI的應(yīng)用程序快完成了，最后一步是添加基于Bar Manager組件的應(yīng)用程序菜單。