從事Winform開(kāi)發(fā)很多年了，由于項(xiàng)目的需要，設(shè)計(jì)過(guò)各種各樣的界面效果。一般來(lái)說(shuō)，運(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)灰色的界面控件好看了很多。不過(guò)隨著界面控件的組件發(fā)展，目前一般傾向于是用較為大型的控件組，他們除了提供設(shè)計(jì)得體的界面控件外，還提供了非常多種絢麗多彩的界面樣式供選擇，如DotNetBar、netadvantage、DevExpress等大型界面控件組。

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

?一、基于Ribbon樣式的界面

?

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

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

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

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

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

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

注意，在NavBarcontrol里面，默認(rèn)是沒(méi)有一個(gè)Panel可以添加一些特殊的控件，如樹(shù)、按鈕等，默認(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ì)用戶操作來(lái)說(shuō)，可以一次性打開(kāi)多個(gè)窗體進(jìn)行操作，方便很多，也必將美觀，是一種常見(jià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)這些布局控件的操作，不能太過(guò)臃腫或者難以閱讀。

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

總結(jié)

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

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