從事Winform開發很多年了，由於專案的需要，設計過各種各樣的介面效果。一般來說，運用傳統的介面控制元件元素，合理設計佈局，能夠設計出比較中規中矩的標準介面；利用一些換膚的控制元件或者部分介面元件，能夠設計出相對好看一些的介面效果，如以前很盛行的ActiveSkin、IrisSkin和DotNetSkin等，這些能夠對傳統的介面元素進行換膚，確實比標準灰色的介面控制元件好看了很多。不過隨著介面控制元件的元件發展，目前一般傾向於是用較為大型的控制元件組，他們除了提供設計得體的介面控制元件外，還提供了非常多種絢麗多彩的介面樣式供選擇，如DotNetBar、netadvantage、DevExpress等大型介面控制元件組。

無論介面設計如何變化，一般基本原則都是為客戶提供直觀、易用、體驗效果較好的介面效果哦，從Office的發展歷程我們也可以看到整體的介面效果趨向，從開始的標準控制元件到目前的Ribbon窗體，從單色調變化到絢麗多彩的介面樣式，都給我們提供很好的介面設計參考，大型的介面元件也是模仿這一趨勢。言歸正傳，我們來談談詳細一點的東西，目前我趨向於採用一種基於Ribbon樣式的介面，以及一種基於傳統介面結合OutLook樣式的介面設計。

 一、基於Ribbon樣式的介面

 以上的介面樣式，是一種比較大氣、符合Office介面效果的介面佈局，通過把不同的功能塊集中在不同的面板上顯示，確實簡潔、美觀很多，本文不重複介紹該介面效果的優劣，我們主要來集中看看下面的另外一種介面效果。

二、基於OutLook樣式的介面設計

其實OutLook樣式很早就有，也可以在很多公開的控制元件組中看到，如果僅僅是追求部分的OutLook介面效果，而不是整體性的方案，那麼CodeProject上的這款開源Outlook元件，估計是其中的佼佼者（http://www.codeproject.com/Articles/43181/A-Serious-Outlook-Style-Navigation-Pane-Control）。不過由於需求的是整體性效果，而且還要考慮更多控制元件介面樣式的一致性及美觀性，因此我們還是基於DevExpress介面組來設計這樣的OutLook介面效果，會顯得更加美觀大方一點。介面效果如下所示。

以上通過把一個系統很多相關的功能模組放到一顆樹上進行分類展示，對於一個比較複雜的人力資源管理系統或者其他複雜功能的系統，也是一個比較合理的佈局方式，另外OutLook工具條還是可以隱藏起來，節省右邊多文件介面的資料展示空間，這樣整體還是比較合理及美觀的。其中右邊的佈局，還可以通過SplitContainer方式把它分成多個模組，然後客戶想哪個資料顯示面板大一點，拖動一下就可以了，這樣不至於資料比較多的時候，導致顯示佈局不好的情況。下面我們來介紹下如何實現以上的介面佈局效果。

1、建立一個基於DevExpress.XtraEditors.XtraForm基類的窗體。如下程式碼所示

public partial class MainForm : DevExpress.XtraEditors.XtraForm
    {
        public MainForm()
        {
            InitializeComponent();
        }
    }

2、在介面設計中，在DevExpress工具箱Navigation & Layout裡面拖動新增一個BarManager控制元件到窗體中，並刪除預設的工具欄Tools，並新增一些選單項和狀態條資料。如下所示。

3、新增PanelControl和NavBarControl，新增一些測試功能按鈕。

由於我們需要使用MDI多文件介面效果，因此先設定Mainform的IsMdiContainer屬性為True。

然後新增一個PanelControl，設定其Dock為Top佈局，為該控制元件ContentImage設定一個背景圖片（事先用ＰＳ設計好，儲存為png格式即可），新增幾個小Lable，設定其的圖片和文字。

最後拖入一個NavBarControl控制元件到介面中，設定其Dock為Left佈局，通過控制元件的右鍵選單上的“Run Designer"進入設計介面，先隨便新增一些NavBarGroup和NavBarItem專案，粗略設定得到介面效果如下所示。

注意，在NavBarcontrol裡面，預設是沒有一個Panel可以新增一些特殊的控制元件，如樹、按鈕等，預設只有BarItem物件可以新增進入。為了在一個NavBarGroup裡面新增這樣的控制元件，需要修改NavBarGroup的屬性才行，如下所示。

4、新增DockManager和XtraTabbedMdiManager 控制元件實現多文件佈局，其最終將以Tab方式進行展現。

繼續在上面的窗體中新增DockManager控制元件和XTraTabbedMdiManager控制元件，這兩個控制元件可以實現在右邊以Tab方式展現多文件佈局，這樣對使用者操作來說，可以一次性開啟多個窗體進行操作，方便很多，也必將美觀，是一種常見的佈局展現。為了在窗體啟用的時候，在頂部顯示關閉按鈕，其他的不顯示，那麼需要設定XTraTabbedMdiManager控制元件的ClosePageButtonShowMode=InActiveTabPageHeader即可實現了。最終Tab效果如下所示。 

以上就是我設計的一個系統介面的具體操作流程，其實很多時候，介紹總是很快，摸索總是很慢，這個就是知識積累的效率提升。當然，要設計好一個系統介面，除了考慮介面的佈局美觀性、還要考慮圖示的協調性、還有就是整體的框架，要可以比較好的適應這些佈局控制元件的操作，不能太過臃腫或者難以閱讀。