1 / 67

界 面 设 计

界 面 设 计. 第 10 章. 本章要点: 菜单的设计 工具栏的设计 状态栏的设计 对话框的设计. 10.1 菜单的设计. Windows 环境下几乎所有的应用软件都通过菜单实现各种操作。菜单将应用程序的各种操作分组显示在界面上，用户可以方便地从菜单中选择执行各种功能。. 两种基本菜单类型: 下拉式菜单 弹出式菜单. 子 菜单. 主菜单标题. 主菜单栏. 子 菜单. 菜单命令. 分隔条. 1. 下拉式菜单的结构. 10.1.1 下拉式菜单. 访问键. 快捷键. 顶级菜单. 2. 菜单编辑器

gloriann-stevens
Download Presentation

界 面 设 计

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 界 面 设 计 第10章 本章要点: • 菜单的设计 • 工具栏的设计 • 状态栏的设计 • 对话框的设计

  2. 10.1 菜单的设计 • Windows环境下几乎所有的应用软件都通过菜单实现各种操作。菜单将应用程序的各种操作分组显示在界面上，用户可以方便地从菜单中选择执行各种功能。 • 两种基本菜单类型: • 下拉式菜单 • 弹出式菜单

  3. 子 菜单 主菜单标题 主菜单栏 子 菜单 菜单命令 分隔条 1. 下拉式菜单的结构 10.1.1 下拉式菜单 访问键 快捷键 顶级菜单

  4. 2. 菜单编辑器 • 菜单项: 看成控件，具有其属性、事件、方法。 • 菜单项也称为菜单控件。 • 菜单设计: 通过“菜单编辑器”完成。 • 首先使窗体成为当前窗体 • 使用以下方法打开菜单编辑器: • 执行“工具”菜单下的“菜单编辑器”命令 • 单击标准工具栏的“菜单编辑器”按钮 • 从窗体快捷菜单中选择“菜单编辑器”命令 • 菜单编辑器结构: 属性区、编辑区、菜单列表区

  5. Caption Name 属性区 Index Shortcut 编辑区 菜单列表区 Checked Enabled Visible WindowList(MDI) HelpContextID NegotiatePosition 注: 标题框中键入“-”和“&”符号的作用。 不能给顶级菜单项加快捷键。

  6. Text1 • 【例10-1】设计菜单界面，如下图所示。下拉菜单中的子菜单项用于对文本框Text1设置字体、字号、文字颜色和文字效果。其中，效果子菜单下的各菜单项具有复选功能，设运行初始时各项前面没有√符号，与文本框的初始状态一致。 各子菜单结构见P194

  7. 菜单编辑器设置如下表:

  8. (续表) • 标 题 • 名称 • 索引 • 快捷键 • 说 明 • 颜色(&C) • CC • 访问键Alt+C • ....红色 • CC1 • ....绿色 • CC2 • ....蓝色 • CC3 • 访问键Alt+E • 效果(&E) • DD • ....删除线 • DD1 • ....下划线 • DD2 • ....粗体 • DD3 • ....斜体 • DD4

  9. 1) “字体”菜单下的菜单项设计成一个控件数组AA1，共享以下事件过程: • Private Sub AA1_Click(Index As Integer) • Text1.Font = AA1(Index).Caption • End Sub • 2) “字号”菜单下的菜单项设计成一个控件数组BB1，共享以下事件过程: • Private Sub BB1_Click(Index As Integer) • Text1.FontSize = Val(BB1(Index).Caption) • End Sub

  10. 3) “颜色”菜单下的各菜单项为独立的菜单控件，因此应分别在其单击事件过程中编写代码，各事件过程如下: • Private Sub CC1_Click() • Text1.ForeColor = vbRed • End Sub • Private Sub CC2_Click() • Text1.ForeColor = vbGreen • End Sub • Private Sub CC3_Click() • Text1.ForeColor = vbBlue • End Sub

  11. 4) “效果”菜单下的各菜单项具有复选功能，每次单击时应切换成另一种状态，因此要判断当前菜单项的Checked属性，各事件过程如下: • Private Sub DD1_Click() • If DD1.Checked = True Then • Text1.FontStrikethru = False • DD1.Checked = False • Else • Text1.FontStrikethru = True • DD1.Checked = True • End If • End Sub

  12. Private Sub DD2_Click() • If DD2.Checked = True Then • Text1.FontUnderline = False • DD2.Checked = False • Else • Text1.FontUnderline = True • DD2.Checked = True • End If • End Sub

  13. Private Sub DD3_Click() • If DD3.Checked = True Then • Text1.FontBold = False • DD3.Checked = False • Else • Text1.FontBold = True • DD3.Checked = True • End If • End Sub

  14. Private Sub DD4_Click() • If DD4.Checked = True Then • Text1.FontItalic = False • DD4.Checked = False • Else • Text1.FontItalic = True • DD4.Checked = True • End If • End Sub

  15. 【例10-2】在窗体上设计菜单，菜单标题为“图像”，图像菜单下包括以下4个菜单项：【例10-2】在窗体上设计菜单，菜单标题为“图像”，图像菜单下包括以下4个菜单项： • 1) 载入：名称为LoadPic，用于向图片框中装入一幅图像，初始的Enabled属性为True。 • 2) 清除：名称为ClearPic，用于清除图片框中的图像，初始的Enabled属性为False。 • 3) 显示：名称为ShowPic，用于显示图片框中的图像，初始的Enabled属性为False。 • 4) 隐藏：名称为HidePic，用于隐藏图片框中的图像，初始的Enabled属性为False。

  16. a) c) b) • 运行时，界面的初始状态如图a，单击“载入”命令可以在打开的输入框中输入要载入的图像文件名，确定后将指定的图像显示在图片框Picture1中，这时的“图像”菜单变成图b的状态。这时如果选择“清除”命令，则清除图片框中的图片，菜单变成图a所示；如果选择“隐藏”命令，则隐藏图片框，菜单变成图c所示，而单击“显示”命令菜单又回到图b的状态。

  17. 各菜单项的Click事件过程如下： • Private Sub ClearPic_Click() ' 清除 • Picture1.Picture = LoadPicture() • ClearPic.Enabled = False • LoadPic.Enabled = True • HidePic.Enabled = False • ShowPic.Enabled = False • End Sub

  18. Private Sub Loadpic_Click() ' 载入 • PicName = InputBox("请输入图像文件名") • On Error GoTo ErrHandler • Picture1.Picture = LoadPicture(PicName) • ClearPic.Enabled = True • LoadPic.Enabled = False • HidePic.Enabled = True • ShowPic.Enabled = False • Exit Sub ' 正常执行则到这里结束 • ErrHandler: ' 错误处理程序入口 • MsgBox "图像加载错误" • End Sub

  19. Private Sub HidePic_Click() ' 隐藏 • Picture1.Visible = False • ClearPic.Enabled = False • LoadPic.Enabled = False • HidePic.Enabled = False • ShowPic.Enabled = True • End Sub • Private Sub ShowPic_Click() ' 显示 • Picture1.Visible = True • ClearPic.Enabled = True • LoadPic.Enabled = False • HidePic.Enabled = True • ShowPic.Enabled = False • End Sub

  20. 将本例对Enabled属性的设置改成对Visible属性的设置可以修改成将无效的菜单项隐藏起来，只显示可用的菜单项。将本例对Enabled属性的设置改成对Visible属性的设置可以修改成将无效的菜单项隐藏起来，只显示可用的菜单项。 • 用前面的方法建立的菜单，菜单项是固定的，菜单项不能自动增减。尽管可以通过设置菜单项的Visible属性使某些菜单项暂时隐藏起来，在必要的时候再将其显示出来，但也必须首先在菜单编辑器中设计所有的菜单项。在某些情况下，菜单项的个数在设计时是不可预测的，只能在程序运行时动态增减，用前面的方法就难以实现。

  21. 要实现菜单项的动态增减，可以通过菜单数组来实现。通常，首先设计一个菜单项，定义该菜单项为菜单数组的第一项，即在菜单编辑器中，设置其“索引”属性值为0，“可见”属性为False（不可见）。在需要增加菜单项时，使用Load方法向该菜单数组增加新的菜单项，并对新增的菜单项设置标题（Caption）和可见（Visible）属性；在需要减少菜单项时，使用Unload方法从该菜单数组中删除一项。要实现菜单项的动态增减，可以通过菜单数组来实现。通常，首先设计一个菜单项，定义该菜单项为菜单数组的第一项，即在菜单编辑器中，设置其“索引”属性值为0，“可见”属性为False（不可见）。在需要增加菜单项时，使用Load方法向该菜单数组增加新的菜单项，并对新增的菜单项设置标题（Caption）和可见（Visible）属性；在需要减少菜单项时，使用Unload方法从该菜单数组中删除一项。

  22. 【例10-3】设计菜单，使得运行时初始界面如下图a所示。主菜单项“文件”下有两个固定的子菜单项“打开”和“关闭”及分隔线。要求：运行时单击“打开”菜单项在分隔线下面增加一个新的菜单项，单击“关闭”命令时删除分隔线下面一个指定的菜单项。单击新增的菜单项可以执行相应的应用程序。【例10-3】设计菜单，使得运行时初始界面如下图a所示。主菜单项“文件”下有两个固定的子菜单项“打开”和“关闭”及分隔线。要求：运行时单击“打开”菜单项在分隔线下面增加一个新的菜单项，单击“关闭”命令时删除分隔线下面一个指定的菜单项。单击新增的菜单项可以执行相应的应用程序。 a) b)

  23. 主要设计步骤： • 1）执行“工具”菜单中的“菜单编辑器”命令，打开菜单编辑器，按下表设计菜单。

  24. 2）在窗体模块中定义模块级变量MenuNum，用于保存当前SubMenu菜单数组的最大下标：2）在窗体模块中定义模块级变量MenuNum，用于保存当前SubMenu菜单数组的最大下标： • Dim MenuNum As Integer • 3）编写“打开”菜单项的Click事件过程如下： • Private Sub SubOpen_Click() • OpenFileName = InputBox("请输入文件名称") • If Trim(OpenFileName) <> "" Then • MenuNum = MenuNum + 1 • Load SubMenu(MenuNum) • SubMenu(MenuNum).Caption = OpenFileName • SubMenu(MenuNum).Visible = True • End If • End Sub

  25. 4）编写“关闭”菜单项的Click事件过程如下： • Private Sub SubClose_Click() • N = Val(InputBox("请指定关闭第几个文件")) • If N > MenuNum Or N < 1 Then • MsgBox "超出范围！" • Else • For I = N To MenuNum - 1 • SubMenu(I).Caption = SubMenu(I + 1).Caption • Next I • Unload SubMenu(MenuNum) • MenuNum = MenuNum - 1 • End If • End Sub

  26. 5）新增加的菜单项是一些应用程序的名字（包括路径）。要实现单击这些菜单项时能够执行相应的文件名指定的应用程序，需要在菜单数组的Click事件过程中应编写如下代码：5）新增加的菜单项是一些应用程序的名字（包括路径）。要实现单击这些菜单项时能够执行相应的文件名指定的应用程序，需要在菜单数组的Click事件过程中应编写如下代码： • Private Sub SubMenu_Click(Index As Integer) • Shell SubMenu(Index).Caption, vbNormalFocus • End Sub

  27. 10.1.2 弹出式菜单 • 弹出式菜单:上下文菜单、快捷菜单、右键菜单 • 为某对象设计弹出式菜单的步骤: • 1) 在菜单编辑器中设计各菜单项，然后将顶级菜单设置为不可见。 • 2) 在对象的MouseDown事件过程中编写代码，用以下的PopupMenu方法显示弹出式菜单: • [<窗体名>.]PopupMenu <菜单名> • ,flags[,x[,y[,boldcommand]]]] • 功能: 在当前鼠标位置或指定的坐标位置显示弹出式菜单。

  28. 参数: • <窗体名>：指菜单所在的位置，如果省略，则默认为是当前窗体。 • <菜单名>：指在菜单编辑器中设计的菜单项（至少有一个子菜单）的名称。 • Flags：可选项，可以是一个数值或常量，用于指定弹出式菜单的位置和行为，取值见P199表10-3和表10-4。如果要同时指定位置和行为时，则将两个参数值用Or连接，如： 4 Or 2 • x、y：指定显示弹出式菜单的x坐标和y坐标。省略时为鼠标坐标。 • boldcommand：指定弹出式菜单中要显示为黑体的菜单控件的名称。如果该省略参数，则弹出式菜单中没有以黑体字出现的菜单项。

  29. Text1 【例10-4】在例10-1的基础上设计窗体和文本框的弹出式菜单。如下图所示。 窗体的 弹出式菜单 文本框的 弹出式菜单

  30. 设计步骤： 1) 在菜单编辑器上增加以下设置：

  31. 2) 在文本框的MouseDown事件过程中编写代码 Private Sub Text1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single) If Button = 2 Then PopupMenu EE, 0 Or 0 End If End Sub 只接受左键单击 左上角位于坐标处 参数Button: 1 —按下鼠标的左按钮 2 —按下鼠标的右按钮 4 —按下鼠标的中间按钮

  32. 3) 在窗体的MouseDown事件过程中编写代码 • Private Sub Form_MouseDown(Button As Integer, • Shift As Integer, X As Single, Y As Single) • If Button = 2 Then • PopupMenu FF,8 Or 0, , ,FF3 • End If • End Sub 只接受左键单击 右上角位于坐标处 FF3菜单项显示为粗体 x,y省略，但要保留逗号

  33. 4) 在窗体模块的通用声明段声明变量Fcolor，用于保存窗体的初始颜色: Dim Fcolor As Long 5) 在窗体的Load事件过程中保存窗体的初始背景颜色： Private Sub Form_Load() Fcolor = Form1.BackColor End Sub

  34. 6) 编写实现菜单命令功能的代码 Private Sub EE1_Click() Text1.FontSize = Text1.FontSize + 1 End Sub Private Sub EE2_Click() Text1.FontSize = Text1.FontSize – 1 End Sub Private Sub EE3_Click() If EE3.Caption = "锁定" Then EE3.Caption = "取消锁定" Text1.Locked = True Else EE3.Caption = "锁定" Text1.Locked = False End If End Sub

  35. Private Sub FF1_Click() Form1.BackColor = vbRed End Sub Private Sub FF2_Click() Form1.BackColor = vbGreen End Sub Private Sub FF3_Click() Form1.BackColor = Fcolor End Sub

  36. 10.2 工具栏的设计 • 作用: 常用于提供对最常用的菜单命令的快速访问 • 设计: • 手工方式 • 使用工具栏控件

  37. 10.2.1 用手工方式制作工具栏 • 1) 在窗体上放置一个图片框，设置其Align属性为:1 - Align Top，调整图片框的高度。 • 2) 在图片框中放置控件。 • 3) 给控件装入一定的图片。 • 4) 设置控件的ToolTipText属性，添加适当的提示。 • 5) 为各工具栏控件编写代码。 • 如果工具栏控件的功能已经包括在某菜单项中，则可以直接调用菜单项的相应事件过程 。

  38. Check1~ Check4 • 【例10-5】在例10-4的基础上添加工具栏。如下图。 放置4个复选框控件，分别用于完成“效果”菜单 下的四个功能。 • 给复选框的ToolTipText属性分别设置功能提示: 删除线、下划线、粗体、斜体。

  39. 分别在复选框控件的Click事件过程中编写代码：分别在复选框控件的Click事件过程中编写代码： • Private Sub Check1_Click() • Text1.FontStrikethru = Check1.Value • End Sub • Private Sub Check2_Click() • Text1.FontUnderline = Check2.Value • End Sub • Private Sub Check3_Click() • Text1.FontBold = Check3.Value • End Sub • Private Sub Check4_Click() • Text1.FontItalic = Check4.Value • End Sub

  40. 10.2.2 使用ToolBar控件制作工具栏 • 设计步骤: • 1) 向工具箱添加ToolBar控件、 ImageList控件。 • 工程→部件→ 选择 “Microsoft Windows Common Controls 6.0” • 2) 向窗体上添加ToolBar控件、ImageList控件， • 常用ImageList控件提供工具栏所需的图片。 • 3) 设置ImageList控件的“属性页” ，定义图像集。 • 4) 设置ToolBar控件的“属性页”。定义按钮对象集。引用索引号为n的按钮: Buttons(n) • 例:设置Toolbar1中索引号为3的按钮的标题。 • Toolbar1.Buttons(3).Caption = "显示" • 5) 编写代码: 在ButtonClick事件过程或ButtonMenuClick事件过程中编写。

  41. ToolBar1 Shape1 ImageList1 Timer1 Interval:100 Enabled:False • 【例10-6】用Toolbar控件设计工具栏，界面如下图所示，运行时，当按下箭头按钮时，图形将沿着箭头指定的方向移动，当按下形状按钮组中的任何一个按钮时，图形将变成相应的形状。按“Stop”按钮停止移动。

  42. 设置ToolBar控件的属性页：

  43. 代码如下： Dim Direction As Integer ' Direction做为移动方向的标志 Private Sub Timer1_Timer() '根据箭头按钮决定移动方向 '设每次移动步长为50Twips,当移动到窗体边缘时不再移动 Select Case Direction Case 1 '如果选择向上移动 If Shape1.Top-50>Toolbar1.Height _ Then Shape1.Top= Shape1.Top - 50 Case 2 '如果选择向下移动 If Shape1.Top+Shape1.Height+50 <Form1.ScaleHeight _ Then Shape1.Top = Shape1.Top + 50 Case 3 '如果选择向左移动 If Shape1.Left-50>0 Then Shape1.Left=Shape1.Left - 50 Case 4 '如果选择向右移动 If Shape1.Left+Shape1.Width+50 < Form1.ScaleWidth _ Then Shape1.Left = Shape1.Left + 50 End Select End Sub

  44. Private Sub Toolbar1_ButtonClick _ (ByVal Button As MSComctlLib.Button) '根据按下的形状按钮分情况进行处理 Select Case Button.Index Case 1 Shape1.Shape = 3 '设图形形状为圆形 Case 2 Shape1.Shape = 2 '设图形形状为椭圆 Case 3 Shape1.Shape = 4 '设图形形状为圆角矩形 Case 4 Shape1.Shape = 0 '设图形形状为矩形

  45. Case 6 Direction = 1 ' Direction为1表示上移 Timer1.Enabled = True Case 7 Direction = 2 ' Direction为2表示下移 Timer1.Enabled = True Case 8 Direction = 3 ' Direction为3表示左移 Timer1.Enabled = True Case 9 Direction = 4 ' Direction为4表示右移 Timer1.Enabled = True Case 11 '单击“停止”按钮关闭定时器,停止移动 Timer1.Enabled = False End Select End Sub

  46. 10.3 对话框的设计 • 对话框: 特殊类型的窗体对象。 • 作用: 是用户和应用程序交互的主要途径。 • 建立方法: • 使用预定义对话框，即输入框、消息框。 • 定义对话框。 • 使用CommonDialog控件创建通用对话框。

  47. 10.3.1 自定义对话框 • 设计步骤 : • 1) 添加窗体: 工程添加窗体。 • 2) 将窗体定义成对话框风格。 • 如:不能移动、改变尺寸、最大或最小化 • 例: BorderStyle设置为1—单边框，不能改变大小 • ControlBox设置为False—删除控制菜单框 • MaxButton设置为False—删除最大化按钮 • MinButton设置为False—删除最小化按钮 • 3) 在对话框上添加按钮，如“确定”与“取消”按钮。 • 4) 在对话框上添加其它控件。 • 5) 在适当的位置编写显示对话框的代码。

  48. 两种显示方式: 模式对话框与无模式对话框 。 • 显示模式对话框 • 窗体名.Show vbModal 或 窗体名.Show 1 例如: Form2.Show vbModal • 显示无模式对话框 • 窗体名.Show vbModeless 或 • 窗体名.Show 0 或 窗体名.Show 例如: Form2.Show vbModeless • 为确保对话框可以随其父窗体的最小化而最小化，随其父窗体的关闭而关闭，需要在Show方法中定义父窗体。 例如: Private Sub Command1_Click() Form2.Show vbModeless, Form1 End Sub

  49. 6) 编写实现对话框功能的的代码，如“确定”按钮和“取消”按钮的单击事件过程。不同的对话框所完成的功能不同，因此应根据实际要求编写代码 7) 编写从对话框退出的代码 例如: Unload Form2 或: Form2.Hide Unload语句把对话框从内存中删除，该对话框本身以及它的控件都从内存中卸载。而Hide方法只是通过设置对话框的Visible属性为False将其从视窗中删除。该对话框以及它的控件仍留在内存中。

  50. Text1 Command1 Option1 Option2 Option3 Command2 • 【例10-7】设计应用程序，包含一个主菜单界面和一个对话框，在主菜单界面单击某“运行”菜单项，将打开一个模式对话框，在对话框中指定要运行的文件名及其运行方式（正常、最大化、最小化），单击“确定”按钮按指定的方式运行指定的文件，如果输入文件名错误，将给出警告并返回该对话框；单击“取消”按钮返回主菜单界面。 a) b)

More Related