#E6E6E6 【VB 控件】ExtraButton 實現改進版的平面按鈕 作者:吳文成

  這就是為什麼,我要強迫自己一個月內不要再碰程式設計!因為一旦再觸碰 ,就會像 Star Trek 裡的企業號啟動曲速引擎(Warp Drive)的最高速,卻不小心誤進黑洞警戒區,想要逃可是還是逃不過黑洞的死亡之吻,唯一的期望就是熬過黑洞的巨大吸引力,然後試圖通往它的另一端——噴出物質的白洞——藉以逃到相連的孿生宇宙。一旦靠近黑洞,不可避免地只好一頭栽進去,一旦再碰程式設計,似乎什麼既定的計劃都得擱下,我必須要跟幾位哲學大師說聲抱歉,他們的著作要先放回書櫃了,跟我一起住的兩隻恐龍也要先自己去找吃的。如果我所有的時間都可以拿來寫程式
,那該有多好,許多構想簡直是無法耽誤的,它們在腦袋閃過,我就想要馬上追隨它們,深怕錯失了什麼寶貴的設計靈感!如果我有平常兩倍的時間,那該有多好,這樣便不必為眾多的研究計劃來傷腦筋。

  人工螞蟻根據遺留在路徑上的荷爾蒙,來尋找食物不夠有效率,導致我必須設想出更好的演算法。為什麼這件事情,會比我讀完手邊的克萊因(Morris Kline)代表作《 Mathematics in Western Culture 》更具有吸引力呢
? 為什麼設計程式 ExtraScope(螢幕縮放鏡),會比我研究剛買到的新款數位相機更有意思呢?每當我著手設計程式,或是寫人工智慧的時候,我就會驚訝自己那種無可言喻的專注力與持續力,彷彿整個世界與我完全地隔絕開,彷彿我有不必睡覺的特異功能。這種投入——更應該說是「神往
」——讓我感覺到某種顛峰經驗,心理學大師馬斯洛說:顛峰經驗的層次更高於自我實現(這個觀念很有趣,有空再來談談,我曾經在這篇文章談到馬斯洛)! 而情緒智商( EQ )理論指出:神往的境界讓一個人的潛能與心理素質發揮到更高點,就像是打桌球打到忘我的時候,自己的呼吸、腳步與體能結合到了最佳的狀態。就是這種曾經體驗過的「顛峰經驗」,會不斷地牽引一個人趨向那個讓他投入的事物,會讓他壓抑不住、逃避不了那種吸引力,直到逼近碰撞、燃起火花。(我是不是應該把這篇文章改個名字,好像越講越離題!以下開始講正題)

  寫這篇文章,是因為我發現了一個新奇的方法來實現平面按鈕控件。在編程[[img src=computer/FlatButton1.gif height=79 width=250 align=right]]隨談裡,我曾經用兩個篇幅來介紹〈【VB 控件】FlatButton 演示平面按鈕與影像處理〉, FlatButton.ocx
這個控件的特色是它的介面不使用其他的控[[img src=computer/FlatButton5.gif height=99 width=234 align=left]]件,它的按鈕效果是畫出來的而,且圖示變化的影像處理都是透過函數計算。總而言之,就設計介面而言,這個控件可以說是「無中生有」的最佳範例之一,但是它的編程難度比較高,包括幾種影像演算、按鈕事件的規劃等等。如果有一種方法可以免除所有的影像演算,在整體的事件驅動上也可以更流暢的話,這個平面按鈕的設計將會更為簡單與直觀化。FlatButton.ocx 的程式碼有 18 KB,這已經很精小了
,但是新版本的平面按鈕 ExtraButton.ocx 程式碼只有 13 KB ,功能卻絲毫不比 FlatButton.ocx 遜色 。 最重要的是 ,程式設計者不再需要考慮影像處理的問題,以及擔憂滑鼠事件(按下、按起、移動與經過)的準確性。

[[img src=computer/ExtraButton.gif height=159 width=186 align=left]]  左邊的圖檔比較了這兩種平面按鈕的外觀
,大致看來並沒有多大的差異。但是如果你眼尖的話,可能會看出在最後一部份「按鈕失效
」的影像圖示有些許不同 。由於 FlatButton 是特別重新演算圖示的灰階化,所以顯示效果會比較細緻點 , 而 ExtraButton 是借用 Windows 系統自己的按鈕功能,所以影像變化會比較「
不拘小節 」。 也就是說, 雖然 ExtraButton 套用按鈕控件本身的圖形影像轉換,免除了影像處理方面的函數設計,然而它的代價卻是圖示的灰階化效果會少了點層次感。這個小缺點不至於遮掩它的整體價值 ,ExtraButton 的優點是 : 它具有較直觀的擴充性,例如它可以增加按鈕風格,包括立體按鈕、Mac 風格按鈕、單線風格按鈕等等;它具有對滑鼠事件的敏感性與準確性,因為它是直接套用按鈕的預設滑鼠事件;而且對於程式設計者來說,ExtraButton 的設計流程淺顯易懂,方便做進一步的修改。

  前面提到 FlatButton 的設計不使用到其他的控件 ,它的一切都是宣告函數而計算出來與畫出來的。ExtraButton 則是依賴於 VB 提供的兩個控件
: 需要一個 CheckBox 與一個 PictureBox。CheckBox 作為按鈕的主體,它本身就有匯入圖示、 圖示轉換( DownPicture、DisabledPicture )與指定遮罩色的功能,所以影像處理的部分完全不必我們費心。我們主要要做的是
,重複宣告 PictureBox 陣列,把它們變形成四條不同的線段,用來遮蓋或喬改 CheckBox 的邊框 , 這樣一來, CheckBox 的立體外觀就變成了平面外觀。再來的問題 ,便是如何讓 CheckBox 預設的滑鼠事件對應到平面按鈕的幾種外形變化,另外還有一些小細節的問題 。總而言之,ExtraButton 的設計比 FlatButton 簡單許多,它的整體顯示效能並不輸給 FlatButton。我已經打算把我主要程式的平面按鈕部分改用 ExtraButton 了,程式設計就是這樣,當你發現一種更簡單、更直觀、又能兼顧效能的設計方式時,那種喜悅就像是數學家發現困難問題的絕妙證明方法一樣——架構美、簡單美與清晰美,便是數學家或是程式設計者心中的追尋之一。

範例源碼下載

控制項下載
2005/07/21