第9章界面設計9.1界面設計概述

9.2菜單設計

9.3工具欄設計

9.4狀態欄設計

9.5多文檔界面設計

教學小結

習題

9.1界面設計概述

1．符合Windows界面準則

Windows操作系統的主要優點之一就是為基于其上開發的應用程序提供了標準的操作界面。如果用戶掌握了基于Windows的應用程序的使用方法,就很容易使用符合Windows界面準則的其他應用程序。如果偏離了Windows界面準則，使用者使用應用程序時就會感到別扭，比如，在菜單設計中幾乎均遵循這樣的標準：“文件”菜單在最左邊，然后是“編輯”、“工具”等可選的菜單，最右邊是“幫助”菜單。如果把“幫助”菜單放在最左邊，就會降低應用程序的可用性。同樣，菜單項設計時也應符合Windows界面準則。如“編輯”菜單通常有“復制”、“剪切”與“粘貼”等菜單項，若將它們放置于“文件”菜單下也會引起用戶的不可理解。

2．確定控件的位置

在大多數界面設計中，不是所有的界面元素都一樣重要。仔細斟酌很有必要，以確保重要的界面信息或操作能快速地顯現給用戶。通常，將重要的或者頻繁訪問的操作放在屏幕的左上部位。因為按照人們用眼的習慣，首先注視屏幕的左上部位。

3．保證界面元素的一致性

在用戶界面設計中，一致的外觀(如顏色搭配、窗口大小、字體、字號、線型粗細等)可為使用者創造一種和諧美，有效減輕用眼疲勞。如果界面缺乏一致性，則讓人們感到凌亂和缺乏條理性，這無疑會降低人們使用的興趣。

總之，應用程序界面設計應體現以用戶為中心的思想，在滿足用戶需求的基礎上，充分考慮行業的要求與規范，做好界面設計的組織或布局工作，以提高應用程序界面的可用性和美觀性。 9.2菜單設計

9.2.1菜單概述

所謂“菜單”，就是可供選擇的命令項目列表，分為下拉式菜單和彈出式(快捷)菜單兩種形式。下拉式菜單位于菜單欄上，通過點擊菜單欄上的菜單標題打開；彈出式菜單通常通過在某一特定區域單擊鼠標右鍵打開。

圖9-1為下拉式菜單的示例圖，它位于窗口的頂部，在窗口的標題欄下顯示了下拉式菜單的菜單欄，包含多個菜單標題。程序在運行時，當用戶單擊某個菜單標題時便會下拉相應的菜單項(也稱子菜單)。圖9-1下拉式菜單及其組成元素示例菜單中的菜單項可以是命令、分隔條或子菜單標題。彈出式(快捷)菜單一般由鼠標右鍵激活，所包含的菜單項同下拉菜單相同，如圖9-2所示。圖9-2彈出式菜單9.2.2菜單設計

在VB中菜單設計實際也是一種控件的應用，這種控制稱之為“菜單”控件，但菜單控件不像其他控件一樣放在工具箱中。要使用菜單控件與其相應的命令，應選擇“工具”菜單中的“菜單編輯器”命令，或單擊工具欄上的“菜單編輯器”按鈕，或在窗體上單擊右鍵在快捷菜單中選擇“菜單編輯器”命令，便可打開如圖9-3所示的“菜單編輯器”對話框。圖9-3“菜單編輯器”對話框下面介紹菜單編輯器中的各組成元素。

(1)“標題”(Caption)文本框：用于設置菜單標題，鍵入的內容會在菜單編輯器窗口下邊的空白部分顯示出來，該區域稱為菜單顯示區域。

(2)“名稱”(Name)文本框：菜單項的對象名稱。對象名稱的命名規則同簡單變量，如果菜單中有分隔條，分隔條也要有對應的名稱。

(3)“索引”(Index)文本框：與一般控件類似，菜單可以利用索引來建立菜單數組，并以索引值來標識數組中的不同成員(類似于Command1(0)、Command1(1)、Command1(2)…)。

(4)“快捷鍵”(Shortcut)列表框：該列表框列出了很多快捷鍵供用戶選擇。菜單項的快捷鍵是可選的，如果選擇了快捷鍵，則程序運行時快捷鍵會顯示在菜單標題的右邊，通過快捷鍵同樣可完成相應命令的操作。

