《《用戶界面設計》PPT課件》由會員分享，可在線閱讀，更多相關《《用戶界面設計》PPT課件（24頁珍藏版）》請在裝配圖網上搜索。

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

2、 組 成 部 分 ，幾 乎 所 有 的 應 用軟 件 都 是 通 過 菜單 欄 和 工 具 欄 來實 現 各 種 操 作 的 。應 用 程 序 中 菜 單欄 和 工 具 欄 的 位置 如 圖 9 1所 示 。 菜 單 欄工 具 欄 圖 9 1菜 單 欄 和 工 具 欄 華 僑 大 學 菜 單 欄 與 工 具 欄 概 述v VB的 菜 單 分 成 下 拉 式 菜 單 和 彈 出 式 菜 單 兩 種基 本 類 型 。 單 擊 菜 單 欄 所 顯 示 的 是 下 拉 式 菜 單 ，而 在 操 作 時 單 擊 鼠 標 右 鍵 后 顯 示 的 菜 單 是 彈 出式 菜 單 。 彈 出 式 菜 單下 拉

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

4、出 式 菜 單 使 用 PopupMenu方 法 激 活 ， 其 命令 的 格 式 定 義 如 下 ： PopupMenu ,flags ,x,y,boldcommand 說 明 ： 對 象 名 ： 默 認 為 當 前 窗 體 。 Flags： 可 選 參 數 ， 設 定 彈 出 式 菜 單 的 性 能 . x， y： 可 選 參 數 ， 設 置 彈 出 式 菜 單 顯 示 的 坐 標 值 。 boldcommand： 可 選 參 數 ， 指 定 著 重 菜 單 項 。 華 僑 大 學 9.1.2 彈 出 式 菜 單 設 計v例 9 2 在 例 9 1程 序 的 基 礎 上 添 加 彈 出式

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

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

7、如 圖 所 示 。 圖 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專

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

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

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

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

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

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

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

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