《Visual Basic程序设计》课件1第9章

第9章界面设计9.1界面设计概述

9.2菜单设计

9.3工具栏设计

9.4状态栏设计

9.5多文档界面设计

教学小结

习题

9.1界面设计概述

1．符合Windows界面准则

Windows操作系统的主要优点之一就是为基于其上开发的应用程序提供了标准的操作界面。如果用户掌握了基于Windows的应用程序的使用方法,就很容易使用符合Windows界面准则的其他应用程序。如果偏离了Windows界面准则，使用者使用应用程序时就会感到别扭，比如，在菜单设计中几乎均遵循这样的标准：“文件”菜单在最左边，然后是“编辑”、“工具”等可选的菜单，最右边是“帮助”菜单。如果把“帮助”菜单放在最左边，就会降低应用程序的可用性。同样，菜单项设计时也应符合Windows界面准则。如“编辑”菜单通常有“复制”、“剪切”与“粘贴”等菜单项，若将它们放置于“文件”菜单下也会引起用户的不可理解。

2．确定控件的位置

在大多数界面设计中，不是所有的界面元素都一样重要。仔细斟酌很有必要，以确保重要的界面信息或操作能快速地显现给用户。通常，将重要的或者频繁访问的操作放在屏幕的左上部位。因为按照人们用眼的习惯，首先注视屏幕的左上部位。

3．保证界面元素的一致性

在用户界面设计中，一致的外观(如颜色搭配、窗口大小、字体、字号、线型粗细等)可为使用者创造一种和谐美，有效减轻用眼疲劳。如果界面缺乏一致性，则让人们感到凌乱和缺乏条理性，这无疑会降低人们使用的兴趣。

总之，应用程序界面设计应体现以用户为中心的思想，在满足用户需求的基础上，充分考虑行业的要求与规范，做好界面设计的组织或布局工作，以提高应用程序界面的可用性和美观性。 9.2菜单设计

9.2.1菜单概述

所谓“菜单”，就是可供选择的命令项目列表，分为下拉式菜单和弹出式(快捷)菜单两种形式。下拉式菜单位于菜单栏上，通过点击菜单栏上的菜单标题打开；弹出式菜单通常通过在某一特定区域单击鼠标右键打开。

图9-1为下拉式菜单的示例图，它位于窗口的顶部，在窗口的标题栏下显示了下拉式菜单的菜单栏，包含多个菜单标题。程序在运行时，当用户单击某个菜单标题时便会下拉相应的菜单项(也称子菜单)。图9-1下拉式菜单及其组成元素示例菜单中的菜单项可以是命令、分隔条或子菜单标题。弹出式(快捷)菜单一般由鼠标右键激活，所包含的菜单项同下拉菜单相同，如图9-2所示。图9-2弹出式菜单9.2.2菜单设计

在VB中菜单设计实际也是一种控件的应用，这种控制称之为“菜单”控件，但菜单控件不像其他控件一样放在工具箱中。要使用菜单控件与其相应的命令，应选择“工具”菜单中的“菜单编辑器”命令，或单击工具栏上的“菜单编辑器”按钮，或在窗体上单击右键在快捷菜单中选择“菜单编辑器”命令，便可打开如图9-3所示的“菜单编辑器”对话框。图9-3“菜单编辑器”对话框下面介绍菜单编辑器中的各组成元素。

(1)“标题”(Caption)文本框：用于设置菜单标题，键入的内容会在菜单编辑器窗口下边的空白部分显示出来，该区域称为菜单显示区域。

(2)“名称”(Name)文本框：菜单项的对象名称。对象名称的命名规则同简单变量，如果菜单中有分隔条，分隔条也要有对应的名称。

(3)“索引”(Index)文本框：与一般控件类似，菜单可以利用索引来建立菜单数组，并以索引值来标识数组中的不同成员(类似于Command1(0)、Command1(1)、Command1(2)…)。

