如何在Winform界面中設計圖文並茂的界面


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

1、界面效果分析

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

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

 

2、界面的設計過程

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

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

1)繪制背景圖片

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

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

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

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

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

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

LabelControl幾個設置如下所示。

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

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

http://www.iconfinder.com/ 

http://www.iconpng.com/

http://www.iconlet.com/

http://findicons.com/

http://www.iconseeker.com/

http://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));
        }

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

以上就是圖形化界面的設計點滴思路,希望對大家設計界面有所幫助。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM