《《用戶界面設(shè)計(jì)》PPT課件》由會(huì)員分享，可在線閱讀，更多相關(guān)《《用戶界面設(shè)計(jì)》PPT課件（24頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、華 僑 大 學(xué) 第 9章 用 戶 界 面 設(shè) 計(jì) 華 僑 大 學(xué) 第 9章 用 戶 界 面 設(shè) 計(jì)9.1 菜 單 欄 與 工 具 欄 設(shè) 計(jì) 1 9.2 對(duì) 話 框 設(shè) 計(jì)2 9.3 多 重 窗 體 的 創(chuàng) 建 與 操 作 3 9.4 多 文 檔 界 面 的 設(shè) 計(jì)4 華 僑 大 學(xué) 9.1 菜 單 欄 與 工 具 欄 設(shè) 計(jì) 菜 單 欄 與 工 具 欄 概 述1 9.1.1 下 拉 式 菜 單 設(shè) 計(jì)2 9.1.2 彈 出 式 菜 單 設(shè) 計(jì)3 9.1.3 工 具 欄 設(shè) 計(jì)4 華 僑 大 學(xué) 菜 單 欄 與 工 具 欄 概 述v 菜 單 欄 和 工 具 欄是 Windows界 面 的重 要

2、 組 成 部 分 ，幾 乎 所 有 的 應(yīng) 用軟 件 都 是 通 過(guò) 菜單 欄 和 工 具 欄 來(lái)實(shí) 現(xiàn) 各 種 操 作 的 。應(yīng) 用 程 序 中 菜 單欄 和 工 具 欄 的 位置 如 圖 9 1所 示 。 菜 單 欄工 具 欄 圖 9 1菜 單 欄 和 工 具 欄 華 僑 大 學(xué) 菜 單 欄 與 工 具 欄 概 述v VB的 菜 單 分 成 下 拉 式 菜 單 和 彈 出 式 菜 單 兩 種基 本 類 型 。 單 擊 菜 單 欄 所 顯 示 的 是 下 拉 式 菜 單 ，而 在 操 作 時(shí) 單 擊 鼠 標(biāo) 右 鍵 后 顯 示 的 菜 單 是 彈 出式 菜 單 。 彈 出 式 菜 單下 拉

3、菜 單子 菜 單主 菜 單下 拉 式 菜 單 華 僑 大 學(xué) 9.1.1 下 拉 式 菜 單 設(shè) 計(jì)v菜 單 通 過(guò) 菜 單 編 輯 器 進(jìn) 行 編 輯 菜 單 屬 性 設(shè) 置 區(qū)編 輯 區(qū) 菜 單 項(xiàng) 顯 示 區(qū) 華 僑 大 學(xué) 9.1.1 下 拉 式 菜 單 設(shè) 計(jì)v例 9 1 設(shè) 計(jì) 如 圖 9 3所 示 的 窗 體 ， 通 過(guò) 選擇 菜 單 實(shí) 現(xiàn) 窗 體 中 詩(shī) 詞 文 字 的 顏 色 修 改 （ 紅色 、 綠 色 、 藍(lán) 色 ） 和 字 型 修 改 （ 加 粗 、 加 下劃 線 ） 。 圖 9-3 下 拉 菜 單 示 例 華 僑 大 學(xué) 9.1.2 彈 出 式 菜 單 設(shè) 計(jì)v彈

4、出 式 菜 單 使 用 PopupMenu方 法 激 活 ， 其 命令 的 格 式 定 義 如 下 ： PopupMenu ,flags ,x,y,boldcommand 說(shuō) 明 ： 對(duì) 象 名 ： 默 認(rèn) 為 當(dāng) 前 窗 體 。 Flags： 可 選 參 數(shù) ， 設(shè) 定 彈 出 式 菜 單 的 性 能 . x， y： 可 選 參 數(shù) ， 設(shè) 置 彈 出 式 菜 單 顯 示 的 坐 標(biāo) 值 。 boldcommand： 可 選 參 數(shù) ， 指 定 著 重 菜 單 項(xiàng) 。 華 僑 大 學(xué) 9.1.2 彈 出 式 菜 單 設(shè) 計(jì)v例 9 2 在 例 9 1程 序 的 基 礎(chǔ) 上 添 加 彈 出式

5、菜 單 ， 用 戶 在 窗 體 上 右 擊 彈 出 如 圖 9 4所 示 的 菜 單 ， 用 于 設(shè) 置 字 體 和 字 號(hào) 。 華 僑 大 學(xué) 9.1.3 工 具 欄 設(shè) 計(jì)v工 具 欄 是 Active控 件 ， 在 “ MicroSoft Windows Common Controls 6.0” 部 件 中 ， 使 用 前 先 將 該 部 件添 加 到 工 具 箱 中 （ 請(qǐng) 見(jiàn) 7.5節(jié) ） ， 之 后 工 具 箱 中 會(huì) 增加 幾 個(gè) 控 件 按 鈕 ， 其 中 有 ToolBar、 StatusBar、ImageList 控 件 等 ， 添 加 結(jié) 果 如 圖 9 5所 示 。圖