(4)“快捷键”(Shortcut)列表框：该列表框列出了很多快捷键供用户选择。菜单项的快捷键是可选的，如果选择了快捷键，则程序运行时快捷键会显示在菜单标题的右边，通过快捷键同样可完成相应命令的操作。

(5)“下一个”(Next)按钮：在菜单列表的最后产生一个空白项，进入下一个同级菜单项的设计。

(6)“→”和“←”按钮：菜单层次的设定按钮，用于调整菜单项的级别。若建立好一个菜单项后按“→”按钮，则该菜单项在显示框中向右移一段，系统自动在菜单项前加4个点“····”，表示该菜单项为下一级的菜单项。如果选定了某菜单项后，再按“←”按钮，前面的省略号将取消，表示该菜单项是上一级的菜单项。

(7)“插入”(Insert)按钮：在选定的菜单项前插入一个菜单项。

(8)“删除”(Delete)按钮：删除选定的菜单项。

(9)“↑”和“↓”按钮：用于改变菜单项的位置。通过“↑”、“↓”按钮将选定的菜单项上移或下移。

(10)“复选”(Checked)检查框：如果在显示框中选定了某个菜单项，再选定Checked检查框，那么当前被选定的菜单项左边加上了一个检查标记“√”，表示该菜单项是一个选项。

(11)“有效”(Enabled)检查框：决定菜单项是否可选(有效)。若该检查框被选中，菜单项的Enabled属性为True，程序执行时菜单项高亮度显示；当未被选中时，Enabled属性为False，在程序执行时该菜单项变成灰色，不能被用户选择。

(12)“可见”(Visible)检查框：决定菜单项是否可见。若该检查框未被选中，则该菜单项的Visible属性为False，程序执行时不可见。

例9-1

设计一个如图9-4a所示的文本编辑器，其菜单设计如图9-4b所示。

在窗体上添加1个TextBox控件(Text1)和1个通用对话框控件(ComDlg)，用菜单编辑器编辑各菜单项，菜单中各选项的属性设置如表9-1所示。表9-1菜单中各选项的属性设置图9-4a “文本编辑器”设计界面图9-4b菜单各选项属性设置9.2.3修改菜单项状态

当菜单创建好后，其中的菜单项在程序运行过程中并不是一成不变的，可以根据实际情况动态地改变菜单项的状态。例如，当前条件不满足菜单项的执行时，可以暂时使其失效或将其隐藏起来，当条件满足时，再使其有效或显示出来，菜单项的状态在“可用”与“不可用”两种状态间切换。

例9-2

在例9-1中，当文本框中没有内容被选中时，剪切、复制、删除菜单项为不可用，当有内容被选中时，则变为可用状态。

设计思路：用户要使用这些命令，首先必须打开Edit菜单，因此，在Edit菜单打开(被单击)时设置命令是否可用。在程序中加入以下代码：9.2.4增减菜单项

Windows应用程序中的菜单项不但可以随着条件的改变而改变其状态，而且还可以随着用户的操作动态地增、减菜单项的内容。

在VB中，实现菜单项增、减的方法是：将有关菜单项创建为菜单数组，在程序运行过程中调用Load或UnLoad方法添加或删除菜单项即可。

例9-3

在例9-1中添加一个“字号”的顶级菜单，用于设置文本框中字体的大小。该菜单项包括“五号”、“四号”子菜单项。当用户选择“四号”时，在该菜单中添加“三号”子菜单项；当选择“五号”时，在该菜单项中删除“三号”子菜单项。

设计界面如图9-5所示，“字号”菜单属性设置如表9-2所示。图9-5菜单项的增减表9-2“字号”菜单属性设置9.2.5弹出式菜单设计

弹出式菜单是独立于主菜单栏而显示在窗体特定位置的浮动菜单，它可以在窗体的指定区域显示出来，并对程序事件做出响应。弹出式菜单又称为上下文菜单或快捷菜单，在Windows中一般通过单击右键来打开弹出式菜单。

