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

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

獲取DevExpress v22.2正式版下載

DevExpress技術交流群7：674691612      歡迎一起進群討論

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

• 使用Document Manager（文檔管理器）創建傳統的基于文檔的工作空間；
• 添加Dock Manager組件并實現常規或自動隱藏面板；
• 使用Bar Manager組件來管理文檔和面板。

在接下來的這個部分中，將學習如何使用Document Manager（文檔管理器）組件。

Step 2 - Dock Manager

在這個部分中，您將學習如何在單個應用程序中使用Document Manager組件和Dock Manager，Dock Manager提供對其擁有的Dock面板的行為和視圖設置的集中控制。

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

或者，您也可以通過DocumentManager的智能標記來實現，如下圖所示。

2. 調用DockManager智能標記，并通過相應的鏈接添加所需的DockPanels。

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

注意，Document Manager組件會在新面板出現時自動縮放。

3. 拖動面板來重新排列，并通過停靠提示將它們停靠到特定的地方。

自定義面板之后，應該有一個類似于下面的UI。

4. 現在，當DockManager和DocumentManager在一個表單中同時使用時，您將從這些控件中獲得幾個獨特的特性，下面列出了它們的兩個主要特征。

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

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

如您所見，自定義打印按鈕圖標在懸停時以皮膚顏色繪制。這個特性被稱為Glyph skininning，它允許開發者以與默認按鈕相同的模式繪制自己的自定義按鈕，同時還可以使用它為應用程序構建單色UI，其中項目的標題和符合用相同的顏色繪制。除了DockManager之外，許多其他控件也支持此功能。

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

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

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