如何在Winform界面中设计图文并茂的界面
在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界面。
1、界面效果分析
在一些場(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í)也增加了一定的美感。
2、界面的設(shè)計(jì)過(guò)程
在上圖的界面里面,設(shè)計(jì)過(guò)程也不麻煩,就是首先確定需要在界面上繪制什么,放置那些按鈕,規(guī)劃好這些后,就可以著手做界面的工作了。
我們分析下上面的界面,就是Winform界面上,放置一個(gè)背景圖片,然后在界面適當(dāng)?shù)奈恢蒙咸砑訉?duì)應(yīng)的圖片或者按鈕即可,讓對(duì)應(yīng)的圖標(biāo)處理單擊事件基本上就可以了,比較簡(jiǎn)單吧,呵呵。
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)始的話,是沒(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)站如下所示。
http://www.iconfinder.com/?
http://www.iconpng.com/
http://www.iconlet.com/
http://findicons.com/
http://www.iconseeker.com/
http://www.iconarchive.com/
從上面總能找到一些合適、免費(fèi)的各種文件類(lèi)型的圖標(biāo),我們把它放到合適的場(chǎng)景上就非常棒的了。
背景及圖片按鈕設(shè)置好后,我們就可以處理它的單擊事件,可以彈出對(duì)應(yīng)的窗體了,有兩種彈出窗體方式,一種是模式對(duì)話框,如下代碼所示。
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)自博客園伍華聰?shù)牟┛?#xff0c;原文鏈接:如何在Winform界面中設(shè)計(jì)圖文并茂的界面,如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原博主。
總結(jié)
以上是生活随笔為你收集整理的如何在Winform界面中设计图文并茂的界面的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: EJS 模板中,js 如何获取后端传来的
- 下一篇: 微信朋友圈:应对春节千亿访问量背后的故事