用戶界面設(shè)計(jì)ppt課件

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

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

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

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

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

6、部件部件中，使用前先將該部件添加到工具箱中請(qǐng)見添加到工具箱中請(qǐng)見7.57.5節(jié)），之后工具箱中會(huì)增節(jié)），之后工具箱中會(huì)增加幾個(gè)控件按鈕，其中有加幾個(gè)控件按鈕，其中有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兩個(gè)控件添加，另外兩個(gè)控件添加，另外一種是通過一種是通過ToolBarToolBar和和ImageListImageList工具欄控件創(chuàng)建。工具欄控件創(chuàng)建。由于第二種方法創(chuàng)建的工具欄比較標(biāo)準(zhǔn)，因此這里由于第二種方法創(chuàng)建的工具欄比較標(biāo)準(zhǔn)，因此這里介紹利用第二種方法創(chuàng)建工具欄。介紹利用第二種方法創(chuàng)建工具欄。9.1.3 9.1.3 工具欄設(shè)計(jì)工具欄設(shè)計(jì)1 1ToolBarToolBar控件控件工具欄控件的內(nèi)容設(shè)置如圖所示。工具欄控件的內(nèi)容設(shè)置如圖所示。 圖圖96工具欄屬性頁的工具欄屬性頁

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

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

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

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

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

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

14、作多重窗體的創(chuàng)建與操作v例例9 9 5 5 編寫一個(gè)打字游戲程序，具有兩個(gè)窗編寫一個(gè)打字游戲程序，具有兩個(gè)窗體，第一個(gè)窗體選擇游戲難度，第二個(gè)窗體是體，第一個(gè)窗體選擇游戲難度，第二個(gè)窗體是打字游戲的主界面，程序運(yùn)行界面如圖打字游戲的主界面，程序運(yùn)行界面如圖9 9 2929和和圖圖9 9 3030所示。程序具有檢測(cè)用戶的輸入，以及所示。程序具有檢測(cè)用戶的輸入，以及計(jì)算正確的輸入字符數(shù)，總字符數(shù)和打字正確計(jì)算正確的輸入字符數(shù)，總字符數(shù)和打字正確率的功能。率的功能。 圖 9 29選擇難度界面圖930打字游戲界面 9.4 9.4 多文檔界面的設(shè)計(jì)多文檔界面的設(shè)計(jì) 9.4.1 9.4.1 多文檔界面概述

15、多文檔界面概述1 9.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)有兩個(gè)窗體，父窗體和應(yīng)用程序至少應(yīng)有兩個(gè)窗體，父窗體和一個(gè)子窗體。每個(gè)窗體都有相應(yīng)的屬性。一個(gè)子窗體。每個(gè)窗體都有相應(yīng)的屬性。父窗體只有一個(gè)，而其中包含的子窗體則父窗體只有一個(gè)，而其中包含的子窗體則可以有多個(gè)可以有多個(gè). .v 生成生成MDIMDI應(yīng)用程序，操作步驟如下：應(yīng)用程序，操作步驟如下：v 創(chuàng)建創(chuàng)建MDIMDI窗體窗體v 創(chuàng)建應(yīng)用程序的

16、子窗體創(chuàng)建應(yīng)用程序的子窗體v 用命令打開多個(gè)子窗體用命令打開多個(gè)子窗體 9.4.2 MDI 9.4.2 MDI窗體常用屬性和方法窗體常用屬性和方法1 1活動(dòng)子窗體和活動(dòng)控件活動(dòng)子窗體和活動(dòng)控件 VB VB中提供了訪問中提供了訪問MDIMDI子窗體的兩個(gè)屬性，子窗體的兩個(gè)屬性，如表如表9 9 1919所示。所示。2 2顯示顯示MDIMDI窗體及其子窗體窗體及其子窗體 AutoShowChildren AutoShowChildren屬性屬性 表表 9 9 19 MDI19 MDI子窗體屬性子窗體屬性屬性屬性描述描述ActiveFromActiveFrom表示具有焦點(diǎn)的或者最后被激活的的子窗體表示具有焦點(diǎn)的或者最后被激活的的子窗體ActiveControlActiveControl表示活動(dòng)子窗體上具有焦點(diǎn)的控件表示活動(dòng)子窗體上具有焦點(diǎn)的控件 9.4.3 9.4.3 多文檔界面