通過(guò)Ｖｉｓｕａｌ Ｂａｓｉｃ編程實(shí)現(xiàn)多種按鈕效果

摘 要：命令按鈕是用戶與計(jì)算機(jī)應(yīng)用程序進(jìn)行交互的最簡(jiǎn)便的方法。面向?qū)ο缶幊陶Z(yǔ)言Visual Basic中的按鈕控件就是命令按鈕，命令按鈕是應(yīng)用程序中最為常用的控件，但是Visual Basic中的按鈕控件過(guò)于簡(jiǎn)單，不夠美觀，支持的事件少。為實(shí)現(xiàn)多彩多姿命令按鈕，可以利用圖像框裝載漂亮的圖片模擬命令按鈕，通過(guò)事件過(guò)程實(shí)現(xiàn)“命令按鈕”的多種特殊效果，包括按鈕的默認(rèn)效果、鼠標(biāo)劃過(guò)時(shí)按鈕的效果、鼠標(biāo)單擊時(shí)按鈕的效果，按擊回車鍵或逃逸鍵時(shí)按鈕的效果。在實(shí)際編程中，設(shè)計(jì)好具有多種效果的按鈕，是能否贏得用戶的一件法寶。

關(guān)鍵詞：按鈕；圖像框；屬性；事件；事件代碼；事件過(guò)程

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：B

文章編號(hào)：1004-373X(2008)06-114-03

Various Button Effects by Visual Basic Programming

YANG Zhanhai，XUE Ningjing

(Computer Center，Yan′an University，Yan′an，716000，China)

Abstract：Order button is a consumer and the computer application carries out interactive simple and convenient method.The button control in object-oriented programming language Visual Basic is order button，order button is to be control in common use most in application，button control in Visual Basic is excessively simple，the event being not enough beautiful，hold out is few.Be to realize colorful order button，making use of the image frame to load the beautiful photograph to simulate order button，the button effect，pushes down the effect striking the carriage return key or the escape key time button by the fact that event process realizes various peculiar \"order button\" effect，when button effect，mouse are labeled with Shan strike when effect，the mouse bid streak including the button tacitly approving that.

Keywords：button；image frame；attribute；event；event code；event process

1 引 言

在進(jìn)行程序設(shè)計(jì)時(shí)，經(jīng)常需要設(shè)計(jì)一些形象的、生動(dòng)的、漂亮的按鈕，更重要的是按鈕在操作上有動(dòng)態(tài)的效果。按鈕通常的狀態(tài)有默認(rèn)狀態(tài)、鼠標(biāo)劃過(guò)時(shí)的狀態(tài)、鼠標(biāo)單擊時(shí)的狀態(tài)、按ESC鍵時(shí)的狀態(tài)、按Enter鍵時(shí)的狀態(tài)。

如何實(shí)現(xiàn)多種效果的命令按鈕，通過(guò)Visual Basic編程有各種實(shí)現(xiàn)辦法，但如果直接在窗體上創(chuàng)建命令按鈕對(duì)象，要實(shí)現(xiàn)多種按鈕效果并不容易。例如，Visual Basic提供的命令按鈕外觀是一個(gè)矩形，若要實(shí)現(xiàn)立體圓柱狀的按鈕，則不容易。在實(shí)際編程中，總結(jié)經(jīng)驗(yàn)，發(fā)現(xiàn)使用圖像框去實(shí)現(xiàn)按鈕更為自如，更為順手，各種按鈕效果易于實(shí)現(xiàn)。

2 對(duì)象準(zhǔn)備

2.1 圖像按鈕的準(zhǔn)備

預(yù)先用圖形處理軟件(如Photoshop)制作所需求的圖像按鈕文件。本文中制作4個(gè)圖形文件，分別命名為“P1.JPG”，“P2.JPG”，“P3.JPG”，“P4.JPG”，每個(gè)圖形的尺寸大小一致，外觀均呈圓柱立體狀。圖形“P1.JPG”中顯示黑暗顏色文字“退出系統(tǒng)”；圖形“P2.JPG”中顯示明亮顏色文字；圖形“3.JPG”中顯示黑暗顏色文字“開(kāi)始登錄”；圖形“P4.JPG”中顯示明亮顏色文字“開(kāi)始登錄”。

