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

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

?一、基于Ribbon樣式的界面

?

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

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

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

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

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

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

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

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

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

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

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

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

?

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

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/wuhuacong/archive/2012/05/10/2494957.html

總結(jié)

以上是生活随笔為你收集整理的合理的布局，绚丽的样式，谈谈Winform程序的界面设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。