視窗程式中，佔最大部分的大概就是按鈕了。在這一章裡面，我們詳細的介紹各種標籤、按鈕的VCL元件，進而介紹一些Tool Bar的使用方法。

Presentation on theme: "視窗程式中，佔最大部分的大概就是按鈕了。在這一章裡面，我們詳細的介紹各種標籤、按鈕的VCL元件，進而介紹一些Tool Bar的使用方法。"— Presentation transcript:

1 視窗程式中，佔最大部分的大概就是按鈕了。在這一章裡面，我們詳細的介紹各種標籤、按鈕的VCL元件，進而介紹一些Tool Bar的使用方法。
第四章 C++ Builder 按鈕元件 視窗程式中，佔最大部分的大概就是按鈕了。在這一章裡面，我們詳細的介紹各種標籤、按鈕的VCL元件，進而介紹一些Tool Bar的使用方法。

2 大綱 4-1. 建立最基本的按鈕 4-2. 有圖形的按鈕 4-3. 快速按鈕 4-4. 工具列元件的使用 4-5. CoolBar元件的使用
4-1. 建立最基本的按鈕 4-2. 有圖形的按鈕 4-3. 快速按鈕 4-4. 工具列元件的使用 4-5. CoolBar元件的使用 本章習題

3 4-1. 建立最基本的按鈕 VCL元件位置 最基本的按鈕位在VCL元件面版上的Standard這一個頁次裡，我們在Button這個VCL元件上面用滑鼠左鍵按一下，面版會變成凹下去的圖案，接著我們將滑鼠移到Form上面的任何一個位置按一下滑鼠左鍵，就會有一個按鈕出現在表單上。

4 4-1. 建立最基本的按鈕 VCL元件的屬性設定 Top：該VCL元件與Parent視窗上緣的距離。以我們範例4-1的Button來說，Top的屬性值為『40』，而該Button被放置在Form1上面，所以該Button的Parent就是Form1，而這個『40』就是Button上緣與Form1 Client上緣的距離。 Left：該VCL元件與Parent視窗左邊的距離。以我們範例4-1的Button來說，Left的屬性值為『40』，而該Button被放置在Form1上面，所以該Button的Parent就是Form1，而這個『40』就是Button左邊與Form1 Client左邊的距離。

5 4-1. 建立最基本的按鈕 VCL元件的屬性設定 Caption：可以設定按鈕上的文字，例如我們將範例4-1的Button2的Caption設定成『Caption設定』，那在Button上就會顯示出『Caption設定』的字樣。我們也可以在某個字母之前加上『&』這個符號，那跟在『&』之後的那個字母就會變成有底線的字母，在Windows的環境中最主要是可以當做一個快速鍵來使用。例如在範例4-1的Button3，我們將Caption設定成『&Close』，那真正在Button上顯示的則是『Close』。 Font：Font最主要就是更改Caption的字型，例如我們將範例4-1的Button2的Caption改成新細明體，並且使用粗體，字型大小10，這時我們就可以使用Font來達到這樣的目標。

6 4-1. 建立最基本的按鈕 VCL元件的屬性設定 Cursor：當滑鼠游標移動到這個VCL元件上會出現的游標形狀。當我們利用滑鼠點下Cursor屬性旁的小下拉式選單，就會出現許多游標的樣式讓我們選擇。選定了之後，以後只要滑鼠移動到該VCL元件上面，滑鼠的指標就會變成我們所指定的樣式。

7 4-1. 建立最基本的按鈕 VCL元件的屬性設定 Enabled：主要就是設定該VCL元件是否被『啟動』。我們以Button來做解釋，如果現在Enabled被設定成『true』，則我們可以使用滑鼠『按下』該Button。反之若是將Enabled設定成『false』，則無法讓我們的滑鼠有『按下』的動作發生，且Button的顏色會變成灰色的，當然所有跟該Button的事件也都無法被驅動。在範例程式4-1中，我們就將Button5的Enabled設定成false，那之前我們已經用過的button1-4這四個button的Enabled都是被設定成『true』。 Visible：主要用來設定該VCL元件是否要在執行的階段為『可見』。我們就舉範例程式4-1的Button6來做例子。該Button的Visible屬性被我們設定成『false』，也就是說當我們執行的時候無法在視窗上看到Button6；相反的，在我們之前介紹過的Button1-5這五個Button，他們的Visible屬性都是設定成『true』。

8 4-1. 建立最基本的按鈕 VCL元件的屬性設定 Height、 Width：Height和Width的設定方法跟之前我們談過的Top與Left很像，我們可以利用Object Inspector來指定，也可以直接用滑鼠拉一拉，拉出我們想要的大小即可。在這邊的數字跟在Top或是Left那邊的單位都一樣，都是以Pixel為單位，其實在BCB的環境中，除非有特別指定長度單位，不然都是以Pixel來當做預設的單位。 ShowHint：如果將ShowHint設定成『true』，當在執行的過程中，如果將滑鼠移到該VCL元件上，會出現一個小小的視窗顯示Hint這個屬性所設定的字串，這個就是所謂Hint的功能。 Hint：Hint屬性就是要顯示出來的字串，像在範例4-1的Button7上面，我們就將Hint的屬性設定成『顯示Hint』。

