DevExpress WinForms擁有180+組件和UI庫(kù)，能為Windows Forms平臺(tái)創(chuàng)建具有影響力的業(yè)務(wù)解決方案。DevExpress WinForms能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序，無(wú)論是Office風(fēng)格的界面，還是分析處理大批量的業(yè)務(wù)數(shù)據(jù)，它都能輕松勝任！

在Winform里面，很多控件元素都是標(biāo)準(zhǔn)的，如圖標(biāo)、按鈕、工具欄等等，所以一般設(shè)計(jì)標(biāo)準(zhǔn)的Winform界面比較快捷，但是往往這樣的界面相對(duì)單調(diào)一些，特別在界面控件比較少的情況下，我們往往需要加入一些圖片、背景什么來(lái)襯托一下，看起來(lái)圖文并茂一些，本文主要介紹，如何在Winfrom里面利用各種控件的特點(diǎn)，設(shè)計(jì)一個(gè)相對(duì)比較美觀、圖文并茂的Winform界面。

一、界面效果分析

在一些場(chǎng)景里面，如一些進(jìn)銷(xiāo)存的系統(tǒng)里面，我們往往把一些相關(guān)的模塊處理放在一起，如進(jìn)貨、退貨、庫(kù)存調(diào)入、調(diào)出、產(chǎn)品、庫(kù)存、盤(pán)點(diǎn)等這些信息，就是一個(gè)場(chǎng)景里面的內(nèi)容，有時(shí)候可以把它們放在一起，但是如果單純的放幾個(gè)按鈕，可能會(huì)顯得比較單調(diào)一些，我們?yōu)榱素S富界面效果，把界面設(shè)計(jì)效果如下所示。

這個(gè)界面雖說(shuō)不是特別華麗，但是也是比僅僅放幾個(gè)標(biāo)準(zhǔn)的按鈕來(lái)的美觀一些，而且按鈕之間也設(shè)置了一些箭頭來(lái)指示他們的流程或者從屬關(guān)系，因此在一些場(chǎng)合，我們更傾向使用這種直觀、清晰的界面表達(dá)方式，同時(shí)也增加了一定的美感。

二、界面的設(shè)計(jì)過(guò)程

在上圖的界面里面，設(shè)計(jì)過(guò)程也不麻煩，就是首先確定需要在界面上繪制什么，放置那些按鈕，規(guī)劃好這些后，就可以著手做界面的工作了。

我們分析下上面的界面，就是Winform界面上，放置一個(gè)背景圖片，然后在界面適當(dāng)?shù)奈恢蒙咸砑訉?duì)應(yīng)的圖片或者按鈕即可，讓對(duì)應(yīng)的圖標(biāo)處理單擊事件基本上就可以了。

1. 繪制背景圖片

為了達(dá)到最佳的界面效果，但我們不能再Winform界面上繪畫(huà)，就只有退而求其次，在繪圖工具上繪制一些較好的圖形作為界面背景了，如可以使用強(qiáng)大萬(wàn)能的Photoshop，也可以使用Word，或者也可以使用其他繪圖工具，能抓到老鼠的就是好貓！

我這里喜歡利用一些有現(xiàn)成圖元的繪圖工具如EDraw Max等等這些來(lái)繪制背景，預(yù)先留出放置圖標(biāo)按鈕的位置，我們繪制一個(gè)背景如下所示。

繪制好這些背景，截圖出來(lái)待用，記住要圖片要預(yù)留一定的位置，并且具有一定的畫(huà)布大小，我們想圖片按正常方式設(shè)為背景即可，這樣我們?cè)诖翱诜糯蟮臅r(shí)候，不至于直接看完圖片了，截取出來(lái)的圖片，左上角預(yù)留一定的位置即可。

2. 設(shè)置窗體背景本增加圖片

在我們預(yù)先新建的窗體上面，設(shè)置它的BackgroundImage背景圖片，如下圖所示。

上面效果是增加了圖片按鈕的效果，開(kāi)始的話(huà)，是沒(méi)有圖片按鈕的，這些是后來(lái)增加上去空白位置的，圖標(biāo)按鈕，一般為了好看的效果，傳統(tǒng)的Winform可以采用PictureBox，基于DevExpress的，則可以利用LabelControl標(biāo)簽控件的來(lái)處理，設(shè)置它的圖片即可達(dá)到很好的效果的。

LabelControl幾個(gè)設(shè)置如下所示。

還有需要設(shè)置ImageAlignToText的屬性設(shè)置為T(mén)opCenter，這樣圖標(biāo)才能很好的居中顯示。

上面的圖片是64×64的，一般可以在網(wǎng)站上根據(jù)關(guān)鍵字找一些自己喜歡的圖標(biāo)，下面幾個(gè)圖標(biāo)搜索的網(wǎng)站如下所示。

//www.iconfinder.com/

//www.iconpng.com/

//www.iconlet.com/

//findicons.com/

//www.iconseeker.com/

//www.iconarchive.com/

從上面總能找到一些合適、免費(fèi)的各種文件類(lèi)型的圖標(biāo)，我們把它放到合適的場(chǎng)景上就非常棒的了。

背景及圖片按鈕設(shè)置好后，我們就可以處理它的單擊事件，可以彈出對(duì)應(yīng)的窗體了，有兩種彈出窗體方式，一種是模式對(duì)話(huà)框，如下代碼所示。

private void btnPurchase_Click(object sender, EventArgs e)
{
FrmPurchase dlg = new FrmPurchase();
dlg.ShowDialog();
}

另一種是，打開(kāi)放在多文檔界面里面顯示，如下代碼所示。

private void btnStock_Click(object sender, EventArgs e)
{
ChildWinManagement.LoadMdiForm(Portal.gc.MainDialog, typeof(FrmStock));
}
private void btnProduct_Click(object sender, EventArgs e)
{
ChildWinManagement.LoadMdiForm(Portal.gc.MainDialog, typeof(FrmProduct));
}

最后我們可以得到整體的界面體驗(yàn)效果如下所示。

以上就是圖形化界面的設(shè)計(jì)點(diǎn)滴思路，希望對(duì)大家設(shè)計(jì)界面有所幫助。

本文轉(zhuǎn)載自：

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