(5)“下一個”(Next)按鈕：在菜單列表的最后產生一個空白項，進入下一個同級菜單項的設計。

(6)“→”和“←”按鈕：菜單層次的設定按鈕，用于調整菜單項的級別。若建立好一個菜單項后按“→”按鈕，則該菜單項在顯示框中向右移一段，系統自動在菜單項前加4個點“····”，表示該菜單項為下一級的菜單項。如果選定了某菜單項后，再按“←”按鈕，前面的省略號將取消，表示該菜單項是上一級的菜單項。

(7)“插入”(Insert)按鈕：在選定的菜單項前插入一個菜單項。

(8)“刪除”(Delete)按鈕：刪除選定的菜單項。

(9)“↑”和“↓”按鈕：用于改變菜單項的位置。通過“↑”、“↓”按鈕將選定的菜單項上移或下移。

(10)“復選”(Checked)檢查框：如果在顯示框中選定了某個菜單項，再選定Checked檢查框，那么當前被選定的菜單項左邊加上了一個檢查標記“√”，表示該菜單項是一個選項。

(11)“有效”(Enabled)檢查框：決定菜單項是否可選(有效)。若該檢查框被選中，菜單項的Enabled屬性為True，程序執行時菜單項高亮度顯示；當未被選中時，Enabled屬性為False，在程序執行時該菜單項變成灰色，不能被用戶選擇。

(12)“可見”(Visible)檢查框：決定菜單項是否可見。若該檢查框未被選中，則該菜單項的Visible屬性為False，程序執行時不可見。

例9-1

設計一個如圖9-4a所示的文本編輯器，其菜單設計如圖9-4b所示。

在窗體上添加1個TextBox控件(Text1)和1個通用對話框控件(ComDlg)，用菜單編輯器編輯各菜單項，菜單中各選項的屬性設置如表9-1所示。表9-1菜單中各選項的屬性設置圖9-4a?“文本編輯器”設計界面圖9-4b菜單各選項屬性設置9.2.3修改菜單項狀態

當菜單創建好后，其中的菜單項在程序運行過程中并不是一成不變的，可以根據實際情況動態地改變菜單項的狀態。例如，當前條件不滿足菜單項的執行時，可以暫時使其失效或將其隱藏起來，當條件滿足時，再使其有效或顯示出來，菜單項的狀態在“可用”與“不可用”兩種狀態間切換。

例9-2

在例9-1中，當文本框中沒有內容被選中時，剪切、復制、刪除菜單項為不可用，當有內容被選中時，則變為可用狀態。

設計思路：用戶要使用這些命令，首先必須打開Edit菜單，因此，在Edit菜單打開(被單擊)時設置命令是否可用。在程序中加入以下代碼：9.2.4增減菜單項

Windows應用程序中的菜單項不但可以隨著條件的改變而改變其狀態，而且還可以隨著用戶的操作動態地增、減菜單項的內容。

在VB中，實現菜單項增、減的方法是：將有關菜單項創建為菜單數組，在程序運行過程中調用Load或UnLoad方法添加或刪除菜單項即可。

例9-3

在例9-1中添加一個“字號”的頂級菜單，用于設置文本框中字體的大小。該菜單項包括“五號”、“四號”子菜單項。當用戶選擇“四號”時，在該菜單中添加“三號”子菜單項；當選擇“五號”時，在該菜單項中刪除“三號”子菜單項。

設計界面如圖9-5所示，“字號”菜單屬性設置如表9-2所示。圖9-5菜單項的增減表9-2“字號”菜單屬性設置9.2.5彈出式菜單設計

彈出式菜單是獨立于主菜單欄而顯示在窗體特定位置的浮動菜單，它可以在窗體的指定區域顯示出來，并對程序事件做出響應。彈出式菜單又稱為上下文菜單或快捷菜單，在Windows中一般通過單擊右鍵來打開彈出式菜單。

在VB中，彈出式菜單是下拉式菜單的一部分，只是它的打開方式獨立于下拉式菜單，因此彈出式菜單的建立和修改與下拉式菜單相同，均通過“菜單編輯器”來完成。若不想讓彈出式菜單出現在主菜單中，只需要將菜單項設置為隱藏(Visible屬性值為False)。需要打開彈出式菜單時使用PopupMenu方法即可。

