1、第十章第十章界面设计第2 2页目标d用户界面是应用程序的一个重要组成部分,它主要负责用户与应用程序之间的交互。dVisual Basic 提供了一系列的界面设计工具和技术1.控件2.对话框3.菜单菜单4.工具栏工具栏5.状态栏6.多重窗体多重窗体7.多文档多文档等d熟悉各种界面设计工具，掌握界面设计技术和设计的原则，为将来开发应用程序奠定良好的基础。第3 3页任务任务1简单文本编辑器简单文本编辑器d 利用Visual Basic的菜单编辑器设计下拉菜单，利用shell函数调用系统应用程序，利用CommonDialog控件打开通用对话框设置相应属性，完成简单文本编辑器的设计。第4 4页任务任务1
2、简单文本编辑器简单文本编辑器 (a)“文件”主菜单 (b)“编辑”主菜单 (c)“格式”主菜单 (d)“附件”主菜单图10-1 简单文本编辑器的执行界面第5 5页任务分析该任务我们要研究以下内容:1.利用菜单编辑器设计菜单。2.利用Shell函数调用系统应用程序，如Word文档、画图、游戏程序等。3.利用CommonDialog控件打开通用对话框，如“打开”、“保存”、“字体”、“颜色”、对话框等，设置相应属性。4.因为要在两个Sub块中完成“复制”和“粘贴”操作，或“剪切”和“粘贴”操作，所以需要设置一个全局变量st存放“选定”文本。5.利用Text1.SelLength属性求选定文本的长度
3、，如果为0，说明未选定文本，则“复制”和“剪切”菜单不可用，否则可用。6.编写菜单代码。第6 6页任务分析菜单1使应用程序可以执行多种任务。2使用户可以高效地使用应用程序。3提供了一种便捷统一的方法，将不同的命令分组排列，使用户可以方便地访问。第7 7页任务分析d 菜单的类型:下拉式菜单 是一种典型的窗口式菜单，一般有一个主菜单，其中包含若干个选择项。主菜单的每一项又可“下拉”出下一级菜单，这样逐级下拉，用一个窗口的形式弹出在屏幕上，操作完后消失。弹出式菜单d又称快捷菜单，是一种小型的菜单，通常在窗体的某个区域通过单击鼠标右键打开，弹出菜单不会固定到窗体。这里只介绍下拉式菜单。第8 8页任务分
4、析子菜单项下级子菜单标记热键快捷键分隔线复选标记菜单项主菜单下拉式菜单下拉式菜单第9 9页任务分析菜单编辑器1启动菜单编辑器d下拉式菜单和弹出式菜单在菜单编辑器中设计，可通过四种方式进入。（1）执行“工具”菜单中的“菜单编辑器”命令。（2）单击工具栏中的“菜单编辑器”按钮。（3）在窗体上单击鼠标右键，弹出一个快捷菜单，选择“菜单编辑器”选项。（4）使用热键Ctrl+E。第1010页任务分析d图10-2 “菜单编辑器”窗口第1111页任务分析2菜单编辑器的组成（1）上半部分是属性区，用来设置菜单属性，主要包含下面属性：标题：菜单的名字及菜单中每个菜单项的标题。名称：用于在代码中引用菜单控件的名称
5、。索引：为用户建立的控件（菜单项）数组设立下标。快捷键：是指按下快捷键，菜单项功能会立刻执行复选：决定是否在菜单项旁边显示一个复选标记“”。有效：决定菜单项是否响应事件。可见：决定菜单项是否可见。第1212页任务分析（2）中间部分是编辑区，有七个按钮，用来对输入的菜单项进行简单的编辑按钮：使选定的菜单上移一层。按钮：使选定的菜单下移一层。按钮：使选定的菜单在同一层菜单中上移一个位置。按钮：使选定的菜单在同一层菜单中下移一个位置。“下一个”按钮：选定下一行。“插入”按钮：在菜单列表框中当前行的上方插入一行，用来插入新的菜单项。“删除”按钮：删除当前选定的行。第1313页任务分析（3）下半部分是菜
6、单项显示区用来显示菜单项的分层列表，子菜单项的缩进状态表示它们在菜单层次结构中的位置或级别。第1414页任务分析菜单的常用属性:1.Visible属性指定在运行时该菜单项是否可见，有两个取值，分别为：Ture：表示可见，缺省设置；False：表示不可见。例如：B1.Visible =Ture2.Enabled属性指定在运行时该菜单项是否可用，有两个取值，分别为：Ture：表示可用，缺省设置；False：表示不可用。例如：B1.Enabled=Ture第1515页任务分析d 菜单的常用事件:菜单或菜单项有且只有Click事件 Click事件用于定义在选择该菜单会触发的操作 单击已经定义好的菜单项
7、即可进入Click事件过程的代码窗口编写代码。第1616页任务实施1.创建新工程2.在主窗体中，选择“工具”菜单下的“菜单编辑器”选项，进入“菜单编辑器”窗口，如图10-2所示，并按表10-1设置各菜单项。图10-2 “菜单编辑器”窗口第1717页任务实施2.在主窗体中，选择“工具”菜单下的“菜单编辑器”选项，进入“菜单编辑器”窗口，如图10-2所示，并按表10-1设置各菜单项。表10-1 各菜单项的设置标题名称快捷键标题名称快捷键文件A格式C新建A1字体C1打开A2颜色C2Word文档A21附件D文本文件A22画图D1另存为A3游戏D2关闭A4纸牌D21编辑B扫雷D22复制B1Ctrl+C关
8、于E剪切B2Ctrl+X粘贴B3Ctrl+V第1818页任务实施3在窗体上添加一个文本框控件TextBox、一个标签控件Label和一个通用对话框控件CommonDialog（事先将该控件加入控件工具箱），在属性窗口中设置各控件的属性，如表10-2所示。表10-2 在属性窗口中设置属性控件名控件名属性名属性名属性值属性值文本框Text1Text空MultilineTrueScrollBars3-BothLockedFalse标签Label1Caption空第1919页任务实施4.在代码窗口编写事件代码并保存、运行源代码Private Sub B_Click()如果未选定文本，“复制”和“剪切”
9、菜单不可用 B1.Enabled=IIf(Text1.SelLength=0,False,True)B2.Enabled=IIf(Text1.SelLength=0,False,True)End SubPrivate Sub D1_Click()画图 Shell(c:windowssystem32mspaint.exe),vbNormalFocusEnd SubPrivate Sub D21_Click()纸牌 Shell(c:windowssystem32sol.exe),vbNormalFocusEnd Sub第2020页任务设计完成效果 (a)“文件”主菜单 (b)“编辑”主菜单 (c)
10、“格式”主菜单 (d)“附件”主菜单图10-1 简单文本编辑器的执行界面第2121页任务任务2带有工具栏的文本编辑器带有工具栏的文本编辑器图10-4 带有工具栏的文本编辑器程序的执行界面利用工具栏ToolBar和图像列表ImageList控件完成工具栏的设计。第2222页任务分析该任务我们要研究以下内容工具栏ToolBar和图象列表ImageList控件。1.将ToolBar和ImageList控件加入到工具箱中。2.利用ImageList控件实现工具栏按钮图片的载入。3.向工具栏添加按钮对象，并且设置ToolBar控件中按钮的属性。4.编写工具栏按钮代码。第2323页任务分析工具栏包含的按钮
11、通常与应用程序菜单项相对应，一般直接位于菜单栏下方在运行过程中，可以使其显示“工具提示”，即提供工具栏按钮用途简短文本说明的小型弹出式窗口。工具栏按钮的目的:1提供对应用程序中常用菜单命令的快速访问。2提供图形界面，方便用户访问常用的应用程序功能。第2424页任务分析创建工具栏的主要步骤:1.添加ToolBar控件和ImageList控件。2.用ImageList控件保存要使用的图像。3.创建ToolBar控件，并将ToolBar控件与ImageList控件相关联，添加按钮对象。4.把工具栏按钮的Click事件代码连接到工具栏的按钮上。图10-8 工具栏(ToolBar)控件和图像列表(Ima
12、geList)控件的图标第2525页任务分析工具栏控件的常用属性:1Align属性确定工具栏的位置，有五个取值，分别为04，代表工具栏放置在设计时所放的位置、窗体的上部、窗体的下部、窗体的左边和窗体的右边。2Style属性 确定按钮对象的外观。3ToolAlignment属性确定文本相对于按钮的位置。4ToolTipText设置工具栏按钮的提示文本。程序运行时，当鼠标在控件上暂停时显示的文本。5ShowTips属性确定是否显示工具栏按钮上的提示文本。第2626页任务分析工具栏控件的常用事件:1ButtonClick事件当单击工具栏中的一个按钮时触发。2Click事件当单击工具栏控件时触发。第2
13、727页任务实施1.打开任务1简单文本编辑器程序的窗体，选择“工程”菜单下的“部件”选项，在“控件”选项卡中选中“Microsoft Windows Common Controls 6.0”复选框，单击“确定”。2.在窗体上添加工具栏ToolBar和图像列表ImageList控件。第2828页任务实施3.利用ImageList控件实现工具栏按钮图片的载入。在ImageList1控件上单击鼠标右键，单击“属性”选项，进入“属性页”窗口选择“图像”选项卡，单击“插入图片”按钮，依次从“c:program filesMicrosoft visual studiocommongraphicsbitma
14、pstlbr_w95”目录中选取图片NEW.bmp等图片。图10-5 “属性页”窗口中的“图像”选项卡第2929页任务实施图10-6 “属性页”窗口中的“通用”选项卡4.建立ToolBar1和ImageList1的关联。在ToolBar1控件上单击鼠标右键，选择“属性”选项，打开“属性页”窗口，选择“通用”选项卡，在“图像列表”中选择“ImageList1”。第3030页任务实施5.在“属性页”窗口中，再选择“按钮”选项卡，进入工具栏按钮属性的设置窗口，并按照表10-3所示设置工具栏中按钮的属性。图10-7 “属性页”窗口中的“按钮”选项卡第3131页任务实施表10-3 工具栏中按钮的属性索引
15、关键字工具提示文本图像1A1新建12A2打开23A3另存为34B1复制45B2剪切56B3粘贴67C1粗体7第3232页任务实施6.在窗体上双击Toolbar1控件，在Click事件Sub块中编写代码并保存、运行 源代码Private Sub Toolbar1_ButtonClick(ByVal Button As MSComctlLib.Button)Select Case Button.Key Case A1 Call A1_ClickCase B1 Call B1_ClickCase C1 Text1.FontBold=True End SelectEnd Sub第3333页任务设计完成
16、效果第3434页任务任务3多窗体的设计多窗体的设计程序运行启动第一个窗体，如图10-9所示，提供了“抽取试题”和“查询成绩”功能。单击“抽取试题”按钮，打开“抽取试题”窗体，然后单击“开始”按钮，随机产生五道试题，用户回答完成后，单击“提交”按钮，自动计算成绩，如图10-10所示。单击“查询成绩”按钮，打开“查询成绩”窗体，如图10-11所示。图10-9 “启动”窗体 图10-10 “抽取试题”窗体图10-11 “查询成绩”窗体第3535页任务分析该任务我们要研究以下内容d 每个窗体实现自己的功能d 通过Hide、Show方法完成多个窗体之间的切换d 利用标准模块实现多个窗体之间的数据访问第3
17、636页任务分析本任务中涉及的主要问题和解决方法有：1.在一个工程中添加三个普通窗体，并分别设计每个窗体的界面和程序代码。2.在工程中添加标准模块，并在标准模块中定义公共变量s，以实现多个窗体之间的互相访问。3.通过Hide、Show方法完成多个窗体之间的切换。第3737页任务分析d 添加窗体:d 选择“工程”菜单下的“添加窗体”选择项，可以新建一个窗体，也可以将一个属于其它工程的窗体添加到当前工程中，实现多个工程共享此窗体。一个工程中的所有窗体不能重名。第3838页任务分析保存窗体:一个工程中若有多个窗体，应分别取不同的文件名保存在磁盘上，通常需要下面两个步骤。1选择“文件”菜单下的“保存”
18、或“另存为”菜单项，分别保存工程管理器窗口中列出的每个窗体或标准模块，窗体文件的扩展名为“.frm”，标准模块文件的扩展名为“.bas”。2选择“文件”菜单下的“保存工程”或“工程另存为”菜单项，将整个工程保存到磁盘上,扩展名为“.vbp”。第3939页任务分析设置启动窗体多窗体程序需要指定从哪个窗体开始执行，即指定启动窗体，默认情况下Visual Basic将设计时的第一个窗体作为启动窗体。设置过程为：选择“工程”菜单下的“工程1属性”菜单项，进入“工程属性”窗口如图10-12 在“工程属性”窗口中指定启动窗体第4040页任务分析在多窗体程序中，需要通过相应的语句和方法来实现打开、关闭、隐藏
19、或显示指定的窗体。1Load语句把一个窗体装入内存，但不显示窗体。格式为：Load 窗体名称2Unload语句清除内存中指定的窗体。格式为：Unload 窗体名称一种常见的用法是 Unload Me第4141页任务分析3Show方法显示一个窗体。格式为：窗体名称.Show 模式 如果缺省“窗体名称”，则显示当前窗体。0 Modal：不用关闭该窗体就可以对其它窗体进行操作，缺省设置；1 Modeless：鼠标只在该窗体内有效，不能到其它窗体操作，只有关闭该窗体后才能对其它窗体进行操作。该方法兼有装入和显示窗体两种功能4Hide方法隐藏窗体，即不在屏幕上显示，但仍在内存。格式为：窗体名称.Hide
20、如果缺省“窗体名称”，则隐藏当前窗体。第4242页任务实施1.新建一个工程。2.设计“启动”窗体Form1（1）在窗体上添加三个命令按钮控件CommandButton和一个标签控件Label，并按图10-8布局，在属性窗口中设置控件的属性，如表10-4所示。表10-4 在属性窗口中设置属性控件名控件名属性名属性名属性值属性值窗体Form1Caption多窗体应用命令按钮Command1Caption抽取试题Command2Caption查询成绩Command3Caption结束标签Label1Caption选择操作第4343页任务实施（2）进入Form1代码窗口，在相应的Sub块中编写如下代码
21、 Private Sub Command1_Click()Form1.Hide Form2.ShowEnd SubPrivate Sub Command2_Click()Form1.Hide Form3.ShowEnd SubPrivate Sub Command3_Click()EndEnd Sub源代码第4444页任务实施3.设计“抽取试题”窗体Form2（1）选择“工程”菜单下的“添加窗体”选项，可以添加一个新窗体Form2。在Form2窗体上添加三个TextBox控件数组、五个标签控件Label、三个Label控件数组和三个命令按钮控件CommandButton，在属性窗口中设置控件的
22、属性 表10-5 在属性窗口中设置属性控件名控件名属性名属性名属性值属性值窗体Form2Caption抽取试题TextBox数组Text1(0)Text1(4)Text2(0)Text2(4)Text空LockedTrueText3(0)Text3(4)Text空Label数组Label6(0)Label6(4)Caption空Label7(0)Label7(4)Caption空Label8(0)Label8(4)Caption“=”命令按钮Command1Caption开始Command2Caption提交Command3Caption返回第4545页任务实施Private Sub Comm
23、and1_Click()For i=0 To 4 Label6(i).Caption=i+1 Next Randomize For i=0 To 4 Text1(i).Text=Int(100*Rnd(1)n=Int(7*Rnd(1)Text3(0).SetFocusEnd Sub(2）进入Form2代码窗口，在相应的Sub块中编写代码源代码第4646页任务实施4设计“查询成绩”窗体Form3（1）选择“工程”菜单下的“添加窗体”选项，可以添加一个新窗体Form3。在Form3窗体上添加一个标签控件Label和一个命令按钮控件CommandButton，在属性窗口中设置控件的属性。表10-6
24、在属性窗口中设置属性控件名控件名属性名属性名属性值属性值窗体Form3Caption查询成绩命令按钮Command1Caption返回第4747页任务实施（2）进入Form3代码窗口，在相应的Sub块中编写如下代码源代码Private Sub Form_Load()Dim str As String If s=80 Then str=很好，继续努力！Else str=需要加油啊！End If Label1.Caption=你的成绩是：&s&分,&strEnd Sub第4848页任务实施5设计模块选择“工程”菜单下的“添加模块”选项，打开“添加模块”窗口，单击“打开”按钮，编写下面代码：Publ
25、ic s As Integer6.运行程序。第4949页任务设计完成效果图10-9 “启动”窗体 图10-10 “抽取试题”窗体图10-11 “查询成绩”窗体第5050页任务任务4多文档界面多文档界面d创建一个多文档界面（MDI）程序，包含一个父窗体和两个子窗体。通过设置Form的“MDChild”属性来定义窗体为子窗体，利用MDIForm1.Arrange方法设置多个子窗体的排列方式。图10-13 “显示”主菜单项的下拉菜单图10-15 窗口的“水平平铺”排列方式图10-14 “窗口”主菜单项的下拉菜单项第5151页任务分析本任务中涉及的主要问题和解决方法有：1.需要添加一个MDI窗体。2.
26、创建两个子窗体，通过设置Form的“MDChild”属性来定义窗体为子窗体。3.通过调用MDIForm1.Arrange方法设置两个子窗体的排列方式。第5252页任务分析单文档界面（SDI）一次只允许打开一个文档，当打开一个新文档时，上一个打开的文档就被关闭。如Windows中的记事本、写字板、画图。多文档界面（MDI）在实际应用中经常需要一个能同时处理多个窗体的应用程序，并且多个窗体可以有机地结合为一体。大多数的流行软件都采用了多文档界面（MDI）,如我们经常使用的Word、Excel、Access等第5353页任务分析d一个MDI应用程序，只能有一个MDI窗体，但可以有多个MDI子窗体。窗
27、体包括普通窗体、MDI窗体和MDI子窗体三类，d如果将一个窗体的MDIChild属性设置为True时，该窗体为子窗体，否则为普通窗体。图10-17 三种类型窗体的图标形态第5454页任务分析MDI的特性1MDI窗体可以看成是一个“窗体容器”，在MDI窗体中只能添加具有Align属性的控件或不可见控件，如PictureBox、CommonDialog、Timer等。2MDI应用程序中的各个子窗体可以以不同的方式排列在父窗体中。3在多文档界面中，当父窗体打开时，子窗体随之调入内存；当父窗体关闭时，子窗体随之关闭；当父窗体最小化时，所有的子窗体也随之最小化，只剩父窗体的图标显示在Windows任务栏
28、中；当子窗体最小化时，其图标显示在父窗体中。第5555页任务分析MDI的常用属性和方法:1MDIChild属性确定窗体是否为子窗体。有两个取值，True为子窗体，False为普通窗体。2WindowState属性该属性用于MDI或子窗体，设置一个窗体窗口运行时的可见状态，有三个取值，分别为：0 Normal：被包围，即被别的窗体包围；1 Minimized：最小化，窗体缩成一个图标；2 Maximized：最大化，窗体充满屏幕。例如：MDIForm1.WindowState=2第5656页任务分析3Arrange方法确定MDI中子窗体或图标的排列方式，格式为：MDI窗体.Arrange 方式其
29、中,方式有四个取值,分别为:0 vbCascade：层叠排列；1 vbTileHorizontal：水平平铺；2 vbTileVertical：垂直平铺；3 vbArrangeIcons：当子窗体被最小化为图标后，在父窗体底部重新排列这些图标。第5757页任务实施1设计两个子窗体Form1和Form2表10-7 在属性窗口中设置属性对象控件名属性名属性值子窗体FormForm1Caption文字MDIChildTrueLabel1CaptionVB程序设计技巧子窗体FormForm2Caption图片MDIChildTrue第5858页任务实施2添加MDI窗体。选择“工程”菜单下的“添加MDI
30、窗体”选项，打开“添加MDI窗体”窗口，再单击“打开”按钮图10-16 新创建的MDIForm窗体第5959页任务实施3设计MDIForm1窗体中的菜单选择“工具”菜单下的“菜单编辑器”选项，进入菜单编辑器窗口，按表10-8所示，完成MDI菜单项的属性设计。标题名称标题名称显示A层叠B1文字A1水平平铺B2图片A2垂直平铺B3窗口B排列图标B4表10-8 各菜单项的属性设置第6060页任务实施4设置启动对象选择“工程”菜单下的“工程1属性”选项，进入“工程属性”窗口，在“启动对象”列表框中选择“MDIForm1”后，单击“确定”按钮，将MDIForm1设置为启动窗口，即程序运行时首先启动 MDIForm1窗体。第6161页任务实施5在MDIForm1窗体上双击鼠标，进入代码窗口，在相应的Sub块中编写代码Private Sub A1_Click()Form1.ShowEnd SubPrivate Sub B1_Click()MDIForm1.Arrange 0End Sub源代码第6262页总结本课讲述了以下内容：用户界面负责用户与应用程序之间的交互，常见的界面设计内容包括：1.菜单菜单2.工具栏工具栏3.多重窗体多重窗体4.多文档多文档回到目录回到目录