一個(gè)系統(tǒng)經(jīng)常具有“退出系統(tǒng)”和“開(kāi)始登錄”這2個(gè)按鈕。用“P1.JPG”和“P2.JPG”兩個(gè)圖片實(shí)現(xiàn)“退出系統(tǒng)”這個(gè)按鈕；用“P3.JPG”和“P4.JPG”兩個(gè)圖片實(shí)現(xiàn)“退出系統(tǒng)”這個(gè)按鈕，不同的顏色表示不同的狀態(tài)。

2.2 圖像框的準(zhǔn)備

窗體是Visual Basic中的對(duì)象，在設(shè)計(jì)程序時(shí)，窗體是程序員的“工作臺(tái)”，窗體好像一塊“畫布”，在窗體上可以建立其他控件對(duì)象，程序運(yùn)行后，每個(gè)窗體對(duì)應(yīng)一個(gè)窗口。

在窗體畫出4個(gè)圖像框，名稱分別為“Image1”，“Image2”，“Image3”，“Image4”。圖像框“Image1”裝入圖形“P1.JPG”(黑暗顏色文字“退出系統(tǒng)”)，圖像框“Image2”裝入圖形“P2.JPG”(明亮顏色文字“退出系統(tǒng)”)，圖像框“Image3”裝入圖形“P3.JPG”(黑暗顏色文字“開(kāi)始登錄”)，圖像框“Image4”裝入圖形“P4.JPG”(明亮顏色文字“開(kāi)始登錄”)。

設(shè)定圖像框的尺寸為統(tǒng)一大小。首先把圖片框Stretch屬性為True，以實(shí)現(xiàn)當(dāng)圖像框大小改變時(shí)，其中的圖片隨之會(huì)自動(dòng)改變大小以適應(yīng)圖像框的空間大小。接下來(lái)通過(guò)圖像框Height和Width屬性去改變圖像框的高度和寬度，把4個(gè)圖像框的屬性設(shè)為統(tǒng)一的屬性值，從而實(shí)現(xiàn)圖像框的尺寸為一樣的大小。

設(shè)定圖像框的合理位置。在垂直方向上，若要求4個(gè)圖像框處在同樣的高度上，可以通過(guò)設(shè)置Top屬性實(shí)現(xiàn)，也可以通過(guò)菜單命令實(shí)現(xiàn)(首先選擇4個(gè)圖像框?qū)ο?，然后選擇“格式”菜單，再選擇“對(duì)齊”項(xiàng)中的“頂端對(duì)齊”命令項(xiàng))；在水平方向上，圖像框“Image1”和“Image2”處于同一位置上，一個(gè)在前，一個(gè)在后，圖像框“Image3”和“Image4”處于同一位置上，也是一個(gè)在前，一個(gè)在后，可以通過(guò)設(shè)置Left屬性實(shí)現(xiàn)，也可以通過(guò)菜單命令實(shí)現(xiàn)(首先選擇同一位置上的2個(gè)圖像框?qū)ο螅缓筮x擇“格式”菜單，再選擇“對(duì)齊”項(xiàng)中的“左對(duì)齊”命令項(xiàng))。

3 用事件過(guò)程實(shí)現(xiàn)多種按鈕效果

3.1 按鈕的默認(rèn)狀態(tài)

通常，對(duì)于“退出系統(tǒng)”和“開(kāi)始登錄”這樣的兩個(gè)按鈕，“開(kāi)始登錄”一般為事實(shí)上的下一步操作。所以不妨把圖片框“Image1”可見(jiàn)性設(shè)為真，把圖片框“Image2”可見(jiàn)性設(shè)為假，即可以看見(jiàn)黑暗顏色文字“退出系統(tǒng)”按鈕；把圖片框“Image3”可見(jiàn)性設(shè)為假，把圖片框“Image4”可見(jiàn)性設(shè)為真，即可以看見(jiàn)明亮顏色文字“開(kāi)始登錄”按鈕。

默認(rèn)狀態(tài)是在窗體運(yùn)行時(shí)，一開(kāi)始就需要具有的狀態(tài)。對(duì)于Visual Basic而言，窗體的Load事件在窗體加載就會(huì)觸發(fā)的其中的事件代碼，所以可以在窗體的Load事件中編寫事件代碼，實(shí)現(xiàn)按鈕初始默認(rèn)狀態(tài)。

實(shí)現(xiàn)“按鈕”默認(rèn)狀態(tài)的Load事件過(guò)程為：

