1、第8章 界面设计,第一节 界面设计概述 第二节 菜单设计 第三节 工具栏和状态栏 第四节 对话框设计 第五节 多重窗体设计 第六节 多文档界面设计 第七节 快速创建界面 第八节 综合应用,本章目录,教学目的要求与重难点,程序界面设计是软件开发中的一个重要环节，友好的界面不仅能提升程序界面的可观赏性,而且也能提高应用程序的可操作性，成为用户和程序实用的接口。,程序界面设计内容包含哪些工作呢？ 做好界面设计工作的基本步骤是什么？ 界面设计经验有哪些？ 界面中各个组件如何进行设计？,界面设计流程 首先应该是做好界面设计的规划工作。 其次，再根据整体界面规划情况，对界面各个控件进行设计。程序界面设计包
2、含的工作较多，如封面、软件框架、按钮、菜单、标签、图标、工具栏、对话框、状态栏和安装过程等的设计。,第二节 菜单设计,菜单是Windows构成程序界面最常用的元素之一。 它提供了展示包含了实现程序各个功能的命令集合的平台，其容量大，并能很好地对程序的操作进行分类管理，使用户能够形象直观地进行操作。,一、菜单的类型,Windows中，菜单分为两种类型。 （一）下拉式菜单,下拉式菜单一般位于窗口的顶部，包含两部分： 菜单栏：是一个包含多个菜单的条形区域，如WORD中的菜单栏，包含了文件、编辑、格式、表格等菜单。菜单项：是代表能实现特定功能的命令，或者是弹出下一级子菜单，每个菜单项都有一个名称，称之
3、为菜单标题或菜单项。,（二）弹出式菜单弹出式菜单又称之为快捷菜单。当右击某一个对象时，往往可以弹出一个菜单，其中所列出来的命令就是针对该对象能完成的操作，具有方便、快捷的特点。,如何来进行菜单设计呢？,菜单设计步骤： 1.菜单系统规划。这个阶段主要是根据任务组织菜单系统，确定要哪些菜单，每个菜单包含哪些命令，菜单名如何确定，每个菜单项要实现什么功能等。 2.建立菜单。这个阶段主要是通VB工具根据上述规划建立菜单，并编写相应的代码。 3.测试并运行菜单。这个阶段主要是调试、运行菜单，进行必要的测试工作。,通过举例演示，快速引入制作菜单的步骤及其制作方法和技巧。,例8-1设计一个可用来输入问候语并
4、能简单设置字体、字号和字的颜色的程序，运行界面如下图所示：,程序设计步骤：,1.新建工程，在窗口上创建文本框text1,并将属性text设置成“大家好！”，调整好大小和位置。 2选中窗体，选择“工具”菜单项，从其下拉菜单中执行“菜单编辑器”命令，打开菜单编辑器，按要求设计下拉菜单。 3代码编写，在菜单上选择每一个菜单项，都能进入该菜单项的CLICK事件过程，输入代码。,常用的菜单设计思路和风格：,1.根据用户任务组织菜单系统，即要围绕用户完成任务的思路和方法来设计菜单和菜单项； 2.给每个菜单和菜单选取一个意义明确的标题； 3.按照菜单项的使用频率、逻辑顺序或字母顺序排列菜单项； 4.对属于不
5、同功能区的菜单项之间放置分隔线； 5.对菜单和菜单选项建立热键或快捷键，提供快捷操作手段； 6.适当建立子菜单，避免菜单上菜单项的数目过多； 7.在菜单项中混合使用大小写字母，强调时可使用大写字母。,弹出菜单的制作,弹出菜单是通过PopupMenu方法来显示的,其语法为: 对象. PopupMenu 菜单名，标志，X,Y 其中: 对象为可选项，默认为带有焦点的Form对象。 单名是必须的，是要显示的弹出式菜单名，指定的菜单必须喊有至少有一个菜单； X，Y：指显示弹出菜单的位置，缺省则表示使用鼠标的坐标。 标志:用于定义弹出式菜单的位置和行为。当标志等于0时，为系统的默认状态，此时，弹出菜单的左
6、边界就是X的位置，当标志等于4时，弹出菜单的中心位置就是X的位置，当标志等于8时，弹出菜单的右边界就是X的位置。,例8-2可以在例8-1中添加一个快捷的编辑菜单，用鼠标右击文本框时弹出这个快捷菜单。,操作步骤 1.承接上例，在原来菜单的基础上对菜单进行修改，增加一个顶层菜单“字符格式”，取名为“zfgs”，如图8.6所示，单击“”按钮将原菜单中的“字体”、“字号”和“字的颜色”等菜单及相应的菜单项都降一级。 2.将“字符格式”菜单的Visible属性设置为False，即去掉“可见”复选框中的“”。这样程序运行时就不显示这个菜单项。 3.单击“下一个”命令按钮，依次输入弹出式菜单中要显示的各菜单
7、项，并将其都设置为顶层菜单的子菜单（添加内缩符号）。 4.在例8-1中原代码的基础上，增加如下代码： Private Sub text1_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single) If Button = 2 ThenPopupMenu zfgsText1.Enabled = True End If End Sub,WORD“文件”菜单中所列出来的文档是如何动态实现的？,下面来学习动态增删菜单项。 动态增删菜单项是指可以根据程序的需要自动地增删菜单项。如在WORD中，“窗口”菜单下会显示打开的文件
8、列表，当关闭一个文档时，“窗口”菜单中相应的文件信息就会被删除，反之，如果打开一个新的文档，则“窗口”菜单中就会增加一个文件信息。 动态增删菜单项，其实就是建立一个菜单项数组，然后通过load和unload来添加数组元素或删除数组元素。下面通过例子来说明其用法。 举例说明,例8-3建一个可以描述打开或关闭文档状态的“窗口”菜单，即打开一个新的文档，则“窗口”菜单中就会增加一个文件信息，而关闭一个文档时，“窗口”菜单中相应的文件信息就会被删除。,操作步骤：,1.界面设置 创建如图所示的界面。,“窗口”菜单中添加一个用于显示文件列表菜单项的样本菜单项“文件信息” 。,在其“索引”框中填入数字 0，
9、 并设置为不可见！,2.添加程序代码,定义用于统计文件信息菜单项个数的变量I Dim I as Integer “打开”菜单项的 Click 事件 Private Sub open_Click() CommonDialog1.Action = 1 i = i + 1 Load fileinfo(i) fileinfo(i).Caption = “第“ & i & “个:“ & CommonDialog1.FileName fileinfo(i).Visible = True End Sub,“关闭”菜单项的 Click 事件,Private Sub MenuClear_Click() If i
10、 = 0 Then Exit Sub Else j = Val(InputBox(“输入“, “请输入需删除的菜单项序号“) For k = j To i - 1 fileinfo(k).Caption = fileinfo(k + 1).Caption m = InStr(1, fileinfo(k).Caption, “个“) fileinfo(k).Caption = “第“ & k & Mid(fileinfo(k).Caption, m) Next Unload fileinfo(i) i = i - 1 End If End Sub,第三节 工具栏和状态栏,一、工具栏 执行“工程”
11、菜单中的“部件”命令，打开“部件”对话框，如图8.14所示，在“控件”选项卡中选中“Microsoft Windows Common Control 6.0”选项，单击“确定”即能将工具栏(Toolbar)控件、图像列表(Imagelist)控件和状态栏(Status)控件添加到工具箱,例8-4制作一个可用于设置字号的图形按钮工具栏。程序界面如图所示：,二、状态栏,状态栏是窗体下的一个长方条。一般可用状态栏来显示系统的信息和对用户的提示，如系统日期和时间、插入或改写标记、软件版本、光标位置以及对当前操作的提示信息等。,状态栏的设计方法 1添加状态栏控件。 2设置状态栏控件的“属性页”对话框 3
12、通过代码设置状态栏的属性 如：Panel1.index=6Panel1.key = “messeage1”Panel1.visible=truePanel1.text = “您可以选择对象”Panel1.picture = loadPicture (“d:mypicture.bmp”)Panel1.enabled=trueStatusBar1.panels(1).text=”可以进行编辑操作”,例8-6基于例8-5，添加一个状态栏，要求能在状态栏中显示文本框中的光标所在的起始位置、选定的内容、文本框中的文字的个数，能显示CAPS LOCK键的状态并能显示当前日期和时间，程序界面如下图所示：,第
13、四节 对话框设计,对话框是windows中的一种很重要的界面，和一般窗口不同，对话框的大小不能改变，所以和改变窗口大小的组成都没有，如不能有最大化按钮和最小化按钮，无控制菜单，无边框等。,如何花费较少的时间和精力？,Visual Basic 6.0提供了通用对话框控件， 用它可以快速地制作较为通用的对话框。,一、通用对话框控件,通用对话框可以提供六种形式的对话框。在代码中可通过设置action属性或调用该控件的show方法来产生不同的对话框。,二、文件对话框,文件对话框包括打开（Open）文件对话框和保存文件（Save As）对话框 。,例8-7编一个能打开文件和保存文件的程序，打开时要求能将
14、文件的内容在文本框中显示，保存时能将文本框中的内容存到.doc或.txt类型的文件，具有清空文本框的功能。,来实现文件的打开。具体代码如下： Private Sub Command1_Click()CommonDialog1.FileName = “CommonDialog1.InitDir = “d:“CommonDialog1.Flags = cdlOFNFileMustExistCommonDialog1.Filter = “All Files|*.*|(*.doc)|*.doc|(*.txt)|*.txt“CommonDialog1.FilterIndex = 4CommonDialo
15、g1.DialogTitle = “打开文件“CommonDialog1.Action = 1If CommonDialog1.FileName = “ ThenMsgBox “您没选择文件“, 37, “错误“ElseOpen CommonDialog1.FileName For Input As #1Do While Not EOF(1)Input #1, a$Text1.Text = Text1.Text & Chr(13) + Chr(10) & a$LoopEnd IfClose #1 End Sub 上述粗体代码实现了打开操作。,三、颜色对话框颜色对话框用来设置颜色。通过使用通用对
16、话框控件的ShowColor方法或将其action属性值设为3时可显示颜色对话框。,例8-8：基于例8-7，增加一个设置文本框文本颜色的按钮，通过使用该按钮能够对文本框中文本改变颜色。 Private Sub Command4_Click()CommonDialog1.ShowColorText1.ForeColor = CommonDialog1.Color End Sub,四、字体对话框字体对话框是Windows界面中很重要的组成，它可以用来给文字指定字体、大小、颜色、下划线等。,例8-9在例8-8的基础上，增加一个“字体”按钮，通过使用该按钮能够对文本框的文本进行字体、字号、字型等的设置
17、。 字体按钮的单击事件过程。具体代码如下： Private Sub Command5_Click()CommonDialog1.Flags = 3 Or 256CommonDialog1.Action = 4Text1.FontName = CommonDialog1.FontNameText1.FontSize = CommonDialog1.FontSizeText1.FontBold = CommonDialog1.FontBoldText1.FontItalic = CommonDialog1.FontItalicText1.FontUnderline = _ CommonDialog
18、1.FontUnderlineText1.FontStrikethru = _ CommonDialog1.FontStrikethru End Sub,五、打印对话框 六、帮助对话框,程序一般是包含多个窗体的， 那么那些窗体是如何管理， 如何互相关联的呢？,第五节 多重窗体设计,一般软件都是包含多个窗体，如资料管理系统，见图,一、多窗体的建立,(一)添加窗体添加窗体可以添加一个新的窗体，也可以添加一个已存在的窗体。“工程”菜单并执行“添加窗体”命令或工具栏上的“添加窗体”按钮 。 (二)窗体的保存窗体的保存可执行“文件”的“保存”命令来完成。,（三）移除窗体移除窗体是指将该窗体从工程中移除，
19、解除该窗体和工程之间的关系，但并不是删除该窗体文件，该文件仍然存在于原来的位置。 执行“工程”菜单中的“移除窗体”命令 。 （四）设置启动在拥有多个窗体的程序中，要有一个用于启动的开始窗体。系统默认原窗体名称为Form1的窗体为开始窗体，如果要指定其他窗体为开始窗体，应选择“工程”菜单中的“属性”命令，在打开的对话框中通过修改“通用”选项卡的“启动对象”来实现。,二、窗体间的交互,（一）常用语句 1Load语句该语句把一个窗体装入内存。执行load语句后，可以引用窗体中的控件及各种属性，同时产生一个LOAD事件，但此时窗体没有显现出来。格式：load 窗体名称其中“窗体名称”是窗体的Name属
20、性。 如：load form1 2Unload语句该语句与load语句的功能相反，它从内存中删除指定的窗体。 格式：Unload 窗体名称 如：unload form1,（二）常用方法1show方法该方法用来显示一个窗体，同时兼有装入功能。在执行show时，不仅会把窗体装入内存，同时会显示出来。格式：窗体名称. Show模式2hide方法：其功能是隐藏运行的窗体，但并不是关闭了该窗体。格式：窗体名称.Hide（三）窗体间数据共享 上述语句和方法可实现窗体间的调用，窗体间数据共享主要是通过以下方法实现。(1)存取控件的属性，可以通过以下格式来获得别的窗体中某控件的属性值。格式：另一窗体名.控件名
21、.属性 Private Sub Form_Click()Form1.caption=form2.label1.caption End Sub表示在form1的标题上显示form2窗体上的label1的标题内容。(2)存取变量的值格式：另一窗体名.全局变量名,例8-12编写一个能根据用户输入的出生年份，回答用户的生肖的程序。1、新建工程并在工程中添加如图所示的14个窗体。2、封面窗体(form13)的设计3、 “输入出生年”窗体（form14）的设计4、生肖显示窗体(form1 form12)的设计,多重窗体包含多个窗体，他们之间是相对独立的关系。多文档界面，多文档界面由父窗体和子窗体组成，是一
22、种允许在单个容器窗体中包含多个窗体的应用程序。,第六节 多文档界面设计,一、多文档界面概述,二、多文档界面的工作特点,1MDI子窗体只能在MDI父窗体的工作区中打开，最小化后将以图标形式出现在父窗体中，而不会出现在Windows 的任务栏中。当最小化父窗体时，所有的子窗体也被最小化，只有父窗口的图标出现在任务栏中。 2在运行时，当一个MDI子窗体被最大化时，其标题将与父MDI窗体的相结合。 结合后的形式为：MDI窗体标题MDI子窗体标题 。 3应用程序运行时，每个子窗体的菜单都显示在MDI窗体上，而不是在子窗体本身。当某个MDI子窗体有焦点时，若该窗体有菜单，则该子窗体的菜单将代替父窗体的菜单
23、栏上的菜单。如果没有可见的子窗体，或者如果带有焦点的窗体没有菜单，则MDI窗体将显示自己的菜单。 4如果MDI子窗体在其父窗体装入之前被引用，则父MDI窗体将被自动装入。然而，如果父窗体在MDI子窗体装入之前被引用，则子窗体并不被装入。 5MDI子窗体都有可调整大小的边框、控制菜单框及最大化和最小化按钮。 6对MDIForm对象的任何引用将导致该窗体的被装入并成为可见的。,例8-13编写一个能浏览图片的程序。,（二）常用的属性 1MdiChild属性 在MDI应用程序中，如果一个普通窗体的MDIChild属性的值为True，那么该窗体就是MDI窗体的一个子窗体。 2AutoShowChildr
24、en属性 MDI窗体的AutoShowChildren属性，决定是否自动显示子窗体。如果它被设置为True，则当改变子窗体的属性后，会自动显示该子窗体；如果AutoShowChildren设置为False，则改变子窗体的属性值后，必须用Show方法把该子窗体显示出来。 3BorderStyle属性 子窗体的BorderStyle属性，如果MDI窗体具有大小可变的边框，即BorderStyle = 2,则其初始化大小与位置取决于MDI窗体的大小，而不是设计时子窗体的大小。当MDI子窗体的边框大小不可变（即BorderStyle = 0、1或3）时，则它的大小由设计时的Height和Width属性
25、决定。 4Windowstate属性 当Windowstate属性值为： vbNormal或 0 （缺省值）时，表示窗体正常显示 。当其值为 VbMinimized或 1时，表示窗体为最小化，即最小化为一个图标。当其值为 VbMaximized或 2时，表示窗体为最大化，即扩大到最大尺寸。在窗体被显示之前，WindowState 属性常常被设置为0，即按窗体的 Height、Left、ScaleHeight、ScaleWidth、Top和 Width 属性设置值来显示。,（三）常用方法 Arrange方法：MDI应用程序中可以包含多个子窗体。当打开多个子窗体时，用MDIform的Arrange
26、方法能够使子窗体或其图标按一定的规律排列。 格式：MDI窗体名.Arrange参数 “参数”是一个整数，表示所使用的排列方式。,第八节 综合应用,例编写一个能启动小小记事本、画图、计算器及其它程序的小软件。要求小小记事本能进行简单的输入、编辑和存盘操作，画图、计算器及其它应用程序可以从windows平台中调用。,(一)建立程序的主界面form3。 1.界面设计。,(二)建立小小记事本程序的主界面MDIform1。,1添加通用对话框控件commondialog1 。 2给窗体添加代码。 Dim st As String Dim i As Integer Private Sub cd_Click(
27、) MDIForm1.Arrange 0 End Sub Private Sub czpp_Click() MDIForm1.Arrange 2 End Sub Private Sub sppp_Click() MDIForm1.Arrange 1 End Sub Private Sub exit_Click() End End Sub,Private Sub MDIForm_Load()Load Form2i = 0 End Sub Private Sub close_Click()If i 0 ThenUnload MDIForm1.ActiveFormi = i - 1 End If E
28、nd Sub Private Sub Copy_Click()st = MDIForm1.ActiveForm.txtNoteEdit.SelText 将选中的内容存放到st变量中MDIForm1.copy.Enabled = False进行复制后,剪切和复制按钮无效MDIForm1.cut.Enabled = FalseMDIForm1.paste.Enabled = True粘贴按钮有效 End Sub,Private Sub Cut_Click()st = MDIForm1.ActiveForm.txtNoteEdit.SelText 将选中的内容存放到st变量中MDIForm1.Act
29、iveForm.txtNoteEdit.SelText = “ 将选中的内容清除,实现了剪切MDIForm1.copy.Enabled = FalseMDIForm1.cut.Enabled = FalseMDIForm1.paste.Enabled = True End Sub Private Sub new_Click()i = i + 1Dim myform As New Form2myform.Showmyform.Caption = “文档“ & i End Sub,(三)建立样本窗体form2。,代码如下： Private Sub Form_Load() 设置剪切、复制、粘贴按钮无
30、效MDIForm1.cut.Enabled = FalseMDIForm1.copy.Enabled = FalseMDIForm1.paste.Enabled = False End Sub Private Sub txtNoteEdit_MouseMove(Button As Integer, Shift As Integer, X As Single, _ Y As Single)If txtNoteEdit.SelText “ ThenMDIForm1.cut.Enabled = True 当拖动鼠标选中要操作的文本后,剪切、复制按钮有效MDIForm1.copy.Enabled =
31、TrueMDIForm1.paste.Enabled = FalseElseMDIForm1.cut.Enabled = False 当拖动鼠标未选中文本,剪切、复制按钮无效MDIForm1.copy.Enabled = FalseMDIForm1.paste.Enabled = TrueEnd If End Sub,Private Sub Paste_Click() 将st变量中的内容插入到光标所在的位置,实现了粘贴MDIForm1.ActiveForm.txtNoteEdit.Text=_ Left(MDIForm1.ActiveForm.txtNoteEdit,_ MDIForm1.Ac
32、tiveForm.txtNoteEdit.SelStart) _ + st + Mid(MDIForm1.ActiveForm.txtNoteEdit,_ MDIForm1.ActiveForm.txtNoteEdit.SelStart + 1) End Sub Private Sub save_Click() CommonDialog1.Filter = “文本文件(*.txt)|*.txt| _ doc文档|*.doc“ CommonDialog1.FilterIndex = 1 CommonDialog1.ShowSave Open CommonDialog1.FileName For Output As #1 Print #1, MDIForm1.ActiveForm.txtNoteEdit.Text Close #1 End Sub,本章小节,本章目录,程序界面是软件开发的重要环节，除了掌握基本的设计方法，仍要不断追求程序界面设计的艺术性，不断提升程序界面的可观赏性、统一性和应用程序的可操作性，使界面成为用户和程序实用的优秀的接口。 菜单设计下拉式菜单 MainMenu弹出式菜单 ContextMext 工具栏和状态栏的设计 通用对话框设计 多窗体、多文档界面的设计,