PopupMenu方法的格式：

[窗體名.]PopupMenu菜單名[,flag[,X,Y]]

其中：

(1)?X,Y：快捷菜單顯示的位置坐標。

(2)菜單名：至少包含有一個菜單項的菜單名稱(Name屬性值)。

(3)?flag：指定彈出式菜單的行為參數。彈出式菜單包含位置及行為兩個常數，位置常數值見表9-3，行為常數值見表9-4。表9-3彈出式菜單位置常數值表9-4彈出式菜單行為常數值

例9-4

將例9-3中的“編輯(Edit)”菜單作為文本框(Text1)的快捷菜單(當用戶在文本框中單擊右鍵時顯示菜單)。

在代碼編輯器中添加以下代碼：

9.3工?具?欄?設?計

9.3.1ImageList控件

在窗體上添加一個ImageList控件后，右鍵單擊，選擇“屬性”，打開ImageList控件的屬性頁，并選擇“圖像”選項卡，如圖9-6所示。通過此界面可以向ImageList控件中添加和刪除圖片。圖9-6ImageList控件的屬性頁9.3.2ToolBar控件

1．“通用”選項卡

“通用”選項卡如圖9-7所示，用于設置工具欄的整體外觀和一些通用動作選項。

“通用”選項卡主要選項說明如下：

(1)“圖像列表”：連接一個ImageList控件，用于在正常狀態下工具欄按鈕上顯示的圖片。

(2)“可換行的”復選框：該復選框選中時，當工具欄的長度不能容納所有按鈕時，則在下一行顯示，否則不顯示剩余的按鈕。

(3)“樣式”：設定按鈕的顯示是普通風格還是平面風格，默認為普通風格。圖9-7“通用”選項卡

2．“按鈕”選項卡

“按鈕”選項卡如圖9-8所示，其功能是用來設置工具欄上各按鈕的顯示樣式及一些行為參數。圖9-8?“按鈕”選項卡

(1)“插入按鈕”與“刪除按鈕”：在工具欄上添加或刪除一個按鈕。

(2)“索引”(Index)與“關鍵字”(Key)：是按鈕在工具欄的按鈕集合中的唯一編號。通過索引或關鍵字訪問按鈕，索引表示每個按鈕的數字編號，關鍵字是每個按鈕的標識名。另外，索引是必須指定的，而關鍵字是可選的。

(3)“標題”與“描述”：標題即按鈕的Caption屬性，設置顯示在按鈕上的文字。描述設置按鈕的說明信息。

(4)“樣式”(Style屬性)：決定按鈕的行為特點，且影響按鈕的功能。樣式的屬性值及功能見表9-5。表9-5Style屬性值及其功能

(5)“圖像”(Image屬性)：設置工具欄上按鈕的圖像。該圖像引用ImageList對象中的圖像，其值是ImageList對象中圖片的Index或Key值。

(6)“值”(Value屬性)：表示按鈕的狀態，有按下(tbrPressed)和彈起(tbrUnpressed)兩種狀態。僅當樣式屬性值為1和2時起作用。

(7)“工具提示文本”(ToolTipText屬性)：鼠標指向按鈕時顯示的說明文字。

(8)“按鈕菜單”：當按鈕樣式屬性值為5時，用于插入或刪除按鈕菜單的菜單項。

3．常用事件

ToolBar控件常用的事件有兩個：ButtonClick和ButtonMenuClick。

ButtonClick：單擊按鈕(占位符和分隔符除外)時觸發。可以通過按鈕的Index屬性或Key屬性識別被單擊的按鈕，并用SelectCase語句編寫按鈕的功能代碼。其代碼結構如下：

ButtonMenuClick：當ToolBar控件Style屬性值為5時，即按鈕樣式為菜單按鈕時，單擊此按鈕時觸發。可以使用ButtonMenu對象的Index屬性或Key屬性識別是哪個按鈕被單擊，并用SelectCase語句編寫按鈕的功能代碼。

代碼結構如下：9.3.3使用ToolBar和ImageList控件創建工具欄

