《用戶界面設(shè)計》ppt課件

1、第第9 9章章 用戶界面設(shè)計用戶界面設(shè)計 第第9 9章章 用戶界面設(shè)計用戶界面設(shè)計9.1 9.1 菜單欄與工具欄設(shè)計菜單欄與工具欄設(shè)計 1 9.2 對話框設(shè)計2 9.3 多重窗體的創(chuàng)建與操作 3 9.4 多文檔界面的設(shè)計49.1 9.1 菜單欄與工具欄設(shè)計菜單欄與工具欄設(shè)計 菜單欄與工具欄概述菜單欄與工具欄概述1 9.1.1 9.1.1 下拉式菜單設(shè)計下拉式菜單設(shè)計29.1.2 9.1.2 彈出式菜單設(shè)計彈出式菜單設(shè)計3 9.1.3 工具欄設(shè)計4菜單欄與工具欄概述菜單欄與工具欄概述v 菜單欄和工具欄菜單欄和工具欄是是WindowsWindows界面的界面的重要組成部分，重要組成部分，幾乎一切的

2、運用幾乎一切的運用軟件都是經(jīng)過菜軟件都是經(jīng)過菜單欄和工具欄來單欄和工具欄來實現(xiàn)各種操作的。實現(xiàn)各種操作的。運用程序中菜單運用程序中菜單欄和工具欄的位欄和工具欄的位置如圖置如圖 9 9 1 1所示。所示。菜單欄菜單欄工具欄工具欄圖圖 9 9 1 1菜單欄和工具欄菜單欄和工具欄 菜單欄與工具欄概述菜單欄與工具欄概述v VB VB的菜單分成下拉式菜單和彈出式菜單兩種的菜單分成下拉式菜單和彈出式菜單兩種根本類型。單擊菜單欄所顯示的是下拉式菜單，根本類型。單擊菜單欄所顯示的是下拉式菜單，而在操作時單擊鼠標(biāo)右鍵后顯示的菜單是彈出而在操作時單擊鼠標(biāo)右鍵后顯示的菜單是彈出式菜單。式菜單。 彈出式菜單彈出式菜單

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

4、計彈出式菜單設(shè)計v彈出式菜單運用彈出式菜單運用PopupMenuPopupMenu方法激活，其命方法激活，其命令的格式定義如下：令的格式定義如下： PopupMenu PopupMenu ,flags,flags ,x,y,boldcommand ,x,y,boldcommand 闡明：闡明： 對象名：默以為當(dāng)前窗體。對象名：默以為當(dāng)前窗體。 Flags Flags：可選參數(shù)，設(shè)定彈出式菜單的性能：可選參數(shù)，設(shè)定彈出式菜單的性能. . x x，y y：可選參數(shù)，設(shè)置彈出式菜單顯示的坐標(biāo)值。：可選參數(shù)，設(shè)置彈出式菜單顯示的坐標(biāo)值。 boldcommand boldcommand：可選參數(shù)，指定著

5、重菜單項。：可選參數(shù)，指定著重菜單項。9.1.2 9.1.2 彈出式菜單設(shè)計彈出式菜單設(shè)計v例例9 9 2 2 在例在例 9 9 1 1程序的根底上添加彈出程序的根底上添加彈出式菜單，用戶在窗體上右擊彈出如圖式菜單，用戶在窗體上右擊彈出如圖 9 9 4 4所示的菜單，用于設(shè)置字體和字號。所示的菜單，用于設(shè)置字體和字號。9.1.3 9.1.3 工具欄設(shè)計工具欄設(shè)計v 工具欄是工具欄是ActiveActive控件，在控件，在“MicroSoft Windows “MicroSoft Windows Common Controls 6.0Common Controls 6.0部件中，運用前先將該部件

6、部件中，運用前先將該部件添加到工具箱中請見添加到工具箱中請見7.57.5節(jié)，之后工具箱中會添節(jié)，之后工具箱中會添加幾個控件按鈕，其中有加幾個控件按鈕，其中有ToolBarToolBar、StatusBarStatusBar、ImageList ImageList 控件等，添加結(jié)果如圖控件等，添加結(jié)果如圖9 9 5 5所示。所示。vvv 圖圖9 9 5 MicroSoft Windows Common Controls 6.05 MicroSoft Windows Common Controls 6.0的控件的控件v 在在VBVB中建立工具欄的方法有兩種：一種是利用中建立工具欄的方法有兩種：一種

