VB界面设计.ppt

第8章界面设计 第一节界面设计概述第二节菜单设计第三节工具栏和状态栏第四节对话框设计第五节多重窗体设计第六节多文档界面设计第七节快速创建界面第八节综合应用 本章目录 教学目的要求与重难点 程序界面设计是软件开发中的一个重要环节 友好的界面不仅能提升程序界面的可观赏性 而且也能提高应用程序的可操作性 成为用户和程序实用的接口 程序界面设计内容包含哪些工作呢 做好界面设计工作的基本步骤是什么 界面设计经验有哪些 界面中各个组件如何进行设计 界面设计流程首先应该是做好界面设计的规划工作 其次 再根据整体界面规划情况 对界面各个控件进行设计 程序界面设计包含的工作较多 如封面 软件框架 按钮 菜单 标签 图标 工具栏 对话框 状态栏和安装过程等的设计 第二节菜单设计 菜单是Windows构成程序界面最常用的元素之一 它提供了展示包含了实现程序各个功能的命令集合的平台 其容量大 并能很好地对程序的操作进行分类管理 使用户能够形象直观地进行操作 一 菜单的类型 Windows中 菜单分为两种类型 一 下拉式菜单 下拉式菜单一般位于窗口的顶部 包含两部分 菜单栏 是一个包含多个菜单的条形区域 如WORD中的菜单栏 包含了文件 编辑 格式 表格等菜单 菜单项 是代表能实现特定功能的命令 或者是弹出下一级子菜单 每个菜单项都有一个名称 称之为菜单标题或菜单项 二 弹出式菜单弹出式菜单又称之为快捷菜单 当右击某一个对象时 往往可以弹出一个菜单 其中所列出来的命令就是针对该对象能完成的操作 具有方便 快捷的特点 如何来进行菜单设计呢 菜单设计步骤 1 菜单系统规划 这个阶段主要是根据任务组织菜单系统 确定要哪些菜单 每个菜单包含哪些命令 菜单名如何确定 每个菜单项要实现什么功能等 2 建立菜单 这个阶段主要是通VB工具根据上述规划建立菜单 并编写相应的代码 3 测试并运行菜单 这个阶段主要是调试 运行菜单 进行必要的测试工作 通过举例演示 快速引入制作菜单的步骤及其制作方法和技巧 例8 1 设计一个可用来输入问候语并能简单设置字体 字号和字的颜色的程序 运行界面如下图所示 程序设计步骤 1 新建工程 在窗口上创建文本框text1 并将属性text设置成 大家好 调整好大小和位置 2 选中窗体 选择 工具 菜单项 从其下拉菜单中执行 菜单编辑器 命令 打开菜单编辑器 按要求设计下拉菜单 3 代码编写 在菜单上选择每一个菜单项 都能进入该菜单项的CLICK事件过程 输入代码 常用的菜单设计思路和风格 1 根据用户任务组织菜单系统 即要围绕用户完成任务的思路和方法来设计菜单和菜单项 2 给每个菜单和菜单选取一个意义明确的标题 3 按照菜单项的使用频率 逻辑顺序或字母顺序排列菜单项 4 对属于不同功能区的菜单项之间放置分隔线 5 对菜单和菜单选项建立热键或快捷键 提供快捷操作手段 6 适当建立子菜单 避免菜单上菜单项的数目过多 7 在菜单项中混合使用大小写字母 强调时可使用大写字母 弹出菜单的制作 弹出菜单是通过PopupMenu方法来显示的 其语法为 对象 PopupMenu菜单名 标志 X Y其中 对象 为可选项 默认为带有焦点的Form对象 单名是必须的 是要显示的弹出式菜单名 指定的菜单必须喊有至少有一个菜单 X Y 指显示弹出菜单的位置 缺省则表示使用鼠标的坐标 标志 用于定义弹出式菜单的位置和行为 当标志等于0时 为系统的默认状态 此时 弹出菜单的左边界就是X的位置 当标志等于4时 弹出菜单的中心位置就是X的位置 当标志等于8时 弹出菜单的右边界就是X的位置 例8 2 可以在 例8 1 中添加一个快捷的编辑菜单 用鼠标右击文本框时弹出这个快捷菜单 操作步骤1 承接上例 在原来菜单的基础上对菜单进行修改 增加一个顶层菜单 字符格式 取名为 zfgs 如图8 6所示 单击 按钮将原菜单中的 字体 字号 和 字的颜色 等菜单及相应的菜单项都降一级 2 将 字符格式 菜单的Visible属性设置为False 即去掉 可见 复选框中的 这样程序运行时就不显示这个菜单项 3 单击 下一个 命令按钮 依次输入弹出式菜单中要显示的各菜单项 并将其都设置为顶层菜单的子菜单 添加内缩符号 4 在 例8 1 中原代码的基础上 增加如下代码 PrivateSubtext1 MouseUp ButtonAsInteger ShiftAsInteger XAsSingle YAsSingle IfButton 2ThenPopupMenuzfgsText1 Enabled TrueEndIfEndSub WORD 文件 菜单中所列出来的文档是如何动态实现的 下面来学习动态增删菜单项 动态增删菜单项是指可以根据程序的需要自动地增删菜单项 如在WORD中 窗口 菜单下会显示打开的文件列表 当关闭一个文档时 窗口 菜单中相应的文件信息就会被删除 反之 如果打开一个新的文档 则 窗口 菜单中就会增加一个文件信息 动态增删菜单项 其实就是建立一个菜单项数组 然后通过load和unload来添加数组元素或删除数组元素 下面通过例子来说明其用法 举例说明 例8 3 建一个可以描述打开或关闭文档状态的 窗口 菜单 即打开一个新的文档 则 窗口 菜单中就会增加一个文件信息 而关闭一个文档时 窗口 菜单中相应的文件信息就会被删除 操作步骤 1 界面设置创建如图所示的界面 窗口 菜单中添加一个用于显示文件列表菜单项的样本菜单项 文件信息 在其 索引 框中填入数字0 并设置为不可见 2 添加程序代码 定义用于统计文件信息菜单项个数的变量IDimIasInteger 打开 菜单项的Click事件PrivateSubopen Click CommonDialog1 Action 1i i 1Loadfileinfo i fileinfo i Caption 第 i 个 CommonDialog1 FileNamefileinfo i Visible TrueEndSub 关闭 菜单项的Click事件 PrivateSubMenuClear Click Ifi 0ThenExitSubElsej Val InputBox 输入 请输入需删除的菜单项序号 Fork jToi 1fileinfo k Caption fileinfo k 1 Captionm InStr 1 fileinfo k Caption 个 fileinfo k Caption 第 k Mid fileinfo k Caption m NextUnloadfileinfo i i i 1EndIfEndSub 第三节工具栏和状态栏 一 工具栏执行 工程 菜单中的 部件 命令 打开 部件 对话框 如图8 14所示 在 控件 选项卡中选中 MicrosoftWindowsCommonControl6 0 选项 单击 确定 即能将工具栏 Toolbar 控件 图像列表 Imagelist 控件和状态栏 Status 控件添加到工具箱 例8 4 制作一个可用于设置字号的图形按钮工具栏 程序界面如图所示 二 状态栏 状态栏是窗体下的一个长方条 一般可用状态栏来显示系统的信息和对用户的提示 如系统日期和时间 插入或改写标记 软件版本 光标位置以及对当前操作的提示信息等 状态栏的设计方法1 添加状态栏控件 2 设置状态栏控件的 属性页 对话框3 通过代码设置状态栏的属性如 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 添加一个状态栏 要求能在状态栏中显示文本框中的光标所在的起始位置 选定的内容 文本框中的文字的个数 能显示CAPSLOCK键的状态并能显示当前日期和时间 程序界面如下图所示 第四节对话框设计 对话框是windows中的一种很重要的界面 和一般窗口不同 对话框的大小不能改变 所以和改变窗口大小的组成都没有 如不能有最大化按钮和最小化按钮 无控制菜单 无边框等 如何花费较少的时间和精力 VisualBasic6 0提供了通用对话框控件 用它可以快速地制作较为通用的对话框 一 通用对话框控件 通用对话框可以提供六种形式的对话框 在代码中可通过设置action属性或调用该控件的show方法来产生不同的对话框 二 文件对话框 文件对话框包括打开 Open 文件对话框和保存文件 SaveAs 对话框 例8 7 编一个能打开文件和保存文件的程序 打开时要求能将文件的内容在文本框中显示 保存时能将文本框中的内容存到 doc或 txt类型的文件 具有清空文本框的功能 来实现文件的打开 具体代码如下 PrivateSubCommand1 Click CommonDialog1 FileName CommonDialog1 InitDir d CommonDialog1 Flags cdlOFNFileMustExistCommonDialog1 Filter AllFiles doc doc txt txt CommonDialog1 FilterIndex 4CommonDialog1 DialogTitle 打开文件 CommonDialog1 Action 1IfCommonDialog1 FileName ThenMsgBox 您没选择文件 37 错误 ElseOpenCommonDialog1 FileNameForInputAs 1DoWhileNotEOF 1 Input 1 a Text1 Text Text1 Text Chr 13 Chr 10 a LoopEndIfClose 1EndSub上述粗体代码实现了打开操作 三 颜色对话框颜色对话框用来设置颜色 通过使用通用对话框控件的ShowColor方法或将其action属性值设为3时可显示颜色对话框 例8 8 基于例8 7 增加一个设置文本框文本颜色的按钮 通过使用该按钮能够对文本框中文本改变颜色 PrivateSubCommand4 Click CommonDialog1 ShowColorText1 ForeColor CommonDialog1 ColorEndSub 四 字体对话框字体对话框是Windows界面中很重要的组成 它可以用来给文字指定字体 大小 颜色 下划线等 例8 9 在例8 8的基础上 增加一个 字体 按钮 通过使用该按钮能够对文本框的文本进行字体 字号 字型等的设置 字体按钮的单击事件过程 具体代码如下 PrivateSubCommand5 Click CommonDialog1 Flags 3Or256CommonDialog1 Action 4Text1 FontName CommonDialog1 FontNameText1 FontSize CommonDialog1 FontSizeText1 FontBold CommonDialog1 FontBoldText1 FontItalic CommonDialog1 FontItalicText1 FontUnderline CommonDialog1 FontUnderlineText1 FontStrikethru CommonDialog1 FontStrikethruEndSub 五 打印对话框六 帮助对话框 程序一般是包含多个窗体的 那么那些窗体是如何管理 如何互相关联的呢 第五节多重窗体设计 一般软件都是包含多个窗体 如资料管理系统 见图 一 多窗体的建立 一 添加窗体添加窗体可以添加一个新的窗体 也可以添加一个已存在的窗体 工程 菜单并执行 添加窗体 命令或工具栏上的 添加窗体 按钮 二 窗体的保存窗体的保存可执行 文件 的 保存 命令来完成 三 移除窗体移除窗体是指将该窗体从工程中移除 解除该窗体和工程之间的关系 但并不是删除该窗体文件 该文件仍然存在于原来的位置 执行 工程 菜单中的 移除窗体 命令 四 设置启动在拥有多个窗体的程序中 要有一个用于启动的开始窗体 系统默认原窗体名称为Form1的窗体为开始窗体 如果要指定其他窗体为开始窗体 应选择 工程 菜单中的 属性 命令 在打开的对话框中通过修改 通用 选项卡的 启动对象 来实现 二 窗体间的交互 一 常用语句1 Load语句该语句把一个窗体装入内存 执行load语句后 可以引用窗体中的控件及各种属性 同时产生一个LOAD事件 但此时窗体没有显现出来 格式 load窗体名称其中 窗体名称 是窗体的Name属性 如 loadform12 Unload语句该语句与load语句的功能相反 它从内存中删除指定的窗体 格式 Unload窗体名称如 unloadform1 二 常用方法1 show方法该方法用来显示一个窗体 同时兼有装入功能 在执行show时 不仅会把窗体装入内存 同时会显示出来 格式 窗体名称 Show 模式 2 hide方法 其功能是隐藏运行的窗体 但并不是关闭了该窗体 格式 窗体名称 Hide 三 窗体间数据共享上述语句和方法可实现窗体间的调用 窗体间数据共享主要是通过以下方法实现 1 存取控件的属性 可以通过以下格式来获得别的窗体中某控件的属性值 格式 另一窗体名 控件名 属性PrivateSubForm Click Form1 caption form2 label1 captionEndSub表示在form1的标题上显示form2窗体上的label1的标题内容 2 存取变量的值格式 另一窗体名 全局变量名 例8 12 编写一个能根据用户输入的出生年份 回答用户的生肖的程序 1 新建工程并在工程中添加如图所示的14个窗体 2 封面窗体 form13 的设计3 输入出生年 窗体 form14 的设计4 生肖显示窗体 form1 form12 的设计 多重窗体包含多个窗体 他们之间是相对独立的关系 多文档界面 多文档界面由父窗体和子窗体组成 是一种允许在单个容器窗体中包含多个窗体的应用程序 第六节多文档界面设计 一 多文档界面概述 二 多文档界面的工作特点 1 MDI子窗体只能在MDI父窗体的工作区中打开 最小化后将以图标形式出现在父窗体中 而不会出现在Windows的任务栏中 当最小化父窗体时 所有的子窗体也被最小化 只有父窗口的图标出现在任务栏中 2 在运行时 当一个MDI子窗体被最大化时 其标题将与父MDI窗体的相结合 结合后的形式为 MDI窗体标题 MDI子窗体标题 3 应用程序运行时 每个子窗体的菜单都显示在MDI窗体上 而不是在子窗体本身 当某个MDI子窗体有焦点时 若该窗体有菜单 则该子窗体的菜单将代替父窗体的菜单栏上的菜单 如果没有可见的子窗体 或者如果带有焦点的窗体没有菜单 则MDI窗体将显示自己的菜单 4 如果MDI子窗体在其父窗体装入之前被引用 则父MDI窗体将被自动装入 然而 如果父窗体在MDI子窗体装入之前被引用 则子窗体并不被装入 5 MDI子窗体都有可调整大小的边框 控制菜单框及最大化和最小化按钮 6 对MDIForm对象的任何引用将导致该窗体的被装入并成为可见的 例8 13 编写一个能浏览图片的程序 二 常用的属性1 MdiChild属性在MDI应用程序中 如果一个普通窗体的MDIChild属性的值为True 那么该窗体就是MDI窗体的一个子窗体 2 AutoShowChildren属性MDI窗体的AutoShowChildren属性 决定是否自动显示子窗体 如果它被设置为True 则当改变子窗体的属性后 会自动显示该子窗体 如果AutoShowChildren设置为False 则改变子窗体的属性值后 必须用Show方法把该子窗体显示出来 3 BorderStyle属性子窗体的BorderStyle属性 如果MDI窗体具有大小可变的边框 即BorderStyle 2 则其初始化大小与位置取决于MDI窗体的大小 而不是设计时子窗体的大小 当MDI子窗体的边框大小不可变 即BorderStyle 0 1或3 时 则它的大小由设计时的Height和Width属性决定 4 Windowstate属性当Windowstate属性值为 vbNormal或0 缺省值 时 表示窗体正常显示 当其值为VbMinimized或1时 表示窗体为最小化 即最小化为一个图标 当其值为VbMaximized或2时 表示窗体为最大化 即扩大到最大尺寸 在窗体被显示之前 WindowState属性常常被设置为0 即按窗体的Height Left ScaleHeight ScaleWidth Top和Width属性设置值来显示 三 常用方法Arrange方法 MDI应用程序中可以包含多个子窗体 当打开多个子窗体时 用MDIform的Arrange方法能够使子窗体或其图标按一定的规律排列 格式 MDI窗体名 Arrange 参数 参数 是一个整数 表示所使用的排列方式 第八节综合应用 例 编写一个能启动小小记事本 画图 计算器及其它程序的小软件 要求小小记事本能进行简单的输入 编辑和存盘操作 画图 计算器及其它应用程序可以从windows平台中调用 一 建立程序的主界面form3 1 界面设计 二 建立小小记事本程序的主界面MDIform1 1 添加通用对话框控件commondialog1 2 给窗体添加代码 DimstAsStringDimiAsIntegerPrivateSubcd Click MDIForm1 Arrange0EndSubPrivateSubczpp Click MDIForm1 Arrange2EndSubPrivateSubsppp Click MDIForm1 Arrange1EndSubPrivateSubexit Click EndEndSub PrivateSubMDIForm Load LoadForm2i 0EndSubPrivateSubclose Click Ifi0ThenUnloadMDIForm1 ActiveFormi i 1EndIfEndSubPrivateSubCopy Click st MDIForm1 ActiveForm txtNoteEdit SelText 将选中的内容存放到st变量中MDIForm1 copy Enabled False 进行复制后 剪切和复制按钮无效MDIForm1 cut Enabled FalseMDIForm1 paste Enabled True 粘贴按钮有效EndSub PrivateSubCut Click st MDIForm1 ActiveForm txtNoteEdit SelText 将选中的内容存放到st变量中MDIForm1 ActiveForm txtNoteEdit SelText 将选中的内容清除 实现了剪切MDIForm1 copy Enabled FalseMDIForm1 cut Enabled FalseMDIForm1 paste Enabled TrueEndSubPrivateSubnew Click i i 1DimmyformAsNewForm2myform Showmyform Caption 文档 iEndSub 三 建立样本窗体form2 代码如下 PrivateSubForm Load 设置剪切 复制 粘贴按钮无效MDIForm1 cut Enabled FalseMDIForm1 copy Enabled FalseMDIForm1 paste Enabled FalseEndSubPrivateSubtxtNoteEdit MouseMove Butt