在VB中，弹出式菜单是下拉式菜单的一部分，只是它的打开方式独立于下拉式菜单，因此弹出式菜单的建立和修改与下拉式菜单相同，均通过“菜单编辑器”来完成。若不想让弹出式菜单出现在主菜单中，只需要将菜单项设置为隐藏(Visible属性值为False)。需要打开弹出式菜单时使用PopupMenu方法即可。

PopupMenu方法的格式：

[窗体名.]PopupMenu菜单名[,flag[,X,Y]]

其中：

(1) X,Y：快捷菜单显示的位置坐标。

(2)菜单名：至少包含有一个菜单项的菜单名称(Name属性值)。

(3) flag：指定弹出式菜单的行为参数。弹出式菜单包含位置及行为两个常数，位置常数值见表9-3，行为常数值见表9-4。表9-3弹出式菜单位置常数值表9-4弹出式菜单行为常数值

例9-4

将例9-3中的“编辑(Edit)”菜单作为文本框(Text1)的快捷菜单(当用户在文本框中单击右键时显示菜单)。

在代码编辑器中添加以下代码：

9.3工 具 栏 设 计

9.3.1ImageList控件

在窗体上添加一个ImageList控件后，右键单击，选择“属性”，打开ImageList控件的属性页，并选择“图像”选项卡，如图9-6所示。通过此界面可以向ImageList控件中添加和删除图片。图9-6ImageList控件的属性页9.3.2ToolBar控件

1．“通用”选项卡

“通用”选项卡如图9-7所示，用于设置工具栏的整体外观和一些通用动作选项。

“通用”选项卡主要选项说明如下：

(1)“图像列表”：连接一个ImageList控件，用于在正常状态下工具栏按钮上显示的图片。

(2)“可换行的”复选框：该复选框选中时，当工具栏的长度不能容纳所有按钮时，则在下一行显示，否则不显示剩余的按钮。

(3)“样式”：设定按钮的显示是普通风格还是平面风格，默认为普通风格。图9-7“通用”选项卡

2．“按钮”选项卡

“按钮”选项卡如图9-8所示，其功能是用来设置工具栏上各按钮的显示样式及一些行为参数。图9-8 “按钮”选项卡

(1)“插入按钮”与“删除按钮”：在工具栏上添加或删除一个按钮。

(2)“索引”(Index)与“关键字”(Key)：是按钮在工具栏的按钮集合中的唯一编号。通过索引或关键字访问按钮，索引表示每个按钮的数字编号，关键字是每个按钮的标识名。另外，索引是必须指定的，而关键字是可选的。

(3)“标题”与“描述”：标题即按钮的Caption属性，设置显示在按钮上的文字。描述设置按钮的说明信息。

(4)“样式”(Style属性)：决定按钮的行为特点，且影响按钮的功能。样式的属性值及功能见表9-5。表9-5Style属性值及其功能

(5)“图像”(Image属性)：设置工具栏上按钮的图像。该图像引用ImageList对象中的图像，其值是ImageList对象中图片的Index或Key值。

(6)“值”(Value属性)：表示按钮的状态，有按下(tbrPressed)和弹起(tbrUnpressed)两种状态。仅当样式属性值为1和2时起作用。

(7)“工具提示文本”(ToolTipText属性)：鼠标指向按钮时显示的说明文字。

(8)“按钮菜单”：当按钮样式属性值为5时，用于插入或删除按钮菜单的菜单项。

3．常用事件

ToolBar控件常用的事件有两个：ButtonClick和ButtonMenuClick。

ButtonClick：单击按钮(占位符和分隔符除外)时触发。可以通过按钮的Index属性或Key属性识别被单击的按钮，并用SelectCase语句编写按钮的功能代码。其代码结构如下：

ButtonMenuClick：当ToolBar控件Style属性值为5时，即按钮样式为菜单按钮时，单击此按钮时触发。可以使用ButtonMenu对象的Index属性或Key属性识别是哪个按钮被单击，并用SelectCase语句编写按钮的功能代码。

代码结构如下：9.3.3使用ToolBar和ImageList控件创建工具栏