Private Sub Form_Load()

Image1.Visible = True

Image2.Visible = False

Image3.Visible = False

Image4.Visible = True

End Sub

3.2 鼠標(biāo)劃過(guò)時(shí)按鈕的狀態(tài)

當(dāng)鼠標(biāo)光標(biāo)移入“退出系統(tǒng)”按鈕所在的區(qū)域時(shí)，“退出系統(tǒng)”按鈕中的文字改變?yōu)槊髁令伾?，“開(kāi)始登錄”按鈕中的文字改變?yōu)楹诎殿伾欢?dāng)鼠標(biāo)光標(biāo)移入“開(kāi)始登錄”按鈕所在的區(qū)域時(shí)，“開(kāi)始登錄”按鈕中的文字改變?yōu)槊髁令伾巴顺鱿到y(tǒng)”按鈕中的文字改變?yōu)楹诎殿伾?。這種明暗交替的醒目設(shè)計(jì)，極具藝術(shù)性。通過(guò)交替改變各個(gè)對(duì)像框Visual屬性，就可以實(shí)現(xiàn)鼠標(biāo)劃過(guò)“按鈕”(實(shí)際上對(duì)象是圖像框)時(shí)的狀態(tài)。

圖像框支持移動(dòng)鼠標(biāo)光標(biāo)的移動(dòng)事件過(guò)程，即支持MouseMove事件，該事件并不需要鼠標(biāo)的按鍵，只需要把鼠標(biāo)光標(biāo)移到圖像框后，便可以觸發(fā)MouseMove事件。

實(shí)現(xiàn)“退出系統(tǒng)”按鈕變明，“開(kāi)始登錄”按鈕變暗的事件過(guò)程為：

Private Sub Image1_MouseMove(Button As Integer，Shift As Integer，x As Single，y As Single)

Image1.Visible = False

Image2.Visible = True

Image3.Visible = True

Image4.Visible = False

End Sub

實(shí)現(xiàn)“開(kāi)始登錄”按鈕變明，“退出系統(tǒng)”按鈕變暗的事件過(guò)程為：

Private Sub Image3_MouseMove(Button As Integer，Shift As Integer，x As Single，y As Single)

Image1.Visible = True

Image2.Visible = False

Image3.Visible = False

Image4.Visible = True

End Sub

3.3 鼠標(biāo)單擊時(shí)按鈕的狀態(tài)

鼠標(biāo)單擊按鈕后，往往實(shí)現(xiàn)某一過(guò)程的調(diào)用，但在里，將討論按鈕被按單擊時(shí)， “壓下”效果的實(shí)現(xiàn)，以及松開(kāi)鼠標(biāo)按鍵時(shí)按鈕“彈上”效果的實(shí)現(xiàn)。下面就以按鈕“開(kāi)始登錄”為例說(shuō)明效果實(shí)現(xiàn)的原理機(jī)制。

移動(dòng)鼠標(biāo)光標(biāo)到圖像框“Image4” (明亮顏色文字“開(kāi)始登錄”)上，如果壓下鼠標(biāo)按鈕則產(chǎn)生MouseDown事件；如果松開(kāi)鼠標(biāo)按鈕則產(chǎn)生MouseUp事件。

接下來(lái)關(guān)鍵的問(wèn)題是如何實(shí)現(xiàn)“壓下”效果和“彈上”效果?？梢酝ㄟ^(guò)改變圖像框在窗體中位置的方法實(shí)現(xiàn)預(yù)期的效果，當(dāng)壓下鼠標(biāo)按鈕時(shí)，給圖像框的Top增加100twip，當(dāng)松開(kāi)鼠標(biāo)按鈕時(shí)，給圖像框的屬性Top減少100twip。通過(guò)這種改變圖像框Top屬性值方法，“按鈕”將來(lái)就可以按動(dòng)。

用于實(shí)現(xiàn)“開(kāi)始登錄”單擊的事件過(guò)程為：

Private Sub Image4_Click()

′ 調(diào)用“開(kāi)始登錄”代碼

End Sub

用于實(shí)現(xiàn)“壓下”效果的事件過(guò)程為：

Private Sub Image4_MouseDown (Button As Integer，Shift As Integer，x As Single，y As Single)

Image4.Top = Image4.Top + 100

End Sub

