DevExpress WinForms擁有180+組件和UI庫,能為Windows Forms平台創建具有影響力的業務解決方案。DevExpress WinForms能完美構建流暢、美觀且易於使用的應用程序,無論是Office風格的界面,還是分析處理大批量的業務數據,它都能輕鬆勝任!
在Winform裏面,很多控件元素都是標準的,如圖標、按鈕、工具欄等等,所以一般設計標準的Winform界面比較快捷,但是往往這樣的界面相對單調一些,特別在界面控件比較少的情況下,我們往往需要加入一些圖片、背景什麼來襯托一下,看起來圖文並茂一些,本文主要介紹,如何在Winfrom裏面利用各種控件的特點,設計一個相對比較美觀、圖文並茂的Winform界面。
一、界面效果分析
在一些場景裏面,如一些進銷存的系統裏面,我們往往把一些相關的模塊處理放在一起,如進貨、退貨、庫存調入、調出、產品、庫存、盤點等這些信息,就是一個場景裏面的內容,有時候可以把它們放在一起,但是如果單純的放幾個按鈕,可能會顯得比較單調一些,我們為了豐富界面效果,把界面設計效果如下所示。

這個界面雖說不是特別華麗,但是也是比僅僅放幾個標準的按鈕來的美觀一些,而且按鈕之間也設置了一些箭頭來指示他們的流程或者從屬關係,因此在一些場合,我們更傾向使用這種直觀、清晰的界面表達方式,同時也增加了一定的美感。
二、界面的設計過程
在上圖的界面裏面,設計過程也不麻煩,就是首先確定需要在界面上繪製什麼,放置那些按鈕,規劃好這些後,就可以着手做界面的工作了。
我們分析下上面的界面,就是Winform界面上,放置一個背景圖片,然後在界面適當的位置上添加對應的圖片或者按鈕即可,讓對應的圖標處理單擊事件基本上就可以了。
1. 繪製背景圖片
為了達到最佳的界面效果,但我們不能再Winform界面上繪畫,就只有退而求其次,在繪圖工具上繪製一些較好的圖形作為界面背景了,如可以使用強大萬能的Photoshop,也可以使用Word,或者也可以使用其他繪圖工具,能抓到老鼠的就是好貓!
我這裡喜歡利用一些有現成圖元的繪圖工具如EDraw Max等等這些來繪製背景,預先留出放置圖標按鈕的位置,我們繪製一個背景如下所示。

繪製好這些背景,截圖出來待用,記住要圖片要預留一定的位置,並且具有一定的畫布大小,我們想圖片按正常方式設為背景即可,這樣我們在窗口放大的時候,不至於直接看完圖片了,截取出來的圖片,左上角預留一定的位置即可。
2. 設置窗體背景本增加圖片
在我們預先新建的窗體上面,設置它的BackgroundImage背景圖片,如下圖所示。

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

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

上面的圖片是64×64的,一般可以在網站上根據關鍵字找一些自己喜歡的圖標,下面幾個圖標搜索的網站如下所示。
從上面總能找到一些合適、免費的各種文件類型的圖標,我們把它放到合適的場景上就非常棒的了。
背景及圖片按鈕設置好後,我們就可以處理它的單擊事件,可以彈出對應的窗體了,有兩種彈出窗體方式,一種是模式對話框,如下代碼所示。
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));
}
最後我們可以得到整體的界面體驗效果如下所示。

以上就是圖形化界面的設計點滴思路,希望對大家設計界面有所幫助。
原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/275405.html