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

---

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

1、界面效果分析

在一些場景里面，如一些進銷存的系統里面，我們往往把一些相關的模塊處理放在一起，如進貨、退貨、庫存調入、調出、產品、庫存、盤點等這些信息，就 是一個場景里面的內容，有時候可以把它們放在一起，但是如果單純的放幾個按鈕，可能會顯得比較單調一些，我們為了豐富界面效果，把界面設計效果如下所示。

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

2、界面的設計過程

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

我們分析下上面的界面，就是Winform界面上，放置一個背景圖片，然后在界面適當的位置上添加對應的圖片或者按鈕即可，讓對應的圖標處理單擊事件基本上就可以了，比較簡單吧，呵呵。

1）繪制背景圖片

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

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

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

2）設置窗體背景本增加圖片

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

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

LabelControl幾個設置如下所示。

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

上面的圖片是64×64的，一般可以在網站上根據關鍵字找一些自己喜歡的圖標，下面幾個圖標搜索的網站如下所示。

//www.iconfinder.com/ 

//www.iconpng.com/

//www.iconlet.com/

//findicons.com/

//www.iconseeker.com/

//www.iconarchive.com/

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

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

 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伍華聰

相關下載：

• Edraw Max下載
• DevExpress下載