6、9 5 MicroSoft Windows Common Controls 6.0的 控 件v在 VB中 建 立 工 具 欄 的 方 法 有 兩 種 ： 一 種 是 利 用PictureBox 和 CommandBotton兩 個(gè) 控 件 添 加 ， 另 外一 種 是 通 過(guò) ToolBar和 ImageList工 具 欄 控 件 創(chuàng) 建 。由 于 第 二 種 方 法 創(chuàng) 建 的 工 具 欄 比 較 標(biāo) 準(zhǔn) ， 因 此 這 里介 紹 利 用 第 二 種 方 法 創(chuàng) 建 工 具 欄 。 華 僑 大 學(xué) 9.1.3 工 具 欄 設(shè) 計(jì)1 ToolBar控 件工 具 欄 控 件 的 內(nèi) 容 設(shè) 置

7、如 圖 所 示 。 圖 96 工 具 欄 屬 性 頁(yè) 的 “ 通 用 ” 選 項(xiàng) 卡 圖 97工 具 欄 屬 性 頁(yè) 的 “ 按 鈕 ” 選 項(xiàng) 卡2. ImageList控 件 華 僑 大 學(xué) 9.1.3 工 具 欄 設(shè) 計(jì)v例 9 3 在 例 9 2的 基 礎(chǔ) 上 增 加 工 具 欄 項(xiàng) 目 ，實(shí) 現(xiàn) 文 字 顏 色 的 修 改 及 字 型 的 修 改 ， 運(yùn) 行 結(jié) 果如 圖 所 示 華 僑 大 學(xué) 9.2 對(duì) 話 框 設(shè) 計(jì) 9.2.1 通 用 對(duì) 話 框1 9.2.2 自 定 義 對(duì) 話 框2 華 僑 大 學(xué) 9.2.1 通 用 對(duì) 話 框v通 用 對(duì) 話 框 控 件 屬 于 VB專

8、 業(yè) 版 和 企 業(yè) 版 所 特有 的 ActiveX控 件 ， 位 于 “ Microsoft Common Dialog Control 6.0” 部 件 中 。 將通 用 對(duì) 話 框 控 件 添 加 到 控 件 工 具 箱 后 ， 工 具箱 中 對(duì) 應(yīng) 圖 標(biāo) 為 。表 95通 用 對(duì) 話 框 的 方 法方 法 功 能ShowOpen 顯 示 “ 打 開(kāi) ” 對(duì) 話 框ShowSave 顯 示 “ 保 存 ” 對(duì) 話 框ShowColor 顯 示 “ 顏 色 ” 對(duì) 話 框 ShowFont 顯 示 “ 字 體 ” 對(duì) 話 框ShowPrinter 顯 示 “ 打 印 ” 對(duì) 話 框Sh

9、owHelp 顯 示 “ 幫 助 ” 對(duì) 話 框 華 僑 大 學(xué) 9.2.1 通 用 對(duì) 話 框v例 9 4 建 立 一 個(gè) 文 本 編 輯 器 ， 如 圖 9 26所 示 ， 實(shí) 現(xiàn) 如 表 9 12所 示 的 菜 單 功 能 ， 使用 通 用 對(duì) 話 框 控 件 實(shí) 現(xiàn) 文 本 中 文 字 的 顏 色 、字 體 的 修 改 及 打 印 文 本 內(nèi) 容 ， 并 能 夠 打 開(kāi) 幫助 文 件 。 圖 926 例 94的 運(yùn) 行 結(jié) 果 華 僑 大 學(xué) 9.2.2自 定 義 對(duì) 話 框v自 定 義 對(duì) 話 框 在 外 觀 上 與 普 通 窗 體 的 區(qū) 別 主要 在 于 自 定 義 對(duì) 話 框

10、沒(méi) 有 控 制 菜 單 按 鈕 （ 在窗 體 標(biāo) 題 欄 左 側(cè) ） 、 最 大 化 和 最 小 化 按 鈕 ，邊 框 固 定 （ 不 能 改 變 大 小 ） 。 因 此 ， 需 要 設(shè)置 作 為 對(duì) 話 框 使 用 的 窗 體 的 某 些 屬 性 ， 如 表 9 13所 示 。表 9 13 自 定 義 對(duì) 話 框 的 屬 性 設(shè) 置屬 性 名 屬 性 值 說(shuō) 明BorderStyle 3 固 定 邊 框 ， 不 能 改 變 大 小ControlBox False 取 消 控 制 菜 單 按 鈕 MaxButton False 取 消 最 大 化 按 鈕MinButton False 取 消