用于實(shí)現(xiàn)“彈上”效果的事件過(guò)程為：

Private Sub Image4_MouseUp (Button As Integer，Shift As Integer，x As Single，y As Single)

Image4.Top = Image4.Top - 100

End Sub

3.4 按Esc鍵和Enter鍵時(shí)按鈕的反應(yīng)

一個(gè)良好的窗體界面，其上的按鈕不僅可以用鼠標(biāo)來(lái)選擇操作，也可以支持鍵盤的操作。下面，就以按Esc鍵退出系統(tǒng)，按Enter鍵開(kāi)始登錄為例進(jìn)行分析討論。

按下鍵盤上某個(gè)鍵時(shí)，將發(fā)生KeyPress事件。嚴(yán)格的說(shuō)，當(dāng)按下某個(gè)鍵時(shí)，所觸發(fā)的是擁有輸入焦點(diǎn)(Focus)的那個(gè)控件的KeyPress事件。在某一時(shí)刻，輸入焦點(diǎn)只能位于某一個(gè)控件上。如果窗體上沒(méi)有活動(dòng)的或可見(jiàn)的控件，則輸入焦點(diǎn)位于窗體上。當(dāng)一個(gè)控件或窗體擁有輸入焦點(diǎn)，該控件或窗體將接收從鍵盤上輸入的信息。

在默認(rèn)情況下，控件的鍵盤事件優(yōu)于窗體的鍵盤事件。因此在發(fā)生鍵盤時(shí)，總是先激活控件的鍵盤事件。如果希望窗體先接收鍵盤事件，則必須把窗體的KeyPreview屬性設(shè)為True，否則不能激活鍵盤事件。

這里，在任何情況下，都要實(shí)現(xiàn)按Esc鍵退出系統(tǒng)，按Enter鍵開(kāi)始登錄，所以必須把窗體的KeyPreview屬性設(shè)為True。另外，在編寫事件代碼時(shí)，需要注意參數(shù)KeyAscii是一個(gè)預(yù)定義的變量，執(zhí)行KeyPress事件過(guò)程時(shí)，KeyAscii是所按鍵的ASCII值。已知Esc鍵的ASCII值為27，Enter鍵的ASCII值為13，那么，就可以通過(guò)KeyAscii的值是否為27或13做出相應(yīng)的判斷。

實(shí)現(xiàn)Esc鍵和Enter鍵按鈕的反應(yīng)的KeyPress事件過(guò)程如下：

Private Sub Form_KeyPress(KeyAscii As Integer)

If KeyAscii = 13 Then

Call Image4_Click

End If

If KeyAscii = 27 Then

Call Image1_Click

End If

End Sub

4 結(jié) 語(yǔ)

使用Visual Basic這一面向?qū)ο缶幊陶Z(yǔ)言，編寫程序界面時(shí)，充分利用對(duì)象的Load，Click，MouseDown，MouseUp以及KeyPress事件，綜合構(gòu)建，從而實(shí)現(xiàn)具有多種效果的界面按鈕。

設(shè)計(jì)具有多種效果的按鈕，是實(shí)現(xiàn)友好界面的重要環(huán)節(jié)，是能否贏取用戶的一門法寶，在實(shí)際編程中，應(yīng)該根據(jù)用戶需求，設(shè)計(jì)好具有多種效果的按鈕。

參考文獻(xiàn)

[1]劉炳文.Visual Basic程序設(shè)計(jì)[M].2版.北京：清華大學(xué)出版社，2003.

[2]吳紹根，陳建潮.Visual Basic程序設(shè)計(jì)基礎(chǔ)[M].北京：人民郵電出版社，2006.

[3]\\[美\\]Diane Zak.Visual Basic 6.0程序設(shè)計(jì)[M].北京：電子工業(yè)出版社，2007.

[4]\\[美\\]布蘭德妮，\\[美\\]米爾斯博格.VB.NET大學(xué)教程[M].北京：清華大學(xué)出版社，2004.

作者簡(jiǎn)介 楊戰(zhàn)海 男，1972年出生，陜西涇陽(yáng)人，講師，碩士研究生。研究方向?yàn)橛?jì)算機(jī)算法、數(shù)據(jù)庫(kù)技術(shù)。

薛寧?kù)o 女，1978年出生，講師。研究方向?yàn)橛?jì)算機(jī)網(wǎng)絡(luò)。