【實例】如何利用控件完成Winforms圖形化界面設(shè)計

---

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

1、界面效果分析

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

這個界面雖說不是特別華麗，但是也是比僅僅放幾個標準的按鈕來的美觀一些，而且按鈕之間也設(shè)置了一些箭頭來指示他們的流程或者從屬關(guān)系，因此在一些場合，我們更傾向使用這種直觀、清晰的界面表達方式，同時也增加了一定的美感，同時提供超性價比禪文化酒店設(shè)計服務(wù)。

2、界面的設(shè)計過程

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

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

1）繪制背景圖片

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

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

繪制好這些背景，截圖出來待用，記住要圖片要預(yù)留一定的位置，并且具有一定的畫布大小，我們想圖片按正常方式設(shè)為背景即可，這樣我們在窗口放大的時候，不至于直接看完圖片了，截取出來的圖片，左上角預(yù)留一定的位置即可。

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

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

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

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

還有需要設(shè)置ImageAlignToText的屬性設(shè)置為TopCenter，這樣圖標才能很好的居中顯示。

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

http://www.iconfinder.com/ 

http://www.iconpng.com/

http://www.iconlet.com/

http://findicons.com/

http://www.iconseeker.com/

http://www.iconarchive.com/

從上面總能找到一些合適、免費的各種文件類型的圖標，我們把它放到合適的場景上就非常棒的了。

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

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

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

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));
        }

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

By伍華聰

相關(guān)下載：

• Edraw Max下載
• DevExpress下載