【轉】合理的佈局，絢麗的樣式，談談Winform程序的界面設計

從事Winform開發不少年了，因爲項目的須要，設計過各類各樣的界面效果。通常來講，運用傳統的界面控件元素，合理設計佈局，可以設計出比較中規中矩的標準界面；利用一些換膚的控件或者部分界面組件，可以設計出相對好看一些的界面效果，如之前很盛行的ActiveSkin、IrisSkin和DotNetSkin等，這些可以對傳統的界面元素進行換膚，確實比標準灰色的界面控件好看了不少。不過隨着界面控件的組件發展，目前通常傾向因而用較爲大型的控件組，他們除了提供設計得體的界面控件外，還提供了很是多種絢麗多彩的界面樣式供選擇，如DotNetBar、netadvantage、DevExpress等大型界面控件組。

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

 1、基於Ribbon樣式的界面

 

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

2、基於OutLook樣式的界面設計

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

以上經過把一個系統不少相關的功能模塊放到一顆樹上進行分類展現，對於一個比較複雜的人力資源管理系統或者其餘複雜功能的系統，也是一個比較合理的佈局方式，另外OutLook工具條仍是能夠隱藏起來，節省右邊多文檔界面的數據展現空間，這樣總體仍是比較合理及美觀的。其中右邊的佈局，還能夠經過SplitContainer方式把它分紅多個模塊，而後客戶想哪一個數據顯示面板大一點，拖動一下就能夠了，這樣不至於數據比較多的時候，致使顯示佈局很差的狀況。下面咱們來介紹下如何實現以上的界面佈局效果。

一、建立一個基於DevExpress.XtraEditors.XtraForm基類的窗體。以下代碼所示

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

二、在界面設計中，在DevExpress工具箱Navigation & Layout裏面拖動添加一個BarManager控件到窗體中，並刪除默認的工具欄Tools，並添加一些菜單項和狀態條數據。以下所示。

三、添加PanelControl和NavBarControl，添加一些測試功能按鈕。

因爲咱們須要使用MDI多文檔界面效果，所以先設置Mainform的IsMdiContainer屬性爲True。

而後添加一個PanelControl，設置其Dock爲Top佈局，爲該控件ContentImage設置一個背景圖片（事先用ＰＳ設計好，保存爲png格式便可），添加幾個小Lable，設置其的圖片和文字。

最後拖入一個NavBarControl控件到界面中，設置其Dock爲Left佈局，經過控件的右鍵菜單上的「Run Designer"進入設計界面，先隨便添加一些NavBarGroup和NavBarItem項目，粗略設置獲得界面效果以下所示。

注意，在NavBarcontrol裏面，默認是沒有一個Panel能夠添加一些特殊的控件，如樹、按鈕等，默認只有BarItem對象能夠添加進入。爲了在一個NavBarGroup裏面添加這樣的控件，須要修改NavBarGroup的屬性才行，以下所示。

 

四、添加DockManager和XtraTabbedMdiManager 控件實現多文檔佈局，其最終將以Tab方式進行展示。

繼續在上面的窗體中添加DockManager控件和XTraTabbedMdiManager控件，這兩個控件能夠實如今右邊以Tab方式展示多文檔佈局，這樣對用戶操做來講，能夠一次性打開多個窗體進行操做，方便不少，也必將美觀，是一種常見的佈局展示。爲了在窗體激活的時候，在頂部顯示關閉按鈕，其餘的不顯示，那麼須要設置XTraTabbedMdiManager控件的ClosePageButtonShowMode=InActiveTabPageHeader便可實現了。最終Tab效果以下所示。 

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

原文地址：http://www.cnblogs.com/wuhuacong/archive/2012/05/10/2494957.html