《用户界面设计》ppt课件

《《用户界面设计》ppt课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

第五章用户界面设计 学习要求—要求读者通过对本章的学习，掌握设计友好用户界面的基本方法，能够实现带有菜单和工具条的程序界面。学习提示—常用的基本控件无法实现更加友好的用户界面，因此本章使用了微软所提供的高级控件组，读者必须掌握添加部件的方法。主要内容—本章主要介绍了菜单的设计方法、高级控件组所包含进度条控件、ImageList控件、TreeView控件、ListView控件、工具条控件在用户界面设计方面的应用。 .第一节菜单设计菜单是Windows应用软件很重要的用户界面元素，菜单提供应用软件大多数的命令，并且操作简单，弹指一挥间，软件就可发挥它的功能。若在自己开发的软件中加上菜单，使软件更具有专业化水准，VisualBasic作为一种优秀的快速软件开发工具，提供了用于制作菜单的“菜单编辑器”，使软件开发人员方便快捷地为自己的应用软件制作菜单，本节重点介绍下拉菜单、浮动菜单的使用。 在VisualBasic中，菜单编辑器是设计和管理菜单的图形化工具。使用菜单编辑器软件开发者可以在应用程序中增加、修改、重新排列、删除菜单，还可以设置访问键、选中标记、以及快捷键等功能。一.下拉菜单（一）菜单编辑器1.打开菜单编辑器的三种方式：利用“工具|菜单编辑器”菜单子项；单击工具栏上的菜单编辑器按钮；按快捷键Ctrl+E。通过以上三种方法中任意一种,就可以打开如图5-1所示的“菜单编辑器”对话框。 图5-1菜单编辑器 2．菜单编辑器的构成“菜单编辑器”对话框中显示建立菜单时所需的命令和选项。大多数菜单控件的属性可在“菜单编辑器”对话框中设置，所有菜单的属性在“属性窗口”中也都是可用的。下面，详细介绍“菜单编辑器”对话框中各个组成部分的意义。标题（P)：用户可在标题文本框中输入所要建立的菜单名，这些名字将出现在菜单栏或下拉式菜单之中。如果想在菜单中建立分隔符条，则应输入一个连字符（一），关于如何设置访问键的内容，将在本章后面小节中介绍。 名称（N)：用户可在名称文本框中输入各菜单的控件名。控件名是标识符，仅用于访问代码中的菜单项，用于程序设计中，它不会出现在菜单中，每一个菜单都必须具有一个控件名。索引（X)：可在索引文本框中指定一个数字值，用来建立菜单控件数组的索引号，以确定该菜单在菜单控件数组中的位置，该位置与菜单在屏幕中出现的位置无关。快捷键（S):快捷键选项为一个组合框，单击组合框的三角按钮，可打开列表，该列表中列出了供用户选择的快捷键。VisualBasic允许用户为每个菜单选择快捷键，如Ctrl+A等。 帮助上下文ID（H）：帮助上下文ID选项为一个文本框，用户可以在此文本框中为帮助上下文ID输入一个唯一数值。在HelpFile属性指定文件中，用该数值查找适当的帮助主题。协调位置（O）：协调位置选项为一个组合框，单击组合框的三角按钮，可打开列表。该属性确定了菜单是否出现或怎样出现在窗体的菜单栏中。复选（C):复选选项为一个复选框，用来设置是否在菜单项的左边出现复选标记“√”。选中该复选框，则在菜单选项的左边出现“√”符号。要恢复正常，只需清除该复选框即可。通常用该标记来指示菜单选项的开关状态。 有效（E)：有效选项为一个复选框，用来设置菜单选项是否为所设置的事件做出响应。如果选中该复选框，则用户不能访问该菜单选项，该菜单选项呈灰度显示；如希望恢复正常，只需清除该复选框即可。可见（Y）：可见选项为一个复选框，用来设置菜单选项是否显示在菜单栏中。选中该复选框，则该菜单不可见；如希望恢复正常，只需清除该复选框即可。利用该属性可制作弹出菜单，使菜单根据用户的需要出现在窗体中。 显示窗口列表（W）：显示窗口列表为一个复选框，该选项确定在MDI应用程序中，菜单控件是否包含一个打开的MDI子窗体列表。：单击该按钮，可将选定的菜单向上移动一个等级。一共可以创建4个子菜单等级。：单击该按钮，可将选定的菜单项在同一级菜单内向上移动一个位置。：单击该按钮，可将选定的菜单向下移动一个等级。一共可以创建4个子菜单等级。：单击该按钮，可将选定的菜单项在同一级菜单内向下移动一个位置。 菜单列表框：菜单列表框显示窗体中所设计的所有菜单名和菜单选项，用缩进方式指示各菜单的等级和位置。用户在设计菜单时，编辑好的菜单将会立刻显示在列表框中。按钮：单击该按钮，可将从选定的菜单选项所在的当前行移动到下一行。在选定的菜单按钮：单击该按钮，可选项所在行的上一行插入一个菜单选项。按钮：单击该按钮，可删除当前选定的菜单选项。 3.设计菜单下面通过一个实例介绍设计菜单的过程。设计一个菜单系统如图5.2、图5.3所示，菜单的属性，如表5-1所示。 表5-1设计菜单的属性主菜单标题子菜单标题菜单名称访问键快捷键文件mnufileAlt+F新建mnunewAlt+NCtrl+N打开mnuopenAlt+OCtrl+O关闭mnucloseAlt+CCtrl+C保存mnusaveAlt+SCtrl+S退出mnuexitAlt+XCtrl+X编辑mnueditAlt+E剪贴mnucutAlt+ICtrl+T复制mnucopyAlt+YCtrl+Y粘贴mnupasteAlt+PCtrl+P 图5-2设计的菜单图5-3菜单编辑器的菜单 下面介绍这个菜单系统的制作过程。(1)选中需要菜单的窗体，这里选中Form1窗体。(2)单击“工具”|“菜单编辑器”，打开菜单编辑器窗体。在“标题”文本框内，键入主菜单标题“文件”，在“名称”文本框内键入mnufile，这个名称将被用在代码中，用来引用这个菜单。如图5-4所示：(3)单击“下一个”按钮，在标题和名称文本框内分别键入“新建”，“mnunew”,单击按钮，将“新建”菜单移动一个等级，在“菜单列表框”中的“新建”左边出现四个点，如图5-5： 图5-4输入文件标题、名称mnufile窗口图5-5输入新建标题、名称mnunew窗口 (4)重复（4）步，创建子菜单“打开”，“关闭”，“保存”，“退出”。完成后，单击“确定”按钮。第一个主菜单“文件”完成以后如图5-6。(5)下面创建第二个主菜单“编辑”，重复（3）（4）（5）步，即可。创建后的菜单如图5-7所示。 图5-6文件菜单图5-7编辑菜单 4.分隔符分隔符表现为菜单之间的水平线，使用这些水平线，将各个菜单按照功能划分为一些逻辑组。同时使得界面美观，查找方便。下面给上例中的菜单增加分隔符。(1)打开“菜单编辑器”，在“菜单列表框”选中“打开”菜单；(2)单击“插入”按钮，在“标题”，写入“-”，在“名称”文本框中写入自己命名的标识符mnufenge1；(3)重复以上的方法，在“关闭”与“保存”之间添加分隔符；(4)单击“确定”按钮，完成后具有分隔符的菜单如图5-8。 5.快捷键在操作时，直接使用快捷键能提高选取菜单的速度，按下快捷键时，就会立刻运行相应的菜单命令。在“菜单编辑器“中很容易定义快捷键。比如为“新建”菜单定义快捷键，在“菜单编辑器”中，单击“快捷键”字符串右侧的下拉箭头，下拉列表框中显示了可以使用的快捷键组合，我们选取Ctrl＋N作为“新建”菜单的快捷键。如果要删除已经定义的快捷键，选取“None”即可。如图5-9： 图5-8添加分隔符后的菜单图5-9添加快捷键 6.访问键设置访问键，使用户可以通过同时按下“Alt”键和相应的字母键打开菜单，在VisualBasic中定义访问键在“菜单编辑器”中完成，在“标题”栏中，只需要把字符“&”放置在作为访问键字母的前面就可以了。菜单中不显示字符“&”,只是将作为访问键的字母下添加下划线。下面为“文件”及其子菜单定义访问键。打开“菜单编辑器”，选中要设置访问键的菜单，比如“文件”，在“标题”文本框中加入字符串“（&F）”，这样就把“F”作为“文件”菜单的访问键。重复上面的方法，根据上例中列表的要求，完成对各个菜单访问键的设置。如图5-10。 图5-10添加访问键图5-11设计后的完整菜单7.设计完整的菜单如图5-11 8.编写菜单的代码程序设计时，当用户单击一个菜单时，VisualBasic自动打开“代码编辑窗口”，自动生成菜单的Click事件过程，不过这个事件代码是空的。如图5-12所示： 图5-12编写程序代码 为了实现各个菜单的功能，需要为每一个菜单编写Click事件代码。VisualBasic中，除分隔符以外的所有菜单，都能识别Click事件。为菜单事件编写代码与普通控件编写代码的方法完全相同。 例如：“文件“|”退出“菜单的Click事件的代码如下所示，PrivateSubmnuexit_Click()EndEndSub特别注意，当用户单击主菜单时，VisualBasic自动地打开其子菜单，没有必要为它编写代码，除非有一些特别地要求，比如在每次显示子菜单时，使得其中的有些菜单无效或不可见。 二.浮动菜单我们使用Windows应用软件时，当单击鼠标右键时，会在鼠标单击处出现一个弹出式菜单，弹出式菜单是独立于菜单栏而显示在窗体上的浮动菜单，经常被用来快速地在屏幕上显示使用频率较高的菜单命令，以加快和方便操作。 1.popupMenu方法VisualBasic中，显示弹出式菜单使用popupMenu方法。其语法格式如下示：对象.popupMenu菜单名，flags,x,y,boldcommand，其意义为：对象为一个对象表达式，若省略，则默认为带有焦点的对象。菜单名单击右键时要显示的浮动菜单名，指定的菜单至少含有一个选项菜单。flags通过设置这个参数，来指定弹出式菜单的位置和行为。x,y这两个参数用来设置显示弹出式菜单的x坐标和y坐标。若省略这两个参数，则使用鼠标的当前坐标。Boldcommand用黑体显示菜单中的菜单名。 浮动菜单实例将前面创建的“编辑”菜单制作成弹出式菜单，方法为：(1)打开“菜单编辑器”。(2)选中“编辑”菜单。(3)清除“可见”复选框中的“√”。如图5-13。(4)单击“确定”按钮，关闭“菜单编辑器”窗口。 图5-13设计浮动菜单 程序运行时，当单击右键后，显示浮动菜单mnuedit。在编写代码时，需要在窗体的Mouseup或MouseDown事件过程中添加程序代码，来检测单击右键，显示菜单。如下所示：PrivateSubForm_MouseUp(ButtonAsInteger,ShiftAsInteger,XAsSingle,YAsSingle)IfButton=2ThenPopupMenumnueditEndIfEndSub在MouseUp事件过程中，通过If语句，判断参数Button的值，若为2，则表明按下了鼠标右键，然后调用popupMenu方法，显示“编辑”菜单。如图5-14： 图5-14运行的浮动菜单 第二节高级控件组在VisualBasic6.0中，用户可以加载和使用VisualBasic6.0提供的以及第三方开发的许多扩展的高级控件。本节将重点介绍VisualBasic6.0的高级控件组。首先介绍添加高级控件的步骤。在VisualBasic6.0的工具箱中添加高级控件的方法是：建立“标准EXE”工程后，利用增添“部件”的方法将ADO控件添加到工具箱中，具体操作方法是从如图5-15所示的“工程”子菜单中选择“部件（O）…”选项，弹出如图5-16所示的“部件”对话框，在“控件”标签页选中“Microsoft Windows Common Controls6.0”选项，单击“应用”按钮后，高级控件被添加到工具箱中。 图5-15“工程”子菜单 图5-16“部件”对话框 下面本章主要介绍各控件的属性以及使用方法。一、进度条控件（ProgressBar）进度条控件（ProgressBar）用来指示事务处理的进程。该控件通过在水平条中显示适当数目的矩形来指示进程的进度。进程完成时，进度栏被填满。进度栏通常用于帮助用户了解等待一项长时间的进程（例如，加载大文件）完成所需的时间。ProgressBar控件的主要属性如表5-2所示。 表5-2ProgressBar控件的属性属性功能Max获取或设置进度条取值的最大值Min获取或设置进度条取值的最小值Value获取或设置进度条的当前位置Orientation0－ccOrientationHorizontal进度条以水平放置1－ccOrientationVertical垂直放置Scrolling0－ccScrollingStandard填充方式为虚线填充1－ccScrollingSmooth实线填充Value获取或设置进度栏的当前位置Visible决定进度条是否可见 ProgressBar控件的常用事件是Click、MouseDown、MouseMove。例题5-1设计一个电子时钟程序，使用了进度条控件，分别显示小时、分钟和秒的进度。操作步骤如下：1.首先运行VB，然后新建一个工程（工程类型为标准EXE），按照表5-3所示设置该窗体及其控件的属性。 表5-3窗体及其控件属性表控件属性属性值Form1Caption电子时钟Label1Caption置空Label2Caption置空Frame1Caption北京时间ProgressBar1Orientation1－ccOrientationVerticalMax30ProgressBar2Orientation1－ccOrientationVerticalMax70ProgressBar3Orientation1－ccOrientationVerticalMax70Timer1Interval1000 2.按照表5-3所示设置各个控件的属性后，适当的调整各控件的大小和位置，完成后得到如图7-4所示主界面图。 图5-17电子时钟初始界面 编写代码如下：PrivateSubForm_Load()Label1.Caption=""Label2.Caption=Format(Date,"yyyy年mm月dd日")'格式化当前的时间，作为窗体的标题EndSubPrivateSubTimer1_Timer()Dimxs,fz,maAsLongxs=Hour(Time)'取得小时数fz=Minute(Time)'取得分钟数ma=Second(Time)'取得秒数ProgressBar1.Value=xs'设置ProgressBars的值ProgressBar2.Value=fzProgressBar3.Value=maLabel1.Caption=xs&"时"&fz&"分"&ma&"秒"'显示时间EndSub 运行程序，如图5-4是播放后界面。图5-18电子时钟运行界面 二.图像列表控件（ImageList）图像列表控件（ImageList）用于保存图像，并将其存储的图像提供给其它控件使用。如TreeView、ListView和Toolbar控件等。ImageList控件的主要属性如表5-4所示。 表5-4ImageList控件的属性属性功能ImageHeight定义该控件中图像的高度ImageWidth定义控件中图像的宽度Index控件数组下标ListImages返回该控件中由Index指定的图像ImageList控件没有常用事件与之联系，它在运行期间是不可见的。 三.TreeView控件TreeView控件用于显示分级的数据，例如组织树，磁盘上的文件和目录。一个TreeView控件的信息都与Node对象的等级体系结构向关联，每个Node对象包含了一个标签和可选的点位图。TreeView控件通常用于显示文档头、索引中的条目、磁盘上的文件和目录或者可以显示为等级结构的各种其他信息。TreeView控件的主要属性如表5-5所示。 表5-5TreeView控件的属性属性功能ImageList获取或设置与本控件相联系的ImageList控件Indentation设置各个新的Node子节点缩进量LabelEdit0－tvwAutomatic自动修改各节点上的文本1－tvwManual手工修改各节点上的文本LineStyle0－tvwTreeLines1－tvwRootLinesNodes控件中的节点集合引用Style指明控件中Node对象显示的类型。可以选择是否显示图像,线条,加号/减号等。它共有8个属性值，一般选用7－tvwTreelinesPlusMinusPictureText，即显示子线条、加／减图像和文本 TreeView控件的常用事件是AfterLabelEdit、，BeforeLabelEdit、Collapse、Click、DblClick、NodeClick、MouseDown、MouseMove事件。例题5-2设计一个数形结构，显示学院各系分支。操作步骤如下：首先运行VB，然后新建一个工程（工程类型为标准EXE），从工具箱中引入TreeView控件。编写代码如下： PrivateSubForm_Load()DimabcAsNodeSetabc=TreeView1.Nodes.Add(,,"gfn","GFXY学院南校区")Setabc=TreeView1.Nodes.Add("gfn",tvwChild,"dz","电子工程系")Setabc=TreeView1.Nodes.Add("dz",tvwChild,"软件技术")Setabc=TreeView1.Nodes.Add("dz",tvwChild,"计算机网络技术")Setabc=TreeView1.Nodes.Add("dz",tvwChild,"应用电子技术")Setabc=TreeView1.Nodes.Add("dz",tvwChild,"电气自动化技术")Setabc=TreeView1.Nodes.Add("dz",tvwChild,"机电一体化技术")Setabc=TreeView1.Nodes.Add("gfn",tvwChild,"jx","机械工程系")Setabc=TreeView1.Nodes.Add("jx",tvwChild,"数控技术")Setabc=TreeView1.Nodes.Add("jx",tvwChild,"模具设计与制造")Setabc=TreeView1.Nodes.Add("jx",tvwChild,"计算机制造与自动化")Setabc=TreeView1.Nodes.Add("jx",tvwChild,"汽车检测与维修技术") Setabc=TreeView1.Nodes.Add(,,"gfb","GFXY学院北校区")Setabc=TreeView1.Nodes.Add("gfb",tvwChild,"jg","经济管理系")Setabc=TreeView1.Nodes.Add("jg",tvwChild,"电子商务")Setabc=TreeView1.Nodes.Add("jg",tvwChild,"会计电算化")Setabc=TreeView1.Nodes.Add("jg",tvwChild,"市场营销")Setabc=TreeView1.Nodes.Add("gfb",tvwChild,"rh","热化工程系")Setabc=TreeView1.Nodes.Add("rh",tvwChild,"精细化学品生产技术")Setabc=TreeView1.Nodes.Add("rh",tvwChild,"应用化学技术")Setabc=TreeView1.Nodes.Add("rh",tvwChild,"石油化工生产技术")abc.EnsureVisibleEndSub 图5-19程序运行结果图5-20程序展开运行结果 四、ListView控件ListView控件可有4种不同的视图显示方法，跟“资源管理器”里的“查看”方式相似，分为无图标、小图标、列表、报表式视图显示方法。使用哪种视图，可由该控件的view属性设置控制。其中“报表”视图用来显示记录数据很适合。ListView控件的主要属性如表5-6所示。 表5-6ListView控件的属性属性功能AllowColumnReorder属性值设置时，用户可以用鼠标选中1列拖至其他地方进行重新排列Checkboxes属性值设置为True时，每一行数据前将显示一复选框LabelWrap属性值设置为True时，文本标签超出列宽时可换行MultiSelect属性值设置为True时，允许用户在本控件中作多重选择SelectedItem返回对所选ListItem对象（行）的引用Sorted属性值设置为True时，列表按字母排序View0－IvwReport无图标（默认）1－IvwIcon小图标视图显示2－IvwSmallIcon列表3－IvwList报表 ListView控件的常用事件是AfterLabelEdit、BeforeLabelEdit、Click、DblClick、ItemClick事件。其中AfterLabelEdit表示当编辑当前选择的列表对象之后完成的事件。其中BeforeLabelEdit表示当编辑当前选择的列表对象之前完成的事件。 例题5-3设计一个类似于Windows操作系统下“我的电脑”的窗口。操作步骤如下：1.首先运行VB，然后新建一个工程（工程类型为标准EXE），在窗体中添加1个ImageList控件，1个ListView控件，2个Option控件。按下面步骤设置各控件的属性：（1）设置Form1的Caption的属性为“我的电脑”。（2）设置Option1控件的Caption的属性为“排列图标”，Option2控件的Caption的属性为“打乱图标”。（3）设置ListView控件的属性，在该控件上单击鼠标右键，弹出“属性页”对话框。选择如图5-21所示“图像列表”选项卡中的“普通”列表框，设置为ImageList1，其它值默认。（4）设置ImageList控件的属性，在该控件上单击鼠标右键，弹出“属性页”对话框。选择如图5-22所示“图像”选项卡中的“插入图片”按钮，插入6个图标按钮。 图5-21“图像列表”选项卡图5-22所示“图像”选项卡 2.编写代码如下：PrivateSubForm_Load()DimabcAsListItem‘初始化ListViewSetabc=ListView1.ListItems.Add(,"yd","移动硬盘",1)Setabc=ListView1.ListItems.Add(,"dy","打印机",2)Setabc=ListView1.ListItems.Add(,"hs","回收站",3)Setabc=ListView1.ListItems.Add(,"ie","InternetExplorer",4)Setabc=ListView1.ListItems.Add(,"gq","光驱",5)Setabc=ListView1.ListItems.Add(,"wl","网上邻居",6)EndSub PrivateSubListView1_BeforeLabelEdit(CancelAsInteger)Cancel=True‘使用户不能编辑列表项中的文本EndSubPrivateSubOption1_Click()ListView1.Arrange=lvwAutoTop‘列表项按向上的方式排列EndSubPrivateSubOption2_Click()ListView1.Arrange=lvwNone‘列表项不排列EndSub 3.程序运行结果如图5-23所示。5-23程序运行结果图 五、工具条控件（Toolbar）工具条控件（Toolbar）用来在窗体上产生具有按钮对象的工具栏，按钮上可显示文字、图像或者两者兼有。Toolbar控件的主要属性如表5-7所示。 表5-7Toolbar控件的属性属性功能Align设置控件的位置，有5个值，分别设置该控件放置在窗体的上部、下部、左部或者右部Button使用本控件的Button对象集合ImageList获取或设置与本控件相联系的ImageList控件Index设置控件数组的标识号TooTipText设置当鼠标指针在工具栏按钮上暂停时的提示文本ShowTips设置是否显示工具栏按钮上的提示文本 Toolbar控件的常用事件是Click、ButtonClick。其中ButtonClick事件表示当单击本控件上的一个按钮时，该事件过程被执行。例题5-4在窗体上设计一个工具条，实现相应的功能。操作步骤如下： 1.首先运行VB，然后新建一个工程（工程类型为标准EXE），在窗体中添加1个ImageList控件，1个Toolbar控件，1个Label控件，1个Text控件。按下面步骤设置各控件的属性：（1）设置Label1的Caption的属性为“置空”。（2）设置Text1的Caption的属性为“置空”。（3）设置ImageList控件的属性，插入4个图标按钮。4个图标按钮的“关键字”分别设置为“wb”、“sj”、“rq”和“tc”。提醒：图像列表控件（ImageList）的具体使用方法请见本章例题5-3。（4）设置Toolbar控件的属性，在该控件上单击鼠标右键，弹出“属性页”对话框。选择如图5-24所示“通用”选项卡中的“图像列表”列表框，设置为ImageList1。 （5）选择如图5-25所示“按钮”选项卡，首先单击“插入按钮”后，“索引”文本框中出现数字1，其他输入框也变为可用。接着在“关键字”文本框中输入“wb”，“工具提示文本框”文本框中输入“显示文本”，“图像”文本框中输入1，即ImageList1控件的第一个图形作为按钮1的图形。重复上述步骤，添加4个按钮到工具栏上，并设置相应的属性。（6）各控件的属性设置完成后，第一个按钮显示“显示文本”，第二个按钮显示“系统时间”，第三个按钮显示“系统日期”，第四个按钮显示“退出”。 图5-24“通用”选项卡图5-25“按钮”选项卡 2.编写代码如下：PrivateSubToolbar1_ButtonClick(ByValButtonAsMSComctlLib.Button)SelectCaseButton.KeyCase"wb"Label1.Caption="提示信息："Text1.Text="VisualBasic6.0欢迎您！"Case"sj"Label1.Caption="系统时间："Text1.Text=TimeCase"rq"Label1.Caption="系统日期："Text1.Text=DateCase"tc"Label1.Visible=FalseText1.Visible=Falseabc=MsgBox("退出系统吗？",vbYesNo+48,"退出")Ifabc=vbYesThenEndEndIfEndSelectEndSub 3.程序运行结果如图5-26所示。图5-26程序运行结果 小结本章从较简单的菜单设计着手，逐步引入微软所提供的高级控件组，目的是让读者能够通过对本章的学习，设计较为友好的用户界面。本章对TreeView控件和ListView控件进行了重点介绍，因为这两个控件能够支持理想的图形化界面设计，尤其是TreeView，该控件和XML的结构非常匹配。相信读者熟练掌握本章的高级控件组后，能够设计出赏心悦目的软件界面，增强软件的生命力。