7、是利用PictureBox PictureBox 和和CommandBottonCommandBotton兩個控件添加，另外兩個控件添加，另外一種是經(jīng)過一種是經(jīng)過ToolBarToolBar和和ImageListImageList工具欄控件創(chuàng)建。工具欄控件創(chuàng)建。由于第二種方法創(chuàng)建的工具欄比較規(guī)范，因此這里由于第二種方法創(chuàng)建的工具欄比較規(guī)范，因此這里引見利用第二種方法創(chuàng)建工具欄。引見利用第二種方法創(chuàng)建工具欄。9.1.3 9.1.3 工具欄設(shè)計工具欄設(shè)計1 1ToolBarToolBar控件控件工具欄控件的內(nèi)容設(shè)置如下圖。工具欄控件的內(nèi)容設(shè)置如下圖。 圖圖96工具欄屬性頁的工具欄屬性頁的“通用選項

8、卡通用選項卡圖圖97工具欄屬性頁的工具欄屬性頁的“按鈕選項卡按鈕選項卡2. ImageList2. ImageList控件控件 9.1.3 9.1.3 工具欄設(shè)計工具欄設(shè)計v例例9 9 3 3 在例在例9 9 2 2的根底上添加工具欄工程，的根底上添加工具欄工程，實現(xiàn)文字顏色的修正及字型的修正，運轉(zhuǎn)結(jié)果實現(xiàn)文字顏色的修正及字型的修正，運轉(zhuǎn)結(jié)果如下圖如下圖9.2 9.2 對話框設(shè)計對話框設(shè)計 9.2.1 9.2.1 通用對話框通用對話框1 9.2.2 9.2.2 自定義對話框自定義對話框29.2.1 9.2.1 通用對話框通用對話框v通用對話框控件屬于通用對話框控件屬于VBVB專業(yè)版和企業(yè)版所特

9、專業(yè)版和企業(yè)版所特有的有的ActiveXActiveX控件，位于控件，位于“Microsoft “Microsoft Common Dialog Control 6.0Common Dialog Control 6.0部件中。將部件中。將通用對話框控件添加到控件工具箱后，工具通用對話框控件添加到控件工具箱后，工具箱中對應(yīng)圖標(biāo)為箱中對應(yīng)圖標(biāo)為 。表表95通用對話框的方法通用對話框的方法方法方法功能功能ShowOpenShowOpen顯示顯示“打開打開”對話框?qū)υ捒騍howSaveShowSave顯示顯示“保存保存”對話框?qū)υ捒騍howColorShowColor顯示顯示“顏色顏色”對話框?qū)υ捒騍

10、howFontShowFont顯示顯示“字體字體”對話框?qū)υ捒騍howPrinterShowPrinter顯示顯示“打印打印”對話框?qū)υ捒騍howHelpShowHelp顯示顯示“幫助幫助”對話框?qū)υ捒?.2.1 9.2.1 通用對話框通用對話框v例例9 9 4 4 建立一個文本編輯器，如圖建立一個文本編輯器，如圖9 9 2626所示，實現(xiàn)如表所示，實現(xiàn)如表9 9 1212所示的菜單功能，運所示的菜單功能，運用通用對話框控件實現(xiàn)文本中文字的顏色、用通用對話框控件實現(xiàn)文本中文字的顏色、字體的修正及打印文本內(nèi)容，并可以翻開協(xié)字體的修正及打印文本內(nèi)容，并可以翻開協(xié)助文件。助文件。圖圖926例例94的

11、運轉(zhuǎn)結(jié)果的運轉(zhuǎn)結(jié)果 9.2.2 9.2.2自定義對話框自定義對話框v自定義對話框在外觀上與普通窗體的區(qū)別主自定義對話框在外觀上與普通窗體的區(qū)別主要在于自定義對話框沒有控制菜單按鈕在要在于自定義對話框沒有控制菜單按鈕在窗體標(biāo)題欄左側(cè)、最大化和最小化按鈕，窗體標(biāo)題欄左側(cè)、最大化和最小化按鈕，邊框固定不能改動大小。因此，需求設(shè)邊框固定不能改動大小。因此，需求設(shè)置作為對話框運用的窗體的某些屬性，如表置作為對話框運用的窗體的某些屬性，如表 9 9 1313所示。所示。表表 9 13 自定義對話框的屬性設(shè)置自定義對話框的屬性設(shè)置屬性名屬性名屬性值屬性值說明說明BorderStyleBorderStyle3

