第四章  Windows用户窗体的设计

用户窗体的界面设计可以分为三个方面的内容：第一个是利用VCL控件（可视化控件）的窗体界面设计，另外一个是多重窗体的设计（Multiple Forms），还有一个就是经常提到的多文档界面的设计，即MDI。

注意：

@        我们重点需要了解多重窗体和多文档界面窗体的区别。

多重窗体（也叫复合窗体）是指在一个应用程序中有多个窗口界面，一个个分别的显示在屏幕上，而多文档界面是指在一个父窗口中包含有多个子窗口，在程序运行过程中可以同时打开多个窗体，这些窗体之间的关系由程序指定。

下面将分别对三种窗体的界面设计方法加以介绍。

4.1  VCL控件窗体设计

一个应用程序的好与坏，除了算法的设计，代码的编写方面的因素外，用户界面的设计也是一个非常重要的方面，在可视化的编程环境中，虽然不用编写大量的代码就可以设计出丰富的界面，但是要想设计出有个性有特色的用户界面，还是需要程序的开发人员下一番功夫的。

下面就是一个利用VCL控件来进行程序设计的示例，在这个示例程序中所用到的一些控件在程序的初始阶段没有被加载，还需要读者自己把它们添加到工具箱中。

示例程序的具体步骤如下：

1．启动一个新项目

选择菜单“工程”/“部件”，在弹出的对话框中选择所需要的，添加控件后的工具箱如图4-1所示。

图4-1  添加控件后的工具箱

注意：

@        选择菜单“工程”/“部件”的意思是选择“工程”菜单上的“部件”命令，以下同。

2．SSTab控件

在Visual Basic 6.0所提供的控件中，有一些控件可以作为容器控件，在其上可以放置一些VCL控件来进行控件的窗体界面设计，如Frame控件和SSTab控件等，下面就来介绍一下SSTab控件。

图4-2  在窗体上的SSTab控件

它的属性设置如表4-1所示。

表4-1  SSTab控件的属性设置

说明：

控件的名称为SSTab1，它有三个选项，即选项0、选项1和选项2，现在选中的是选项1，现在处于有效的状态，它的显示文字为“Tab 1”，图片为空。

SSTab控件的状态可以在程序中动态的修改，比如在窗体的设计阶段双击窗体，在窗体的Form_Load()事件中添加下列代码：

Private Sub Form_Load()

SSTab1.TabCaption(1) = "选项1"

'设置选项1上的文本

SSTab1.TabVisible(2) = False

'设置选项2上的可见状态

SSTab1.TabEnabled(0) = False

'设置选项0的有效状态

SSTab1.Tab = 1

'设置选项1为选中的状态

SSTab1.Tabs = 4

'添加一个选项

End Sub

保存文件，运行程序，结果如图4-3所示。

图4-3  程序运行结果

3．向窗体上添加控件

向窗体上添加一个CommandButton控件、两个TextBox控件、一个SSTab控件、四个ToggleButton控件、两个UpDown控件和四个Label控件。

添加控件后的窗体如图4-4所示。

图4-4  添加控件后的窗体

控件说明：

n          CommandButton控件用来结束程序的运行，为程序的正常结束提供一个出口；

n          TextBox控件用来显示程序中的两个变量X和Y的值；

n          UpDown控件用来实现变量的动态更新；

n          ToggleButton控件用来实现不同的加减乘除运算；

n          Label控件用来显示文本和运算结果；

n          SSTab控件用来显示不同的选项，同时作为ToggleButton控件的容器。

4．添加代码

下面以乘法操作为例来添加代码，在程序的设计阶段双击ToggleButton3控件，在它的ToggleButton3_Click()事件中添加下列代码：

Private Sub ToggleButton3_Click()

Label4.Caption = Val(Text1.Text) * Val(Text2.Text)

'乘法操作

End Sub

其余控件的代码添加过程在这里就不加赘述，详细的代码请参看附后的完整源程序代码。

5．运行程序

添加完代码后，按功能键F5运行程序，程序运行的初始画面如图4-5所示。

图4-5  程序运行初始画面

在文本框中输入变量X和Y的值，选择一种算法，如除法操作，单击相应的按钮，结果如图4-6所示。

图4-6  程序的运行结果

附程序的完整代码：

Version 6.00

Private Sub Form_Load()

SSTab1.TabCaption(0) = "加法"

SSTab1.TabCaption(1) = "减法"