9 4-1. 建立最基本的按鈕 VCL元件的屬性設定 Name：Name就是是這個元件的名稱。像我們剛剛一直在提的Button1、Button2、Button3之類的元件『名稱』，就是指該VCL元件的『Name』。這個Name跟Caption沒有絕對的關係，只是有些時候，一些程式設計師喜歡將Caption跟Name所使用的名稱弄成相同的。不過嚴格說起來，Caption是顯示出來給大家看的，而Name是在程式中讓程式碼看的。

10 4-1. 建立最基本的按鈕 VCL元件的屬性設定 TabOrder、TabStop：TabOrder和TabStop最主要就是用來設定Tab的順序以及這個元件使不使用Tab來使之『Focused』。我們將在範例程式4-1中，將這九個Button分別設定好TabOrder，以及將Button2和Button4的TabStop設定成false，以下我們就用一個簡單的表格來顯示我們的設定狀況： 元件 TabOrder TabStop Button1 True Button2 1 False Button3 2 Button4 3 Button5 4 Button6 5 Button7 6 OKBtn 7 Button9 8 true

11 4-1. 建立最基本的按鈕 VCL元件的程式碼編輯
4-1. 建立最基本的按鈕 VCL元件的程式碼編輯 在加入程式碼之前，請各位先想想之前談過的『什麼是事件』？如果還沒忘記，一定知道事件（Event）就是當某件事情發生時會執行的東西！那在按鈕中，我們希望『它』被按下時會有一些動作出現，所以我們就必須要將程式碼寫在『OnClick』這個事件裡。這時候我們將物件檢視器換到Event這個頁次來，在OnClick右邊的小空白欄上面點兩下就會出現OnClick這個事件的函式了。現在我們就以範例程式4-2來做個介紹。

12 4-2. 有圖形的按鈕 有圖有文才能算是真正的User Friendly ，不少Windows上的按鈕也都是有圖形的。當然，BCB也考慮到了這一點。我們可以在VCL元件面板中的Additional頁次中找到它，這個元件就叫做『BitBtn』。

13 4-2. 有圖形的按鈕 範例4-3：在BitBtn中有不少屬性都跟Button一樣，不過還是有一些比較特別的屬性值得去研究。在這邊所要介紹的這四個新的屬性，將會在範例程式4-3中呈現出來。 Glyph：設定按鈕上要出現什麼樣的圖片。方法是按下Glyph這個屬性右邊的那個黑點小按鈕後，會出現一個選取視窗讓我們選取要顯示的圖片。 Kind：自動設定按鈕的樣式。總共有bkAbort、bkAll、bkCancel、bkClose、bkCustom、bkHelp、bkIgnore、bkNo、bkOk、bkRetry、bkYes這11種不同的樣式。可以透過Kind這個屬性來設定，這11種不同的值都會有相對應的Graph和Caption。 Layout：設定圖片在按鈕的哪個位置。總共有上下左右四個位置可以設定。 Margin：設定圖片到邊界的pixel數。

14 4-2. 有圖形的按鈕 範例4-3：執行結果

15 4-3. 快速按鈕 在視窗程式的Menu下方通常會有一堆按鈕可以使用，這些按鈕就是『SpeedButton』。SpeedButton也是屬於圖形化的按鈕，不過跟前面所提到的BitBtn在特性上有點不太相同，一些功能上也不同，例如SpeedButton可以做群組化的功能，也可以做Flat的功能等等。SpeedButton也是被放在Additional的這一個頁次上。一般使用SpeedButton都會搭配ToolBar之類的元件一起設計。

16 4-3. 快速按鈕 範例4-4：範例4-4詳細的介紹SpeedButton與Button、BitBtn這兩個Button不同的功能。如果之前有介紹到一樣的屬性，在此將不重複解釋。 AllowAllUp：在同一個群組上的所有SpeedButton都可以同時保持著不被選取的狀態，也就是沒有凹下去。 Down：用以設定此按鈕有沒有被選取，若被選取時按鈕會是凹下的，且此值為True，反之沒被選取就是沒有凹下去，且值為False。 Flat：可以將按鈕設定成像Office上方那種形式的按鈕，等到滑鼠移到那個按鈕上時，按鈕就會浮起來，感覺上有立體的效果。 GroupIndex：可以將一群SpeedButton集合成一個群組，則此群組同時只有一個按鈕可以被選取。若是AllowAllUp有被選取時，你可以再按一次已凹下的按鈕，按下時就會自動恢復到沒有被選取的狀態。若是AllowAllUp被設定成False，則在按下按鈕後，除非你按了同一群組中的其他按鈕，否則被按下的按鈕將永遠是凹下的。

