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

Presentation on theme: "页眉 基础综合 C++ Builder 按钮组件"— Presentation transcript:

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

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

3 页眉 2-1.建立最基本的按钮 VCL组件位置 最基本的按钮位在VCL组件面版上的Standard这一个页次里，我们在Button这个VCL组件上面用鼠标左键按一下，面版会变成凹下去的图案，接着我们将鼠标移到Form上面的任何一个位置按一下鼠标左键，就会有一个按钮出现在窗体上。

4 页眉 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左边的距离。

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

6 页眉 2-1.建立最基本的按钮 VCL组件的属性设定 Cursor：当鼠标光标移动到这个VCL组件上会出现的光标形状。当我们利用鼠标点下Cursor属性旁的小下拉式选单，就会出现许多光标的样式让我们选择。选定了之后，以后只要鼠标移动到该VCL组件上面，鼠标的指针就会变成我们所指定的样式。

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

8 页眉 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』。

9 页眉 2-1.建立最基本的按钮 VCL组件的属性设定 Name：Name就是是这个组件的名称。像我们刚刚一直在提的Button1、Button2、Button3之类的组件『名称』，就是指该VCL组件的『Name』。这个Name跟Caption没有绝对的关系，只是有些时候，一些程序设计师喜欢将Caption跟Name所使用的名称弄成相同的。不过严格说起来，Caption是显示出来给大家看的，而Name是在程序中让程序代码看的。

10 页眉 2-1.建立最基本的按钮 VCL组件的属性设定 TabOrder、TabStop：TabOrder和TabStop最主要就是用来设定Tab的顺序以及这个组件使不使用Tab来使之『Focused』。我们将在范例程序2-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 2-1.建立最基本的按钮 VCL组件的程序代码编辑
页眉 2-1.建立最基本的按钮 VCL组件的程序代码编辑 在加入程序代码之前，请各位先想想之前谈过的『什么是事件』？如果还没忘记，一定知道事件（Event）就是当某件事情发生时会执行的东西！那在按钮中，我们希望『它』被按下时会有一些动作出现，所以我们就必须要将程序代码写在『OnClick』这个事件里。这时候我们将对象检视器换到Event这个页次来，在OnClick右边的小空白栏上面点两下就会出现OnClick这个事件的函式了。现在我们就以范例程序2-2来做个介绍。

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

13 页眉 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数。

14 页眉 2-2.有图形的按钮 范例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-4. 工具列组件的使用 范例2-5：在ToolBar的练习中，我们将利用范例2-5来完成所有有关ToolBar的功能。首先我们先将一个工具列放到Form上面，预设是放在Form的最上方，我们可以借着更改Align的属性去变更ToolBar在Form上的位置。

20 页眉 2-4. 工具列组件的使用 范例2-5 在ToolBar上我们可以按鼠标的右键，让ToolBar跳出一个PopupMenu让我们新增Button或是Separator。 在ToolBar上产生的Button称作ToolButton。 若是你不喜欢用ToolButton那也没关系，你可以用我们之前讨论过的那三种按钮放在ToolBar上，只不过会用ToolButton通常都是希望将主选单上的一些常用功能列出来，所以在ToolButton上就有一个专属的属性（MenuItem）可以设定这个按钮是对应到MainMenu的那一个选项（有关MainMenu我们会在后面章节提到）

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

22 页眉 2-4. 工具列组件的使用 范例2-5 ToolButton提供了五种不同的按钮格式，分别为tbsButton、tbsCheck、tbsDivider、tbsDropDown、tbsSeparator这五种，各位可以对这五种分别的使用看看。 在这边我们介绍tbsDropDown的用法。tbsDropDown就是按钮旁边会出现一个小的下拉式选单，我们可以从下拉式选单选取我们想要的功能，所以在这边我们需要再加入一个PopupMenu来当下拉式选单（PopupMenu将在后面章节介绍）。当我们把PopupMenu设定好后，我们必须将这个ToolButton中的DropDownMenu这个属性设定成我们刚刚加入的那个PopupMenu，这样我们就可以发现我们的这个按钮已经具备有下拉式选单的功能了。

23 页眉 2-4. 工具列组件的使用 范例2-5 执行结果

24 2-5. CoolBar组件的使用 CoolBar跟ToolBar有点类似，不过CoolBar可以说是多个ToolBar的集合。
页眉 2-5. CoolBar组件的使用 CoolBar跟ToolBar有点类似，不过CoolBar可以说是多个ToolBar的集合。 CoolBar就是我们在档案总管中最上面的那几排，虽然每一排看起来都像是ToolBar，但是最外面却包了一层CoolBar，让整个接口看起来更华丽美观。CoolBar这个VCL组件被放在Win32这个页次里面。

25 2-5. CoolBar组件的使用 范例2-6：CoolBar和ToolBar的比较与应用
页眉 2-5. CoolBar组件的使用 范例2-6：CoolBar和ToolBar的比较与应用 当CoolBar被放到Form上面时，预设位置也是在最上方。当然，在这边也跟ToolBar一样，我们可以根据修改『Align』这个属性的值来改变CoolBar放置的位置。

26 页眉 2-5. CoolBar组件的使用 范例2-6 在CoolBar上面按右键可以呼叫出Bands Editor来新增或是删除CoolBar内的CoolBand（类似ToolBar的组件）。我们也可以直接从VCL组件中拉ToolBar下来放在CoolBar上面，CoolBar也会自动将ToolBar建立成CoolBand。

27 页眉 2-5. CoolBar组件的使用 范例2-6 执行结果

28 2-5. CoolBar组件的使用 Dock – 它到底是什么东西
页眉 2-5. CoolBar组件的使用 Dock – 它到底是什么东西 CoolBar还有另外一个很特别的功能就是Dock。什么是Dock呢？就是可以将某些组件（一般都是工具列）从窗口上独立出来变成一个小小的窗口，也可以从小小的窗口结合回主要的窗口上。我们现在就依照刚刚我们所设计的范例程序2-6的接口，将CoolBar上的ToolBar设计成可以Dock。 执行结果

29 2-5. CoolBar组件的使用 Dock实作 要将程序设计成Dock的功能很简单，只需要一点点的步骤。
页眉 2-5. CoolBar组件的使用 Dock实作 要将程序设计成Dock的功能很简单，只需要一点点的步骤。 第一，要先把DockSite启动，所以我们在这个程序中需要将CoolBar中的DockSite这个属性改成true。 接着再将ToolBar上的DragKind改成dkDock。 最后将DragMode改成dmAutomatic就可以了。

30 本章习题 请练习在ToolBar中的ToolButton设定MenuItem，以期跟MainMenu结合。 了解Dock的意义。
页眉 本章习题 请练习在ToolBar中的ToolButton设定MenuItem，以期跟MainMenu结合。 了解Dock的意义。 练习使用On-Line Help来查询VCL组件的各项信息。