創建工具欄的具體步驟如下：

(1)在窗體上添加ToolBar控件和ImageList控件。

(2)在ImageList控件中添加圖像。

(3)在ToolBar控件屬性頁的“通用”選項卡的“圖像列表”組合框中選擇ImageList控件，建立與ImageList控件的關聯，并設置其他通用參數。

(4)在“按鈕”選項卡中添加按鈕，并設置各按鈕的屬性及顯示圖片的ImageList索引。

(5)編寫響應ToolBar控件的事件代碼。

例9-5

在例9-4的基礎上為編輯器添加一個“格式”工具欄，可以選擇字體，設定對齊方式和字體樣式。

(1)設計界面。

在窗體上添加1個ImageList控件(ImageList1)和1個ToolBar控件(ToolBar1)。在ToolBar中添加9個按鈕。

(2)設置屬性。

在ImageList1中添加7張圖片(在VB的安裝目錄C:\ProgramFiles\MicrosoftVisualStudio\Common\Graphics\Bitmaps\TlBr_W95中)，圖片順序如圖9-9a所示。圖9-9aImageList屬性設置在ToolBar屬性頁的“通用”選項卡中的“圖像列表”組合框中選擇“ImageList1”，與ImageList1控件建立聯系；在“樣式”組合框中選擇“tbrFlat”，設置按鈕顯示樣式為平面風格；在“按鈕”選項卡中設置各按鈕的屬性，如表9-6所示。表9-6ToolBar1控件各按鈕屬性設置圖9-9bToolBar控件示例

9.4狀?態?欄?設?計

狀態欄通常位于窗體的底部，用來顯示程序的運行狀態及其他信息。如顯示一些系統信息、日期、時間等；顯示菜單、按鈕或其他對象的功能或使用方法；顯示鍵盤狀態；顯示數字鎖定鍵、大小寫轉換鍵、插入鍵的狀態等。

1．主要屬性

StatusBar的主要屬性可以通過其“屬性頁”的“通用”和“窗格”兩個選項卡完成。“窗格”選項卡如圖9-10所示。圖9-10“窗格”選項卡

(1)“插入窗格”和“刪除窗格”按鈕：在狀態欄中添加或刪除一個窗格(Panel對象)。

(2)“索引”和“關鍵字”：為每個窗格編號或標識。

(3)“文本”：窗格上顯示的文本內容。

(4)“對齊”：設置文本的對齊方式。

(5)“瀏覽”按鈕：為窗格添加圖片，圖像擴展名可以是“.ico”或“.bmp”。

(6)“樣式”：設置窗格顯示什么樣的信息。樣式常數值及說明如表9-7所示。表9-7樣式屬性值及其功能

(7)“斜面”、“自動調整大小”和“對齊”：設置每個窗格的外觀。具體屬性值分別見表9-8、表9-9和表9-10。表9-8斜面屬性值及其功能表9-9自動調整大小屬性值及其功能表9-10對齊屬性值及其功能

例9-6

為例9-5的文本編輯器添加一個狀態欄。在狀態欄中顯示CapsLock鍵和Insert鍵的狀態、系統時間，并顯示文本框中已輸入的字符數，如圖9-11所示。圖9-11StatusBar控件示例

(1)設計界面。在窗體上添加一個狀態欄。

(2)屬性設置。

在狀態欄中插入4個窗格，依次將其樣式設為sbrText、sbrCaps、sbrIns和sbrTime。

(3)編寫代碼。

PrivateSubText1_Change()

StatusBar1.Panels(1).Text="已輸入"&Len(Text1.Text)&"個字符"

EndSub

9.5多文檔界面設計

9.5.1多文檔界面概述

多文檔界面由父窗體和子窗體組成，父窗體(MDI窗體)作為子窗體的容器，子窗體(文檔窗體)顯示各自文檔，所有子窗體具有相同的功能。如圖9-12是一個多文檔應用程序界面。圖9-12多文檔應用程序界面多文檔界面具有如下特性：

(1)所有子窗體均顯示在MDI窗體的工作區中，用戶可改變其大小，移動其位置，但被限制在MDI窗體中。