创建工具栏的具体步骤如下：

(1)在窗体上添加ToolBar控件和ImageList控件。

(2)在ImageList控件中添加图像。

(3)在ToolBar控件属性页的“通用”选项卡的“图像列表”组合框中选择ImageList控件，建立与ImageList控件的关联，并设置其他通用参数。

(4)在“按钮”选项卡中添加按钮，并设置各按钮的属性及显示图片的ImageList索引。

(5)编写响应ToolBar控件的事件代码。

例9-5

在例9-4的基础上为编辑器添加一个“格式”工具栏，可以选择字体，设定对齐方式和字体样式。

(1)设计界面。

在窗体上添加1个ImageList控件(ImageList1)和1个ToolBar控件(ToolBar1)。在ToolBar中添加9个按钮。

(2)设置属性。

在ImageList1中添加7张图片(在VB的安装目录C:\ProgramFiles\MicrosoftVisualStudio\Common\Graphics\Bitmaps\TlBr_W95中)，图片顺序如图9-9a所示。图9-9aImageList属性设置在ToolBar属性页的“通用”选项卡中的“图像列表”组合框中选择“ImageList1”，与ImageList1控件建立联系；在“样式”组合框中选择“tbrFlat”，设置按钮显示样式为平面风格；在“按钮”选项卡中设置各按钮的属性，如表9-6所示。表9-6ToolBar1控件各按钮属性设置图9-9bToolBar控件示例

9.4状 态 栏 设 计

状态栏通常位于窗体的底部，用来显示程序的运行状态及其他信息。如显示一些系统信息、日期、时间等；显示菜单、按钮或其他对象的功能或使用方法；显示键盘状态；显示数字锁定键、大小写转换键、插入键的状态等。

1．主要属性

StatusBar的主要属性可以通过其“属性页”的“通用”和“窗格”两个选项卡完成。“窗格”选项卡如图9-10所示。图9-10“窗格”选项卡

(1)“插入窗格”和“删除窗格”按钮：在状态栏中添加或删除一个窗格(Panel对象)。

(2)“索引”和“关键字”：为每个窗格编号或标识。

(3)“文本”：窗格上显示的文本内容。

(4)“对齐”：设置文本的对齐方式。

(5)“浏览”按钮：为窗格添加图片，图像扩展名可以是“.ico”或“.bmp”。

(6)“样式”：设置窗格显示什么样的信息。样式常数值及说明如表9-7所示。表9-7样式属性值及其功能

(7)“斜面”、“自动调整大小”和“对齐”：设置每个窗格的外观。具体属性值分别见表9-8、表9-9和表9-10。表9-8斜面属性值及其功能表9-9自动调整大小属性值及其功能表9-10对齐属性值及其功能

例9-6

为例9-5的文本编辑器添加一个状态栏。在状态栏中显示CapsLock键和Insert键的状态、系统时间，并显示文本框中已输入的字符数，如图9-11所示。图9-11StatusBar控件示例

(1)设计界面。在窗体上添加一个状态栏。

(2)属性设置。

在状态栏中插入4个窗格，依次将其样式设为sbrText、sbrCaps、sbrIns和sbrTime。

(3)编写代码。

PrivateSubText1_Change()

StatusBar1.Panels(1).Text="已输入"&Len(Text1.Text)&"个字符"

EndSub

9.5多文档界面设计

9.5.1多文档界面概述

多文档界面由父窗体和子窗体组成，父窗体(MDI窗体)作为子窗体的容器，子窗体(文档窗体)显示各自文档，所有子窗体具有相同的功能。如图9-12是一个多文档应用程序界面。图9-12多文档应用程序界面多文档界面具有如下特性：

(1)所有子窗体均显示在MDI窗体的工作区中，用户可改变其大小，移动其位置，但被限制在MDI窗体中。

(2)当最小化子窗体时，它的图标将显示在MDI窗体下方而不是在任务栏上。当最小化MDI窗体时，所有的子窗体随MDI窗体一起最小化，但只有MDI窗体的图标出现在工具栏上。