11、最 小 化 按 鈕 華 僑 大 學(xué) 9.2.2自 定 義 對(duì) 話 框v例 如 ， 圖 9 28是 Visual Basic 6.0編 輯 菜單 中 的 “ 查 找 ” 對(duì) 話 框 ， 它 有 4個(gè) 命 令 按 鈕 ，沒(méi) 有 最 大 化 和 最 小 化 按 鈕 ， 也 沒(méi) 有 控 制 菜 單按 鈕 ， 不 能 改 變 窗 口 的 大 小 。圖 9 28“ 查 找 ” 對(duì) 話 框 華 僑 大 學(xué) 9.3 多 重 窗 體 的 創(chuàng) 建 與 操 作 v 多 重 窗 體 是 指 一 個(gè) 應(yīng) 用 程 序 中 有 多 個(gè) 并 列的 普 通 窗 體 ， 每 個(gè) 窗 體 可 以 有 自 己 的 界 面和 程 序

12、代 碼 ， 完 成 不 同 的 功 能 ， 其 創(chuàng) 建 過(guò)程 如 下 ：1. 添 加 窗 體2. 設(shè) 置 啟 動(dòng) 對(duì) 象3. 與 窗 體 相 關(guān) 的 方 法4. 不 同 窗 體 間 數(shù) 據(jù) 的 存 取 華 僑 大 學(xué) 9.3 多 重 窗 體 的 創(chuàng) 建 與 操 作v例 9 5 編 寫(xiě) 一 個(gè) 打 字 游 戲 程 序 ， 具 有 兩 個(gè) 窗體 ， 第 一 個(gè) 窗 體 選 擇 游 戲 難 度 ， 第 二 個(gè) 窗 體 是打 字 游 戲 的 主 界 面 ， 程 序 運(yùn) 行 界 面 如 圖 9 29和圖 9 30所 示 。 程 序 具 有 檢 測(cè) 用 戶 的 輸 入 ， 以 及計(jì) 算 正 確 的 輸 入

13、 字 符 數(shù) ， 總 字 符 數(shù) 和 打 字 正 確率 的 功 能 。 圖 929選 擇 難 度 界 面 圖 930打 字 游 戲 界 面 華 僑 大 學(xué) 9.4 多 文 檔 界 面 的 設(shè) 計(jì) 9.4.1 多 文 檔 界 面 概 述1 9.4.2 MDI窗 體 常 用 屬 性 和 方 法 2 9.4.3 多 文 檔 界 面 的 創(chuàng) 建 與 操 作 3 華 僑 大 學(xué) 9.4.1 多 文 檔 界 面 概 述v MDI應(yīng) 用 程 序 至 少 應(yīng) 有 兩 個(gè) 窗 體 ， 父 窗 體 和一 個(gè) 子 窗 體 。 每 個(gè) 窗 體 都 有 相 應(yīng) 的 屬 性 。父 窗 體 只 有 一 個(gè) ， 而 其 中

14、包 含 的 子 窗 體 則可 以 有 多 個(gè) .v 生 成 MDI應(yīng) 用 程 序 ， 操 作 步 驟 如 下 ：1. 創(chuàng) 建 MDI窗 體2. 創(chuàng) 建 應(yīng) 用 程 序 的 子 窗 體3. 用 命 令 打 開(kāi) 多 個(gè) 子 窗 體 華 僑 大 學(xué) 9.4.2 MDI窗 體 常 用 屬 性 和 方 法1 活 動(dòng) 子 窗 體 和 活 動(dòng) 控 件 VB中 提 供 了 訪 問(wèn) MDI子 窗 體 的 兩 個(gè) 屬 性 ，如 表 9 19所 示 。2 顯 示 MDI窗 體 及 其 子 窗 體 AutoShowChildren屬 性 表 9 19 MDI子 窗 體 屬 性屬 性 描 述ActiveFrom 表 示

15、 具 有 焦 點(diǎn) 的 或 者 最 后 被 激 活 的 的 子 窗 體ActiveControl 表 示 活 動(dòng) 子 窗 體 上 具 有 焦 點(diǎn) 的 控 件 華 僑 大 學(xué) 9.4.3 多 文 檔 界 面 的 創(chuàng) 建 與 操 作v例 9 6 制 作 一 個(gè) 簡(jiǎn) 單 的 文 檔 編 輯 器 ， 如 圖 9 37所 示 ， 要 求 具 有 新 建 窗 體 ， 關(guān) 閉 窗 體 ，退 出 系 統(tǒng) 的 功 能 ， 并 能 夠 在 窗 口 間 執(zhí) 行 簡(jiǎn) 單的 復(fù) 制 粘 貼 操 作 ， 以 及 對(duì) 打 開(kāi) 的 窗 口 進(jìn) 行 布局 。 圖 9 37 文 檔 編 輯 器 的 運(yùn) 行 結(jié) 果 華 僑 大 學(xué) 作 業(yè)v課 后 習(xí) 題 2， 4， 5， 6， 7， 9， 10