DevExpress Winforms Controls 內(nèi)置140多個(gè)UI控件和庫，完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序。DevExpress WinForm v20.2全新發(fā)布，想要體驗(yàn)？點(diǎn)擊下載>>

從事Winform開發(fā)很多年了，由于項(xiàng)目的需要，設(shè)計(jì)過各種各樣的界面效果。一般來說，運(yùn)用傳統(tǒng)的界面控件元素，合理設(shè)計(jì)布局，能夠設(shè)計(jì)出比較中規(guī)中矩的標(biāo)準(zhǔn)界面；利用一些換膚的控件或者部分界面組件，能夠設(shè)計(jì)出相對(duì)好看一些的界面效果，如以前很盛行的ActiveSkin、IrisSkin和DotNetSkin等，這些能夠?qū)鹘y(tǒng)的界面元素進(jìn)行換膚，確實(shí)比標(biāo)準(zhǔn)灰色的界面控件好看了很多。不過隨著界面控件的組件發(fā)展，目前一般傾向于是用較為大型的控件組，他們除了提供設(shè)計(jì)得體的界面控件外，還提供了非常多種絢麗多彩的界面樣式供選擇，如DotNetBar、netadvantage、DevExpress等大型界面控件組。

無論界面設(shè)計(jì)如何變化，一般基本原則都是為客戶提供直觀、易用、體驗(yàn)效果較好的界面效果哦，從Office的發(fā)展歷程我們也可以看到整體的界面效果趨向，從開始的標(biāo)準(zhǔn)控件到目前的Ribbon窗體，從單色調(diào)變化到絢麗多彩的界面樣式，都給我們提供很好的界面設(shè)計(jì)參考，大型的界面組件也是模仿這一趨勢(shì)。言歸正傳，我們來談?wù)勗敿?xì)一點(diǎn)的東西，目前我趨向于采用一種基于Ribbon樣式的界面，以及一種基于傳統(tǒng)界面結(jié)合OutLook樣式的界面設(shè)計(jì)。

一、基于Ribbon樣式的界面

以上的界面樣式，是一種比較大氣、符合Office界面效果的界面布局，通過把不同的功能塊集中在不同的面板上顯示，確實(shí)簡(jiǎn)潔、美觀很多，本文不重復(fù)介紹該界面效果的優(yōu)劣，我們主要來集中看看下面的另外一種界面效果。

二、基于OutLook樣式的界面設(shè)計(jì)

其實(shí)OutLook樣式很早就有，也可以在很多公開的控件組中看到，如果僅僅是追求部分的OutLook界面效果，而不是整體性的方案，那么CodeProject上的這款開源Outlook組件，估計(jì)是其中的佼佼者（）。不過由于需求的是整體性效果，而且還要考慮更多控件界面樣式的一致性及美觀性，因此我們還是基于DevExpress界面組來設(shè)計(jì)這樣的OutLook界面效果，會(huì)顯得更加美觀大方一點(diǎn)。界面效果如下所示。

以上通過把一個(gè)系統(tǒng)很多相關(guān)的功能模塊放到一顆樹上進(jìn)行分類展示，對(duì)于一個(gè)比較復(fù)雜的人力資源管理系統(tǒng)或者其他復(fù)雜功能的系統(tǒng)，也是一個(gè)比較合理的布局方式，另外OutLook工具條還是可以隱藏起來，節(jié)省右邊多文檔界面的數(shù)據(jù)展示空間，這樣整體還是比較合理及美觀的。其中右邊的布局，還可以通過SplitContainer方式把它分成多個(gè)模塊，然后客戶想哪個(gè)數(shù)據(jù)顯示面板大一點(diǎn)，拖動(dòng)一下就可以了，這樣不至于數(shù)據(jù)比較多的時(shí)候，導(dǎo)致顯示布局不好的情況。下面我們來介紹下如何實(shí)現(xiàn)以上的界面布局效果。

1. 創(chuàng)建一個(gè)基于DevExpress.XtraEditors.XtraForm基類的窗體。如下代碼所示：

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

2. 在界面設(shè)計(jì)中，在DevExpress工具箱Navigation & Layout里面拖動(dòng)添加一個(gè)BarManager控件到窗體中，并刪除默認(rèn)的工具欄Tools，并添加一些菜單項(xiàng)和狀態(tài)條數(shù)據(jù)。如下所示。

3. 添加PanelControl和NavBarControl，添加一些測(cè)試功能按鈕。

由于我們需要使用MDI多文檔界面效果，因此先設(shè)置Mainform的IsMdiContainer屬性為True。

然后添加一個(gè)PanelControl，設(shè)置其Dock為Top布局，為該控件ContentImage設(shè)置一個(gè)背景圖片（事先用ＰＳ設(shè)計(jì)好，保存為png格式即可），添加幾個(gè)小Lable，設(shè)置其的圖片和文字。

最后拖入一個(gè)NavBarControl控件到界面中，設(shè)置其Dock為L(zhǎng)eft布局，通過控件的右鍵菜單上的“Run Designer"進(jìn)入設(shè)計(jì)界面，先隨便添加一些NavBarGroup和NavBarItem項(xiàng)目，粗略設(shè)置得到界面效果如下所示。

注意，在NavBarcontrol里面，默認(rèn)是沒有一個(gè)Panel可以添加一些特殊的控件，如樹、按鈕等，默認(rèn)只有BarItem對(duì)象可以添加進(jìn)入。為了在一個(gè)NavBarGroup里面添加這樣的控件，需要修改NavBarGroup的屬性才行，如下所示。

4. 添加DockManager和XtraTabbedMdiManager 控件實(shí)現(xiàn)多文檔布局，其最終將以Tab方式進(jìn)行展現(xiàn)。

繼續(xù)在上面的窗體中添加DockManager控件和XTraTabbedMdiManager控件，這兩個(gè)控件可以實(shí)現(xiàn)在右邊以Tab方式展現(xiàn)多文檔布局，這樣對(duì)用戶操作來說，可以一次性打開多個(gè)窗體進(jìn)行操作，方便很多，也必將美觀，是一種常見的布局展現(xiàn)。為了在窗體激活的時(shí)候，在頂部顯示關(guān)閉按鈕，其他的不顯示，那么需要設(shè)置XTraTabbedMdiManager控件的ClosePageButtonShowMode=InActiveTabPageHeader即可實(shí)現(xiàn)了。最終Tab效果如下所示。

以上就是我設(shè)計(jì)的一個(gè)系統(tǒng)界面的具體操作流程，其實(shí)很多時(shí)候，介紹總是很快，摸索總是很慢，這個(gè)就是知識(shí)積累的效率提升。當(dāng)然，要設(shè)計(jì)好一個(gè)系統(tǒng)界面，除了考慮界面的布局美觀性、還要考慮圖標(biāo)的協(xié)調(diào)性、還有就是整體的框架，要可以比較好的適應(yīng)這些布局控件的操作，不能太過臃腫或者難以閱讀。

本文轉(zhuǎn)載自

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