《用户界面设计》PPT课件

华 侨 大 学 第 9章 用 户 界 面 设 计 华 侨 大 学 第 9章 用 户 界 面 设 计9.1 菜 单 栏 与 工 具 栏 设 计 1 9.2 对 话 框 设 计2 9.3 多 重 窗 体 的 创 建 与 操 作 3 9.4 多 文 档 界 面 的 设 计4 华 侨 大 学 9.1 菜 单 栏 与 工 具 栏 设 计 菜 单 栏 与 工 具 栏 概 述1 9.1.1 下 拉 式 菜 单 设 计2 9.1.2 弹 出 式 菜 单 设 计3 9.1.3 工 具 栏 设 计4 华 侨 大 学 菜 单 栏 与 工 具 栏 概 述v 菜 单 栏 和 工 具 栏是 Windows界 面 的重 要 组 成 部 分 ，几 乎 所 有 的 应 用软 件 都 是 通 过 菜单 栏 和 工 具 栏 来实 现 各 种 操 作 的 。应 用 程 序 中 菜 单栏 和 工 具 栏 的 位置 如 图 9 1所 示 。 菜 单 栏工 具 栏 图 9 1菜 单 栏 和 工 具 栏 华 侨 大 学 菜 单 栏 与 工 具 栏 概 述v VB的 菜 单 分 成 下 拉 式 菜 单 和 弹 出 式 菜 单 两 种基 本 类 型 。 单 击 菜 单 栏 所 显 示 的 是 下 拉 式 菜 单 ，而 在 操 作 时 单 击 鼠 标 右 键 后 显 示 的 菜 单 是 弹 出式 菜 单 。 弹 出 式 菜 单下 拉 菜 单子 菜 单主 菜 单下 拉 式 菜 单 华 侨 大 学 9.1.1 下 拉 式 菜 单 设 计v菜 单 通 过 菜 单 编 辑 器 进 行 编 辑 菜 单 属 性 设 置 区编 辑 区 菜 单 项 显 示 区 华 侨 大 学 9.1.1 下 拉 式 菜 单 设 计v例 9 1 设 计 如 图 9 3所 示 的 窗 体 ， 通 过 选择 菜 单 实 现 窗 体 中 诗 词 文 字 的 颜 色 修 改 （ 红色 、 绿 色 、 蓝 色 ） 和 字 型 修 改 （ 加 粗 、 加 下划 线 ） 。 图 9-3 下 拉 菜 单 示 例 华 侨 大 学 9.1.2 弹 出 式 菜 单 设 计v弹 出 式 菜 单 使 用 PopupMenu方 法 激 活 ， 其 命令 的 格 式 定 义 如 下 ： PopupMenu ,flags ,x,y,boldcommand 说 明 ： 对 象 名 ： 默 认 为 当 前 窗 体 。 Flags： 可 选 参 数 ， 设 定 弹 出 式 菜 单 的 性 能 . x， y： 可 选 参 数 ， 设 置 弹 出 式 菜 单 显 示 的 坐 标 值 。 boldcommand： 可 选 参 数 ， 指 定 着 重 菜 单 项 。 华 侨 大 学 9.1.2 弹 出 式 菜 单 设 计v例 9 2 在 例 9 1程 序 的 基 础 上 添 加 弹 出式 菜 单 ， 用 户 在 窗 体 上 右 击 弹 出 如 图 9 4所 示 的 菜 单 ， 用 于 设 置 字 体 和 字 号 。 华 侨 大 学 9.1.3 工 具 栏 设 计v工 具 栏 是 Active控 件 ， 在 “ MicroSoft Windows Common Controls 6.0” 部 件 中 ， 使 用 前 先 将 该 部 件添 加 到 工 具 箱 中 （ 请 见 7.5节 ） ， 之 后 工 具 箱 中 会 增加 几 个 控 件 按 钮 ， 其 中 有 ToolBar、 StatusBar、ImageList 控 件 等 ， 添 加 结 果 如 图 9 5所 示 。图 9 5 MicroSoft Windows Common Controls 6.0的 控 件v在 VB中 建 立 工 具 栏 的 方 法 有 两 种 ： 一 种 是 利 用PictureBox 和 CommandBotton两 个 控 件 添 加 ， 另 外一 种 是 通 过 ToolBar和 ImageList工 具 栏 控 件 创 建 。由 于 第 二 种 方 法 创 建 的 工 具 栏 比 较 标 准 ， 因 此 这 里介 绍 利 用 第 二 种 方 法 创 建 工 具 栏 。 华 侨 大 学 9.1.3 工 具 栏 设 计1 ToolBar控 件工 具 栏 控 件 的 内 容 设 置 如 图 所 示 。 图 96 工 具 栏 属 性 页 的 “ 通 用 ” 选 项 卡 图 97工 具 栏 属 性 页 的 “ 按 钮 ” 选 项 卡2. ImageList控 件 华 侨 大 学 9.1.3 工 具 栏 设 计v例 9 3 在 例 9 2的 基 础 上 增 加 工 具 栏 项 目 ，实 现 文 字 颜 色 的 修 改 及 字 型 的 修 改 ， 运 行 结 果如 图 所 示 华 侨 大 学 9.2 对 话 框 设 计 9.2.1 通 用 对 话 框1 9.2.2 自 定 义 对 话 框2 华 侨 大 学 9.2.1 通 用 对 话 框v通 用 对 话 框 控 件 属 于 VB专 业 版 和 企 业 版 所 特有 的 ActiveX控 件 ， 位 于 “ Microsoft Common Dialog Control 6.0” 部 件 中 。 将通 用 对 话 框 控 件 添 加 到 控 件 工 具 箱 后 ， 工 具箱 中 对 应 图 标 为 。表 95通 用 对 话 框 的 方 法方 法 功 能ShowOpen 显 示 “ 打 开 ” 对 话 框ShowSave 显 示 “ 保 存 ” 对 话 框ShowColor 显 示 “ 颜 色 ” 对 话 框 ShowFont 显 示 “ 字 体 ” 对 话 框ShowPrinter 显 示 “ 打 印 ” 对 话 框ShowHelp 显 示 “ 帮 助 ” 对 话 框 华 侨 大 学 9.2.1 通 用 对 话 框v例 9 4 建 立 一 个 文 本 编 辑 器 ， 如 图 9 26所 示 ， 实 现 如 表 9 12所 示 的 菜 单 功 能 ， 使用 通 用 对 话 框 控 件 实 现 文 本 中 文 字 的 颜 色 、字 体 的 修 改 及 打 印 文 本 内 容 ， 并 能 够 打 开 帮助 文 件 。 图 926 例 94的 运 行 结 果 华 侨 大 学 9.2.2自 定 义 对 话 框v自 定 义 对 话 框 在 外 观 上 与 普 通 窗 体 的 区 别 主要 在 于 自 定 义 对 话 框 没 有 控 制 菜 单 按 钮 （ 在窗 体 标 题 栏 左 侧 ） 、 最 大 化 和 最 小 化 按 钮 ，边 框 固 定 （ 不 能 改 变 大 小 ） 。 因 此 ， 需 要 设置 作 为 对 话 框 使 用 的 窗 体 的 某 些 属 性 ， 如 表 9 13所 示 。表 9 13 自 定 义 对 话 框 的 属 性 设 置属 性 名 属 性 值 说 明BorderStyle 3 固 定 边 框 ， 不 能 改 变 大 小ControlBox False 取 消 控 制 菜 单 按 钮 MaxButton False 取 消 最 大 化 按 钮MinButton False 取 消 最 小 化 按 钮 华 侨 大 学 9.2.2自 定 义 对 话 框v例 如 ， 图 9 28是 Visual Basic 6.0编 辑 菜单 中 的 “ 查 找 ” 对 话 框 ， 它 有 4个 命 令 按 钮 ，没 有 最 大 化 和 最 小 化 按 钮 ， 也 没 有 控 制 菜 单按 钮 ， 不 能 改 变 窗 口 的 大 小 。图 9 28“ 查 找 ” 对 话 框 华 侨 大 学 9.3 多 重 窗 体 的 创 建 与 操 作 v 多 重 窗 体 是 指 一 个 应 用 程 序 中 有 多 个 并 列的 普 通 窗 体 ， 每 个 窗 体 可 以 有 自 己 的 界 面和 程 序 代 码 ， 完 成 不 同 的 功 能 ， 其 创 建 过程 如 下 ：1. 添 加 窗 体2. 设 置 启 动 对 象3. 与 窗 体 相 关 的 方 法4. 不 同 窗 体 间 数 据 的 存 取 华 侨 大 学 9.3 多 重 窗 体 的 创 建 与 操 作v例 9 5 编 写 一 个 打 字 游 戏 程 序 ， 具 有 两 个 窗体 ， 第 一 个 窗 体 选 择 游 戏 难 度 ， 第 二 个 窗 体 是打 字 游 戏 的 主 界 面 ， 程 序 运 行 界 面 如 图 9 29和图 9 30所 示 。 程 序 具 有 检 测 用 户 的 输 入 ， 以 及计 算 正 确 的 输 入 字 符 数 ， 总 字 符 数 和 打 字 正 确率 的 功 能 。 图 929选 择 难 度 界 面 图 930打 字 游 戏 界 面 华 侨 大 学 9.4 多 文 档 界 面 的 设 计 9.4.1 多 文 档 界 面 概 述1 9.4.2 MDI窗 体 常 用 属 性 和 方 法 2 9.4.3 多 文 档 界 面 的 创 建 与 操 作 3 华 侨 大 学 9.4.1 多 文 档 界 面 概 述v MDI应 用 程 序 至 少 应 有 两 个 窗 体 ， 父 窗 体 和一 个 子 窗 体 。 每 个 窗 体 都 有 相 应 的 属 性 。父 窗 体 只 有 一 个 ， 而 其 中 包 含 的 子 窗 体 则可 以 有 多 个 .v 生 成 MDI应 用 程 序 ， 操 作 步 骤 如 下 ：1. 创 建 MDI窗 体2. 创 建 应 用 程 序 的 子 窗 体3. 用 命 令 打 开 多 个 子 窗 体 华 侨 大 学 9.4.2 MDI窗 体 常 用 属 性 和 方 法1 活 动 子 窗 体 和 活 动 控 件 VB中 提 供 了 访 问 MDI子 窗 体 的 两 个 属 性 ，如 表 9 19所 示 。2 显 示 MDI窗 体 及 其 子 窗 体 AutoShowChildren属 性 表 9 19 MDI子 窗 体 属 性属 性 描 述ActiveFrom 表 示 具 有 焦 点 的 或 者 最 后 被 激 活 的 的 子 窗 体ActiveControl 表 示 活 动 子 窗 体 上 具 有 焦 点 的 控 件 华 侨 大 学 9.4.3 多 文 档 界 面 的 创 建 与 操 作v例 9 6 制 作 一 个 简 单 的 文 档 编 辑 器 ， 如 图 9 37所 示 ， 要 求 具 有 新 建 窗 体 ， 关 闭 窗 体 ，退 出 系 统 的 功 能 ， 并 能 够 在 窗 口 间 执 行 简 单的 复 制 粘 贴 操 作 ， 以 及 对 打 开 的 窗 口 进 行 布局 。 图 9 37 文 档 编 辑 器 的 运 行 结 果 华 侨 大 学 作 业v课 后 习 题 2， 4， 5， 6， 7， 9， 10