(3)当最大化一个子窗体时，它只能充满整个MDI窗体的工作区，而不是整个桌面。另外，它的标题与MDI窗体的标题一起显示在MDI窗体的标题栏上。

(4) MDI窗体和子窗体都可有各自的菜单，当子窗体加载时将覆盖MDI窗体的菜单。9.5.2创建和设计MDI窗体及子窗体

1．创建MDI窗体

选择“工程”菜单中的“添加MDI窗体”命令，便可创建一个MDI窗体。MDI窗体是所有子窗体的容器，可在其上建立菜单栏、工具栏、状态栏等控件，但不能建立文档控件，如文本框控件。

2．创建子窗体

子窗体其实是一种隶属于MDI窗体的一个普通窗体。因此，要创建一个子窗体，先创建一个普通窗体，然后再将窗体的MDIChild属性设置为True即可。

在工程管理器中可以看到子窗体的图标、MDI窗体的图标及普通窗体的图标都各不相同，如图9-13所示。图9-13MDI窗体管理多文档窗体应用程序的文档数由用户在运行程序时按照自己的需要来创建，因此在设计期要创建多少个子窗体是不确定的。所以，对子窗体的创建一般都是首先创建一个窗体作为模板，在程序运行期按照需要再随时创建。

假设已经创建好一个子窗体模板Form1，则动态创建其他窗体的代码如下：

DimChildFrmAsNewForm1'声明并创建一个ChildFrm窗体变量

ChildFrm属性名=值 '设置窗体的一些属性，如Caption

ChildFrm.Show '将新窗体显示出来9.5.3MDI窗体与子窗体交互

MDI应用程序的子窗体是在程序运行过程中动态建立的，要与这些子窗体进行交互，使用普通方法是不能实现的。为了便于控制这些子窗体及其中的控件，VB为MDI窗体提供了两个属性，即ActiveForm和ActiveControl。

ActiveForm：表示具有焦点的或者最后被激活的子窗体。

ActiveControl：表示活动子窗体上具有焦点的控件。9.5.4卸载MDI窗体

当用户通过“关闭”命令关闭MDI窗体时，首先触发MDI窗体的QueryUnLoad事件，随即触发各子窗体的QueryUnLoad事件，然后触发各子窗体的UnLoad事件，最后触发MDI窗体的UnLoad事件。

MDI的卸载过程是：首先卸载所有的子窗体，最后卸载MDI窗体。

由于QueryUnLoad事件是在窗体卸载之前被调用的，因此在此事件中可以给用户一个机会来保持窗体，或阻止窗体关闭(将QueryUnLoad事件的Cancel参数设置为1)。9.5.5子窗体排列

在MDI窗体中，通过MDI窗体的Arrange方法可以将所有的子窗体按不同的方式进行排列，以便用户操作。

Arrange方法的格式：

MDI窗体名.Arrange排列方式

其中，排列方式参数值及意义见表9-11。表9-11子窗体排列方式9.5.6应用MDI窗体注意事项

使用MDI窗体为应用程序的开发提供了高效、多功能的良好平台。但为了提高应用程序的性能，进行MDI应用程序开发时应注意以下事项：

(1)尽量少使用MDI子窗体。因为每加载一个子窗体，就要消耗较多的内存及系统资源。过多的使用子窗体会造成内存和系统资源不足，而影响程序的运行速度。

(2)在子窗体中，对子窗体本身引用时，应使用Me关键字，而在MDI窗体中则使用ActiveForm。

(3)当子窗体菜单项、MDI菜单项或工具栏均执行相同功能操作时，应以过程的形式保存到标准模块中，供各模块共享。

(4)把整个应用程序中所使用的不可视控件(如Timer)都放在MDI窗体上，以便所有子窗体都可以使用这些控件。

例9-7

建立如图9-14所示的多文档编辑器。图9-14多文档编辑器界面操作步骤：

(1)建立一个新工程，