12、 3固定邊框，不能改變大小固定邊框，不能改變大小ControlBoxControlBoxFalseFalse取消控制菜單按鈕取消控制菜單按鈕MaxButtonMaxButtonFalseFalse取消最大化按鈕取消最大化按鈕MinButtonMinButtonFalseFalse取消最小化按鈕取消最小化按鈕 9.2.2 9.2.2自定義對話框自定義對話框v例如，圖例如，圖9 9 2828是是Visual Basic 6.0Visual Basic 6.0編輯菜編輯菜單中的單中的“查找查找對話框，它有對話框，它有4 4個命令按鈕，個命令按鈕，沒有最大化和最小化按鈕，也沒有控制菜單沒有最大化和最小

13、化按鈕，也沒有控制菜單按鈕，不能改動窗口的大小。按鈕，不能改動窗口的大小。v圖圖9 9 28“28“查找查找對話框?qū)υ捒?9.3 9.3 多重窗體的創(chuàng)建與操作多重窗體的創(chuàng)建與操作 v 多重窗體是指一個運用程序中有多個并列多重窗體是指一個運用程序中有多個并列的普通窗體，每個窗體可以有本人的界面的普通窗體，每個窗體可以有本人的界面和程序代碼，完成不同的功能，其創(chuàng)建過和程序代碼，完成不同的功能，其創(chuàng)建過程如下：程如下：v 添加窗體添加窗體v 設(shè)置啟動對象設(shè)置啟動對象v 與窗體相關(guān)的方法與窗體相關(guān)的方法v 不同窗體間數(shù)據(jù)的存取不同窗體間數(shù)據(jù)的存取9.3 9.3 多重窗體的創(chuàng)建與操作多重窗體的創(chuàng)建與操作

14、v例例9 9 5 5 編寫一個打字游戲程序，具有兩個窗編寫一個打字游戲程序，具有兩個窗體，第一個窗體選擇游戲難度，第二個窗體是體，第一個窗體選擇游戲難度，第二個窗體是打字游戲的主界面，程序運轉(zhuǎn)界面如圖打字游戲的主界面，程序運轉(zhuǎn)界面如圖9 9 2929和和圖圖9 9 3030所示。程序具有檢測用戶的輸入，以及所示。程序具有檢測用戶的輸入，以及計算正確的輸入字符數(shù)，總字符數(shù)和打字正確計算正確的輸入字符數(shù)，總字符數(shù)和打字正確率的功能。率的功能。 圖 9 29選擇難度界面圖930打字游戲界面 9.4 9.4 多文檔界面的設(shè)計多文檔界面的設(shè)計 9.4.1 9.4.1 多文檔界面概述多文檔界面概述1 9.

15、4.2 MDI 9.4.2 MDI窗體常用屬性和方法窗體常用屬性和方法 2 9.4.3 9.4.3 多文檔界面的創(chuàng)建與操作多文檔界面的創(chuàng)建與操作 3 9.4.1 9.4.1 多文檔界面概述多文檔界面概述v MDIMDI運用程序至少應(yīng)有兩個窗體，父窗體和運用程序至少應(yīng)有兩個窗體，父窗體和一個子窗體。每個窗體都有相應(yīng)的屬性。一個子窗體。每個窗體都有相應(yīng)的屬性。父窗體只需一個，而其中包含的子窗體那父窗體只需一個，而其中包含的子窗體那么可以有多個么可以有多個. .v 生成生成MDIMDI運用程序，操作步驟如下：運用程序，操作步驟如下：v 創(chuàng)建創(chuàng)建MDIMDI窗體窗體v 創(chuàng)建運用程序的子窗體創(chuàng)建運用程序

16、的子窗體v 用命令翻開多個子窗體用命令翻開多個子窗體 9.4.2 MDI 9.4.2 MDI窗體常用屬性和方法窗體常用屬性和方法1 1活動子窗體和活動控件活動子窗體和活動控件 VB VB中提供了訪問中提供了訪問MDIMDI子窗體的兩個屬性，子窗體的兩個屬性，如表如表9 9 1919所示。所示。2 2顯示顯示MDIMDI窗體及其子窗體窗體及其子窗體 AutoShowChildren AutoShowChildren屬性屬性 表表 9 9 19 MDI19 MDI子窗體屬性子窗體屬性屬性屬性描述描述ActiveFromActiveFrom表示具有焦點的或者最后被激活的的子窗體表示具有焦點的或者最后被激活的的子窗體ActiveControlActiveControl表示活動子窗體上具有焦點的控件表示活動子窗體上具有焦點的控件 9.4.3 9.4.3 多文檔界面的