基础综合 C++ Builder 按钮组件

1

基础综合 C++ Builder 按钮组件

窗口程序中，占最大部分的大概就是按钮了。在这一章里面，我们详细的介绍各种卷标、按钮的 VCL 组件，进而介绍一些 Tool Bar 的使用方法。

2

大纲

• 2-1. 建立最基本的按钮• 2-2. 有图形的按钮• 2-3. 快速按钮• 2-4. 工具列组件的使用• 2-5.CoolBar组件的使用• 本章习题

3

2-1. 建立最基本的按钮

• VCL 组件位置– 最基本的按钮位在 VCL 组件面版上的 Standard 这一个页次里，我们

在 Button 这个 VCL 组件上面用鼠标左键按一下，面版会变成凹下去的图案，接着我们将鼠标移到 Form 上面的任何一个位置按一下鼠标左键，就会有一个按钮出现在窗体上。

4


• 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左边的距离。

5


• 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 来达到这样的目标。

6


• VCL 组件的属性设定– Cursor ：当鼠标光标移动到这个 VCL 组件上会出现的光标形状。当

我们利用鼠标点下 Cursor 属性旁的小下拉式选单，就会出现许多光标的样式让我们选择。选定了之后，以后只要鼠标移动到该 VCL 组件上面，鼠标的指针就会变成我们所指定的样式。

7


• VCL 组件的属性设定– Enabled ：主要就是设定该 VCL 组件是否被『启动』。

我们以 Button 来做解释，如果现在 Enabled 被设定成『 true 』，则我们可以使用鼠标『按下』该 Button 。反之若是将 Enabled 设定成『 false 』，则无法让我们的鼠标有『按下』的动作发生，且 Button 的颜色会变成灰色的，当然所有跟该 Button 的事件也都无法被驱动。在范例程序 2-1 中，我们就将 Button5 的 Enabled 设定成false ，那之前我们已经用过的 button1-2 这四个button 的 Enabled 都是被设定成『 true 』。

8


• 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 』。

9


• VCL 组件的属性设定– Name ： Name 就是是这个组件的名称。像我们刚刚一直在提的

Button1 、 Button2 、 Button3 之类的组件『名称』，就是指该VCL 组件的『 Name 』。这个 Name 跟 Caption 没有绝对的关系，只是有些时候，一些程序设计师喜欢将 Caption 跟 Name 所使用的名称弄成相同的。不过严格说起来， Caption 是显示出来给大家看的，而 Name 是在程序中让程序代码看的。

10


• 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

11


• VCL 组件的程序代码编辑– 在加入程序代码之前，请各位先想想之前谈过的『什么是事件』？如

果还没忘记，一定知道事件（ Event）就是当某件事情发生时会执行的东西！那在按钮中，我们希望『它』被按下时会有一些动作出现，所以我们就必须要将程序代码写在『 OnClick 』这个事件里。这时候我们将对象检视器换到 Event 这个页次来，在 OnClick右边的小空白栏上面点两下就会出现 OnClick 这个事件的函式了。现在我们就以范例程序 2-2 来做个介绍。

12

2-2. 有图形的按钮

• 有图有文才能算是真正的 User Friendly ，不少Windows上的按钮也都是有图形的。当然， BCB 也考虑到了这一点。我们可以在 VCL 组件面板中的 Additional 页次中找到它，这个组件就叫做『 BitBtn 』。

13


• 范例 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 数。

14


• 范例 2-3 ：执行结果

15

2-3. 快速按钮

• 在窗口程序的Menu下方通常会有一堆按钮可以使用，这些按钮就是『 SpeedButton』。 SpeedButton也是属于图形化的按钮，不过跟前面所提到的 BitBtn在特性上有点不太相同，一些功能上也不同，例如 SpeedButton可以做群组化的功能，也可以做 Flat的功能等等。 SpeedButton也是被放在 Additional的这一个页次上。一般使用SpeedButton都会搭配 ToolBar之类的组件一起设计。

16

2-3. 快速按钮

• 范例 2-4 ：范例 2-4 详细的介绍 SpeedButton 与 Button 、BitBtn 这两个 Button 不同的功能。如果之前有介绍到一样的属性，在此将不重复解释。– AllowAllUp ：在同一个群组上的所有 SpeedButton 都可以同时保持

着不被选取的状态，也就是没有凹下去。– Down ：用以设定此按钮有没有被选取，若被选取时按钮会是凹下的，

且此值为 True ，反之没被选取就是没有凹下去，且值为 False 。– Flat ：可以将按钮设定成像 Office 上方那种形式的按钮，等到鼠标移

到那个按钮上时，按钮就会浮起来，感觉上有立体的效果。– GroupIndex ：可以将一群 SpeedButton集合成一个群组，则此群

组同时只有一个按钮可以被选取。若是 AllowAllUp 有被选取时，你可以再按一次已凹下的按钮，按下时就会自动恢复到没有被选取的状态。若是 AllowAllUp 被设定成 False ，则在按下按钮后，除非你按了同一群组中的其它按钮，否则被按下的按钮将永远是凹下的。