(2)當最小化子窗體時，它的圖標將顯示在MDI窗體下方而不是在任務欄上。當最小化MDI窗體時，所有的子窗體隨MDI窗體一起最小化，但只有MDI窗體的圖標出現在工具欄上。

(3)當最大化一個子窗體時，它只能充滿整個MDI窗體的工作區，而不是整個桌面。另外，它的標題與MDI窗體的標題一起顯示在MDI窗體的標題欄上。

(4)?MDI窗體和子窗體都可有各自的菜單，當子窗體加載時將覆蓋MDI窗體的菜單。9.5.2創建和設計MDI窗體及子窗體

1．創建MDI窗體

選擇“工程”菜單中的“添加MDI窗體”命令，便可創建一個MDI窗體。MDI窗體是所有子窗體的容器，可在其上建立菜單欄、工具欄、狀態欄等控件，但不能建立文檔控件，如文本框控件。

2．創建子窗體

子窗體其實是一種隸屬于MDI窗體的一個普通窗體。因此，要創建一個子窗體，先創建一個普通窗體，然后再將窗體的MDIChild屬性設置為True即可。

在工程管理器中可以看到子窗體的圖標、MDI窗體的圖標及普通窗體的圖標都各不相同，如圖9-13所示。圖9-13MDI窗體管理多文檔窗體應用程序的文檔數由用戶在運行程序時按照自己的需要來創建，因此在設計期要創建多少個子窗體是不確定的。所以，對子窗體的創建一般都是首先創建一個窗體作為模板，在程序運行期按照需要再隨時創建。

假設已經創建好一個子窗體模板Form1，則動態創建其他窗體的代碼如下：

DimChildFrmAsNewForm1'聲明并創建一個ChildFrm窗體變量

ChildFrm屬性名=值 '設置窗體的一些屬性，如Caption

ChildFrm.Show '將新窗體顯示出來9.5.3MDI窗體與子窗體交互

MDI應用程序的子窗體是在程序運行過程中動態建立的，要與這些子窗體進行交互，使用普通方法是不能實現的。為了便于控制這些子窗體及其中的控件，VB為MDI窗體提供了兩個屬性，即ActiveForm和ActiveControl。

ActiveForm：表示具有焦點的或者最后被激活的子窗體。

ActiveControl：表示活動子窗體上具有焦點的控件。9.5.4卸載MDI窗體

當用戶通過“關閉”命令關閉MDI窗體時，首先觸發MDI窗體的QueryUnLoad事件，隨即觸發各子窗體的QueryUnLoad事件，然后觸發各子窗體的UnLoad事件，最后觸發MDI窗體的UnLoad事件。

MDI的卸載過程是：首先卸載所有的子窗體，最后卸載MDI窗體。

由于QueryUnLoad事件是在窗體卸載之前被調用的，因此在此事件中可以給用戶一個機會來保持窗體，或阻止窗體關閉(將QueryUnLoad事件的Cancel參數設置為1)。9.5.5子窗體排列

在MDI窗體中，通過MDI窗體的Arrange方法可以將所有的子窗體按不同的方式進行排列，以便用戶操作。

Arrange方法的格式：

MDI窗體名.Arrange排列方式

其中，排列方式參數值及意義見表9-11。表9-11子窗體排列方式9.5.6應用MDI窗體注意事項

使用MDI窗體為應用程序的開發提供了高效、多功能的良好平臺。但為了提高應用程序的性能，進行MDI應用程序開發時應注意以下事項：

(1)盡量少使用MDI子窗體。因為每加載一個子窗體，就要消耗較多的內存及系統資源。過多的使用子窗體會造成內存和系統資源不足，而影響程序的運行速度。

(2)在子窗體中，對子窗體本身引用時，應使用Me關鍵字，而在MDI窗體中則使用ActiveForm。

(3)當子窗體菜單項、MDI菜單項或工具欄均執行相同功能操作時，應以過程的形式保存到標準模塊中，供各模塊共享。

(4)把整個應用程序中所使用的不可視控件(如Timer)都放在MDI窗體上，以便所有子窗體都可以使用這些控件。

例9-7

建立如圖9-14所示的多文檔編輯器。圖9-14多文檔編輯器界面操作步驟：

(1)建立一個新工程，