Transcript 第四章 C++ Builder 按鈕元件

基础综合 C++ Builder 按钮组件
窗口程序中，占最大部分的大概就是按钮了。
在这一章里面，我们详细的介绍各种卷标、按
钮的VCL组件，进而介绍一些Tool Bar的使用
方法。
1
大纲
•
•
•
•
•
•
2-1.建立最基本的按钮
2-2.有图形的按钮
2-3.快速按钮
2-4.工具列组件的使用
2-5.CoolBar组件的使用
本章习题
2
2-1.建立最基本的按钮
• VCL组件位置
– 最基本的按钮位在VCL组件面版上的Standard这一个页次里，我们在
Button这个VCL组件上面用鼠标左键按一下，面版会变成凹下去的图案，
接着我们将鼠标移到Form上面的任何一个位置按一下鼠标左键，就会
有一个按钮出现在窗体上。
3
2-1.建立最基本的按钮
• VCL组件的属性设定
– Top：该VCL组件与Parent窗口上缘的距离。以我们范例2-1的Button来
说，Top的属性值为『40』，而该Button被放置在Form1上面，所以该
Button的Parent就是Form1，而这个『40』就是Button上缘与Form1
Client上缘的距离。
– Left：该VCL组件与Parent窗口左边的距离。以我们范例2-1的Button
来说，Left的属性值为『40』，而该Button被放置在Form1上面，所以
该Button的Parent就是Form1，而这个『40』就是Button左边与Form1
Client左边的距离。
4
2-1.建立最基本的按钮
• VCL组件的属性设定
– Caption：可以设定按钮上的文字，例如我们将范例2-1的Button2的
Caption设定成『Caption设定』，那在Button上就会显示出『Caption
设定』的字样。我们也可以在某个字母之前加上『&』这个符号，那跟
在『&』之后的那个字母就会变成有底线的字母，在Windows的环境中
最主要是可以当做一个快速键来使用。例如在范例2-1的Button3，我
们将Caption设定成『& Close』，那真正在Button上显示的则是
『Close』。
– Font：Font最主要就是更改Caption的字型，例如我们将范例2-1的
Button2的Caption改成新细明体，并且使用粗体，字号10，这时我们
就可以使用Font来达到这样的目标。
5
2-1.建立最基本的按钮
• VCL组件的属性设定
– Cursor：当鼠标光标移动到这个VCL组件上会出现的光标形状。当我们
利用鼠标点下Cursor属性旁的小下拉式选单，就会出现许多光标的样
式让我们选择。选定了之后，以后只要鼠标移动到该VCL组件上面，鼠
标的指针就会变成我们所指定的样式。
6
2-1.建立最基本的按钮
• VCL组件的属性设定
–Enabled：主要就是设定该VCL组件是否被『启动』。我们
以Button来做解释，如果现在Enabled被设定成『true』，
则我们可以使用鼠标『按下』该Button。反之若是将
Enabled设定成『false』，则无法让我们的鼠标有『按下』
的动作发生，且Button的颜色会变成灰色的，当然所有跟
该Button的事件也都无法被驱动。在范例程序2-1中，我
们就将Button5的Enabled设定成false，那之前我们已经
用过的button1-2这四个button的Enabled都是被设定成
『true』。
7
2-1.建立最基本的按钮
• VCL组件的属性设定
– Height、 Width：Height和Width的设定方法跟之前我们谈过的Top与
Left很像，我们可以利用Object Inspector来指定，也可以直接用鼠
标拉一拉，拉出我们想要的大小即可。在这边的数字跟在Top或是Left
那边的单位都一样，都是以Pixel为单位，其实在BCB的环境中，除非
有特别指定长度单位，不然都是以Pixel来当做预设的单位。
– ShowHint：如果将ShowHint设定成『true』，当在执行的过程中，如
果将鼠标移到该VCL组件上，会出现一个小小的窗口显示Hint这个属性
所设定的字符串，这个就是所谓Hint的功能。
– Hint：Hint属性就是要显示出来的字符串，像在范例2-1的Button7上
面，我们就将Hint的属性设定成『显示Hint』。
8
2-1.建立最基本的按钮
• VCL组件的属性设定
– Name：Name就是是这个组件的名称。像我们刚刚一直在提的Button1、
Button2、Button3之类的组件『名称』，就是指该VCL组件的『Name』。
这个Name跟Caption没有绝对的关系，只是有些时候，一些程序设计师
喜欢将Caption跟Name所使用的名称弄成相同的。不过严格说起来，
Caption是显示出来给大家看的，而Name是在程序中让程序代码看的。
9
2-1.建立最基本的按钮
• VCL组件的属性设定
– TabOrder、TabStop：TabOrder和TabStop最主要就是用来设定Tab的顺
序以及这个组件使不使用Tab来使之『Focused』。我们将在范例程序
2-1中，将这九个Button分别设定好TabOrder，以及将Button2和
Button4的TabStop设定成false，以下我们就用一个简单的表格来显示
组件
TabOrder
TabStop
我们的设定状况：
Button1
0
True
Button2
1
False
Button3
2
True
Button4
3
False
Button5
4
True
Button6
5
True
Button7
6
True
OKBtn
7
True
Button9
8
true
10
2-1.建立最基本的按钮
• VCL组件的程序代码编辑
– 在加入程序代码之前，请各位先想想之前谈过的『什么是事件』？如
果还没忘记，一定知道事件（Event）就是当某件事情发生时会执行的
东西！那在按钮中，我们希望『它』被按下时会有一些动作出现，所
以我们就必须要将程序代码写在『OnClick』这个事件里。这时候我们
将对象检视器换到Event这个页次来，在OnClick右边的小空白栏上面
点两下就会出现OnClick这个事件的函式了。现在我们就以范例程序22来做个介绍。
11
2-2.有图形的按钮
• 有图有文才能算是真正的User Friendly ，不少Windows上的
按钮也都是有图形的。当然，BCB也考虑到了这一点。我们可
以在VCL组件面板中的Additional页次中找到它，这个组件就
叫做『BitBtn』。
12
2-2.有图形的按钮
• 范例2-3：在BitBtn中有不少属性都跟Button一样，不过还是
有一些比较特别的属性值得去研究。在这边所要介绍的这四
个新的属性，将会在范例程序2-3中呈现出来。
– Glyph：设定按钮上要出现什么样的图片。方法是按下Glyph这个属性
右边的那个黑点小按钮后，会出现一个选取窗口让我们选取要显示的
图片。
– Kind：自动设定按钮的样式。总共有bkAbort、bkAll、bkCancel、
bkClose、bkCustom、bkHelp、bkIgnore、bkNo、bkOk、bkRetry、
bkYes这11种不同的样式。可以透过Kind这个属性来设定，这11种不同
的值都会有相对应的Graph和Caption。
– Layout：设定图片在按钮的哪个位置。总共有上下左右四个位置可以
设定。
– Margin：设定图片到边界的pixel数。
13
2-2.有图形的按钮
• 范例2-3：执行结果
14
2-3.快速按钮
• 在窗口程序的Menu下方通常会有一堆按钮可以使用，这些按
钮就是『SpeedButton』。SpeedButton也是属于图形化的按
钮，不过跟前面所提到的BitBtn在特性上有点不太相同，一
些功能上也不同，例如SpeedButton可以做群组化的功能，也
可以做Flat的功能等等。SpeedButton也是被放在Additional
的这一个页次上。一般使用SpeedButton都会搭配ToolBar之
类的组件一起设计。
15
2-3.快速按钮
• 范例2-4：范例2-4详细的介绍SpeedButton与Button、BitBtn
这两个Button不同的功能。如果之前有介绍到一样的属性，
在此将不重复解释。
– AllowAllUp：在同一个群组上的所有SpeedButton都可以同时保持着不
被选取的状态，也就是没有凹下去。
– Down：用以设定此按钮有没有被选取，若被选取时按钮会是凹下的，
且此值为True，反之没被选取就是没有凹下去，且值为False。
– Flat：可以将按钮设定成像Office上方那种形式的按钮，等到鼠标移
到那个按钮上时，按钮就会浮起来，感觉上有立体的效果。
– GroupIndex：可以将一群SpeedButton集合成一个群组，则此群组同时
只有一个按钮可以被选取。若是AllowAllUp有被选取时，你可以再按
一次已凹下的按钮，按下时就会自动恢复到没有被选取的状态。若是
AllowAllUp被设定成False，则在按下按钮后，除非你按了同一群组中
的其它按钮，否则被按下的按钮将永远是凹下的。
16
2-3.快速按钮
• 范例2-4：执行结果
17
2-4.
工具列组件的使用
• 前面提到了这么多种的按钮，但是不管是Office或是
Internet Explorer他们的按钮都是在一条棒子上，我们的怎
么都散落各地。在2-4跟2-5这两小节，我们将介绍两种常见
的工具列组件，让我们的按钮也可以很漂亮很整齐的表现出
来。
• 我们在2-4这一小节要谈的是ToolBar，ToolBar它被放在
Win32这一个页次中。
18
2-4.
工具列组件的使用
• 范例2-5：在ToolBar的练习中，我们将利用范例2-5来完成所
有有关ToolBar的功能。首先我们先将一个工具列放到Form上
面，预设是放在Form的最上方，我们可以借着更改Align的属
性去变更ToolBar在Form上的位置。
19
2-4.
工具列组件的使用
• 范例2-5
– 在ToolBar上我们可以按鼠标的右键，让ToolBar跳出一个PopupMenu让我们新
增Button或是Separator。
– 在ToolBar上产生的Button称作ToolButton。
• 若是你不喜欢用ToolButton那也没关系，
你可以用我们之前讨论过的那三种按钮
放在ToolBar上，只不过会用ToolButton
通常都是希望将主选单上的一些常用功
能列出来，所以在ToolButton上就有一
个专属的属性（MenuItem）可以设定这
个按钮是对应到MainMenu的那一个选
项（有关MainMenu我们会在后面章节
提到）
20
2-4.
工具列组件的使用
• 范例2-5
– 在ToolBar上面的ToolButton
若是要出现图案的话，必须要
新增一个ImageList的VCL组件，
并且将一些图片加入到
ImageList中（ImageList我们
将会在后面的章节中提到），
接着在ToolBar上的Images这
个属性设定为我们刚刚新增的
ImageList。这样子，
ToolButton就可以利用
ImageIndex来设定要用
ImageList中的那一个图案了。
21
2-4.
工具列组件的使用
• 范例2-5
– ToolButton提供了五种不同的按钮格式，分别为tbsButton、tbsCheck、
tbsDivider、tbsDropDown、tbsSeparator这五种，各位可以对这五种
分别的使用看看。
– 在这边我们介绍tbsDropDown的用法。tbsDropDown就是按钮旁边会出
现一个小的下拉式选单，我们可以从下拉式选单选取我们想要的功能，
所以在这边我们需要再加入一个PopupMenu来当下拉式选单
（PopupMenu将在后面章节介绍）。当我们把PopupMenu设定好后，我
们必须将这个ToolButton中的DropDownMenu这个属性设定成我们刚刚
加入的那个PopupMenu，这样我们就可以发现我们的这个按钮已经具备
有下拉式选单的功能了。
22
2-4.
工具列组件的使用
• 范例2-5
– 执行结果
23
2-5.
CoolBar组件的使用
• CoolBar跟ToolBar有点类似，不过CoolBar可以说是多个
ToolBar的集合。
– CoolBar就是我们在档案总管中最上面的那几排，虽然每一排看起来都
像是ToolBar，但是最外面却包了一层CoolBar，让整个接口看起来更
华丽美观。CoolBar这个VCL组件被放在Win32这个页次里面。
24
2-5.
CoolBar组件的使用
• 范例2-6：CoolBar和ToolBar的比较与应用
– 当CoolBar被放到Form上面时，预设位置也是在最上方。当然，在这边
也跟ToolBar一样，我们可以根据修改『Align』这个属性的值来改变
CoolBar放置的位置。
25
2-5.
CoolBar组件的使用
• 范例2-6
– 在CoolBar上面按右键可以呼叫出Bands Editor来新增或是删除
CoolBar内的CoolBand（类似ToolBar的组件）。我们也可以直接从VCL
组件中拉ToolBar下来放在CoolBar上面，CoolBar也会自动将ToolBar
建立成CoolBand。
26
2-5.
CoolBar组件的使用
• 范例2-6
– 执行结果
27
2-5.
CoolBar组件的使用
• Dock – 它到底是什么东西
– CoolBar还有另外一个很特别的功能就是Dock。什么是Dock呢？就是可
以将某些组件（一般都是工具列）从窗口上独立出来变成一个小小的
窗口，也可以从小小的窗口结合回主要的窗口上。我们现在就依照刚
刚我们所设计的范例程序2-6的接口，将CoolBar上的ToolBar设计成可
以Dock。
– 执行结果
28
2-5.
CoolBar组件的使用
• Dock实作
– 要将程序设计成Dock的功能很简单，只需要一点点的步骤。
• 第一，要先把DockSite启动，所以我们在这个程序中需要将
CoolBar中的DockSite这个属性改成true。
• 接着再将ToolBar上的DragKind改成dkDock。
• 最后将DragMode改成dmAutomatic就可以了。
29
本章习题
• 请练习在ToolBar中的ToolButton设定MenuItem，以期跟
MainMenu结合。
• 了解Dock的意义。
• 练习使用On-Line Help来查询VCL组件的各项信息。
30