17

2-3. 快速按钮

• 范例 2-4 ：执行结果

18

2-4. 工具列组件的使用

• 前面提到了这么多种的按钮，但是不管是 Office 或是Internet Explorer他们的按钮都是在一条棒子上，我们的怎么都散落各地。在 2-4 跟 2-5 这两小节，我们将介绍两种常见的工具列组件，让我们的按钮也可以很漂亮很整齐的表现出来。

• 我们在 2-4 这一小节要谈的是 ToolBar ， ToolBar它被放在Win32 这一个页次中。

19


• 范例 2-5 ：在 ToolBar 的练习中，我们将利用范例 2-5 来完成所有有关 ToolBar 的功能。首先我们先将一个工具列放到Form 上面，预设是放在 Form 的最上方，我们可以借着更改 Align 的属性去变更 ToolBar 在 Form 上的位置。

20


• 范例 2-5– 在 ToolBar上我们可以按鼠标的右键，让 ToolBar跳出一个 PopupMenu让我们新增 Button或是 Separator。

– 在 ToolBar上产生的 Button称作 ToolButton。• 若是你不喜欢用 ToolButton那也没关系，你可以用我们之前讨论过的那三种按钮放在 ToolBar上，只不过会用ToolButton通常都是希望将主选单上的一些常用功能列出来，所以在ToolButton上就有一个专属的属性（MenuItem）可以设定这个按钮是对应到MainMenu的那一个选项（有关MainMenu我们会在后面章节提到）

21


• 范例 2-5– 在 ToolBar 上面的

ToolButton 若是要出现图案的话，必须要新增一个ImageList 的 VCL 组件，并且将一些图片加入到ImageList 中（ ImageList我们将会在后面的章节中提到），接着在 ToolBar 上的Images 这个属性设定为我们刚刚新增的 ImageList 。这样子， ToolButton 就可以利用 ImageIndex 来设定要用ImageList 中的那一个图案了。

22


• 范例 2-5– ToolButton提供了五种不同的按钮格式，分别为

tbsButton 、 tbsCheck 、 tbsDivider 、 tbsDropDown 、 tbsSeparator这五种，各位可以对这五种分别的使用看看。

– 在这边我们介绍 tbsDropDown 的用法。 tbsDropDown 就是按钮旁边会出现一个小的下拉式选单，我们可以从下拉式选单选取我们想要的功能，所以在这边我们需要再加入一个 PopupMenu 来当下拉式选单（ PopupMenu 将在后面章节介绍）。当我们把 PopupMenu设定好后，我们必须将这个 ToolButton 中的 DropDownMenu 这个属性设定成我们刚刚加入的那个 PopupMenu ，这样我们就可以发现我们的这个按钮已经具备有下拉式选单的功能了。

23


• 范例 2-5– 执行结果

24

2-5. CoolBar组件的使用

• CoolBar 跟 ToolBar有点类似，不过 CoolBar可以说是多个 ToolBar的集合。– CoolBar 就是我们在档案总管中最上面的那几排，虽然每一排看起来

都像是 ToolBar ，但是最外面却包了一层 CoolBar ，让整个接口看起来更华丽美观。 CoolBar 这个 VCL 组件被放在 Win32 这个页次里面。

25


• 范例 2-6 ： CoolBar 和 ToolBar的比较与应用– 当 CoolBar 被放到 Form 上面时，预设位置也是在最上方。当然，在

这边也跟 ToolBar 一样，我们可以根据修改『 Align 』这个属性的值来改变 CoolBar放置的位置。

26


• 范例 2-6– 在 CoolBar上面按右键可以呼叫出 Bands Editor来新增或是删除

CoolBar内的 CoolBand（类似 ToolBar的组件）。我们也可以直接从 VCL组件中拉 ToolBar下来放在 CoolBar上面， CoolBar也会自动将 ToolBar建立成 CoolBand。

27


• 范例 2-6– 执行结果

28


• Dock – 它到底是什么东西– CoolBar 还有另外一个很特别的功能就是 Dock 。什么是 Dock呢？

就是可以将某些组件（一般都是工具列）从窗口上独立出来变成一个小小的窗口，也可以从小小的窗口结合回主要的窗口上。我们现在就依照刚刚我们所设计的范例程序 2-6 的接口，将 CoolBar 上的ToolBar 设计成可以 Dock 。

– 执行结果

29


• Dock实作– 要将程序设计成 Dock 的功能很简单，只需要一点点的步骤。

• 第一，要先把 DockSite 启动，所以我们在这个程序中需要将CoolBar 中的 DockSite 这个属性改成 true 。

• 接着再将 ToolBar上的 DragKind改成 dkDock。• 最后将 DragMode改成 dmAutomatic就可以了。

30

本章习题

• 请练习在 ToolBar中的 ToolButton设定MenuItem，以期跟 MainMenu结合。

• 了解 Dock的意义。• 练习使用 On-Line Help来查询 VCL组件的各项信息。

Documents

基础综合 C++ Builder 按钮组件