17 4-3. 快速按鈕 範例4-4：執行結果

18 4-4. 工具列元件的使用 前面提到了這麼多種的按鈕，但是不管是Office或是Internet Explorer他們的按鈕都是在一條棒子上，我們的怎麼都散落各地。在4-4跟4-5這兩小節，我們將介紹兩種常見的工具列元件，讓我們的按鈕也可以很漂亮很整齊的表現出來。 我們在4-4這一小節要談的是ToolBar，ToolBar它被放在Win32這一個頁次中。

19 4-4. 工具列元件的使用 範例4-5：在ToolBar的練習中，我們將利用範例4-5來完成所有有關ToolBar的功能。首先我們先將一個工具列放到Form上面，預設是放在Form的最上方，我們可以藉著更改Align的屬性去變更ToolBar在Form上的位置。

20 4-4. 工具列元件的使用 範例4-5 在ToolBar上我們可以按滑鼠的右鍵，讓ToolBar跳出一個PopupMenu讓我們新增Button或是Separator。 在ToolBar上產生的Button稱作ToolButton。 若是你不喜歡用ToolButton那也沒關係，你可以用我們之前討論過的那三種按鈕放在ToolBar上，只不過會用ToolButton通常都是希望將主選單上的一些常用功能列出來，所以在ToolButton上就有一個專屬的屬性（MenuItem）可以設定這個按鈕是對應到MainMenu的那一個選項（有關MainMenu我們會在後面章節提到）

21 4-4. 工具列元件的使用 範例4-5 在ToolBar上面的ToolButton若是要出現圖案的話，必須要新增一個ImageList的VCL元件，並且將一些圖片加入到ImageList中（ImageList我們將會在後面的章節中提到），接著在ToolBar上的Images這個屬性設定為我們剛剛新增的ImageList。這樣子，ToolButton就可以利用ImageIndex來設定要用ImageList中的那一個圖案了。

22 4-4. 工具列元件的使用 範例4-5 ToolButton提供了五種不同的按鈕格式，分別為tbsButton、tbsCheck、tbsDivider、tbsDropDown、tbsSeparator這五種，各位可以對這五種分別的使用看看。 在這邊我們介紹tbsDropDown的用法。tbsDropDown就是按鈕旁邊會出現一個小的下拉式選單，我們可以從下拉式選單選取我們想要的功能，所以在這邊我們需要再加入一個PopupMenu來當下拉式選單（PopupMenu將在後面章節介紹）。當我們把PopupMenu設定好後，我們必須將這個ToolButton中的DropDownMenu這個屬性設定成我們剛剛加入的那個PopupMenu，這樣我們就可以發現我們的這個按鈕已經具備有下拉式選單的功能了。

23 4-4. 工具列元件的使用 範例4-5 執行結果

24 4-5. CoolBar元件的使用 CoolBar跟ToolBar有點類似，不過CoolBar可以說是多個ToolBar的集合。
CoolBar就是我們在檔案總管中最上面的那幾排，雖然每一排看起來都像是ToolBar，但是最外面卻包了一層CoolBar，讓整個介面看起來更華麗美觀。CoolBar這個VCL元件被放在Win32這個頁次裡面。

25 4-5. CoolBar元件的使用 範例4-6：CoolBar和ToolBar的比較與應用
當CoolBar被放到Form上面時，預設位置也是在最上方。當然，在這邊也跟ToolBar一樣，我們可以根據修改『Align』這個屬性的值來改變CoolBar放置的位置。

26 4-5. CoolBar元件的使用 範例4-6 在CoolBar上面按右鍵可以呼叫出Bands Editor來新增或是刪除CoolBar內的CoolBand（類似ToolBar的元件）。我們也可以直接從VCL元件中拉ToolBar下來放在CoolBar上面，CoolBar也會自動將ToolBar建立成CoolBand。

27 4-5. CoolBar元件的使用 範例4-6 執行結果

28 4-5. CoolBar元件的使用 Dock – 它到底是什麼東西
CoolBar還有另外一個很特別的功能就是Dock。什麼是Dock呢？就是可以將某些元件（一般都是工具列）從視窗上獨立出來變成一個小小的視窗，也可以從小小的視窗結合回主要的視窗上。我們現在就依照剛剛我們所設計的範例程式4-6的介面，將CoolBar上的ToolBar設計成可以Dock。 執行結果

29 4-5. CoolBar元件的使用 Dock實作 要將程式設計成Dock的功能很簡單，只需要一點點的步驟。
第一，要先把DockSite啟動，所以我們在這個程式中需要將CoolBar中的DockSite這個屬性改成true。 接著再將ToolBar上的DragKind改成dkDock。 最後將DragMode改成dmAutomatic就可以了。

30 本章習題 請練習在ToolBar中的ToolButton設定MenuItem，以期跟MainMenu結合。 了解Dock的意義。
練習使用On-Line Help來查詢VCL元件的各項資訊。