1、用戶界面設(shè)計(jì)是軟件開發(fā)中最重要的部分之一，界面設(shè)計(jì)方案是開發(fā)者根據(jù)自己對用戶需求的理解而制定的。設(shè)計(jì)界面綜合了技術(shù)、藝術(shù)、心理學(xué)上的技能它需要左腦和右腦都參與。優(yōu)秀的用戶界面應(yīng)當(dāng)具有簡單易用、美觀大方等特點(diǎn)，本章將詳細(xì)地介紹設(shè)計(jì)優(yōu)秀的用戶界面的方法和原則。,第7章 用戶界面設(shè)計(jì)與高級控件,本章學(xué)習(xí)目標(biāo),（1）理解用戶界面的類型及設(shè)計(jì)原則。 （2）掌握菜單、工具欄、狀態(tài)欄以及公用對話框的設(shè)計(jì)方法。,用戶界面概述,用戶界面是應(yīng)用程序的重要組成部分，設(shè)計(jì)用戶界面時，有許多問題需要考慮： 需要多少個窗體、要不要使用菜單、要不要創(chuàng)建工具欄、采用什么樣的方式來與用戶交換信息、應(yīng)當(dāng)給用戶提供哪些幫助等。 由

2、此可見，在設(shè)計(jì)用戶界面之前，應(yīng)當(dāng)了解該應(yīng)用程序的用途及用戶的計(jì)算機(jī)水平層次，據(jù)此設(shè)計(jì)出合理、美觀的用戶界面，用戶界面決定了應(yīng)用程序的易用性。,用戶界面的類型,基于Windows應(yīng)用程序的用戶界面主要有兩類：單文檔界面（SDI）和多文檔界面（MDI）。 開發(fā)應(yīng)用程序時，應(yīng)當(dāng)根據(jù)應(yīng)用程序的需要來確定采用哪一種用戶界面。例如，一個學(xué)生信息管理的應(yīng)用程序可能要使用MDI界面，因?yàn)樾枰瑫r處理多個學(xué)生信息的情況是常見的。再如，一個日歷程序更適合使用SDI界面，因?yàn)橥瑫r需要顯示多個日歷的情況是少見的。 除了SDI界面和MDI界面，比較常見的還有對話框型界面和類似于“Windows資源管理器”的界面。對話框

3、型界面如Windows中的計(jì)算器；類似于“Windows資源管理器”的界面由兩部分組成，左邊是層次視圖區(qū)，右邊是內(nèi)容顯示區(qū)，這種界面便于瀏覽大量的文檔、圖片和目錄等。,設(shè)計(jì)用戶界面的基本原則,1、控件的位置拖放安排 2、控件的大小與一致性編排 3、合理利用空間，保持界面的簡潔 4、合理利用顏色、圖像和顯示效果,菜單,在Windows環(huán)境下，幾乎所有的應(yīng)用軟件都是通過菜單來提供各種操作的。在Visual Basic 2005應(yīng)用程序中，當(dāng)操作較簡單時，一般通過控件來執(zhí)行，而當(dāng)要完成較復(fù)雜的操作時，使用菜單將更方便。 菜單的基本作用有兩個：第一是提供人機(jī)對話的接口，以便讓用戶選擇應(yīng)用程序的各種功能

4、；第二是管理應(yīng)用程序，控制各種功能模塊的運(yùn)行。 一個高質(zhì)量的菜單程序，不僅要做到界面美觀、分類合理，還要方便用戶使用，并可以避免由于誤操作而帶來的嚴(yán)重后果。,菜單的兩種基本類型,菜單有兩種基本類型：下拉式菜單（MenuStrip）和彈出式菜單（ContextMenuStrip）。 1. 下拉式菜單（MenuStrip） 下拉式菜單是一種典型的窗口式菜單，一般通過單擊菜單欄的菜單標(biāo)題的方式打開，如我的電腦窗口上方的【文件】、【編輯】和【查看】等菜單就是下拉式菜單。 在下拉式菜單中，一般有一個主菜單（即菜單欄），位于窗口標(biāo)題欄的下方，可以包括一個或多個選擇項(xiàng)，稱為菜單標(biāo)題或主菜單項(xiàng)。當(dāng)單擊一個菜單

5、標(biāo)題時，一個包含多個菜單項(xiàng)的列表（即菜單）被打開，這些菜單項(xiàng)稱為菜單命令或子菜單項(xiàng)。根據(jù)功能的不同，可以使用分隔線將這些子菜單項(xiàng)分開。有的菜單命令的右端有向右的三角符號，當(dāng)鼠標(biāo)指向該菜單命令時，會出現(xiàn)下級子菜單，Visual Basic 2005中最多可以出現(xiàn)六級子菜單，但實(shí)際上超過四級的就很少見。有的菜單命令的左邊有一個符號，表示該菜單命令正在起作用。 2. 彈出式菜單（ContextMenuStrip） 彈出式菜單，也稱為右鍵菜單或彈出菜單。它是指當(dāng)用戶在一個對象上單擊右鍵時顯示出來的菜單，可以在窗口的某個位置顯示。因此，用戶可以利用彈出式菜單更方便快捷地完成相關(guān)操作。如在桌面上單擊右鍵彈

6、出的桌面屬性菜單就是彈出式菜單。,菜單項(xiàng)的常用屬性和事件,1. Name屬性 Name屬性用于設(shè)置菜單項(xiàng)的ID，通過它可以訪問菜單項(xiàng)的各個屬性，也可以使用它的固有方法。一般來說，應(yīng)用程序需要使用菜單的情況下，其菜單項(xiàng)的數(shù)量不會很少，所以在程序設(shè)計(jì)時一定要修改菜單項(xiàng)的Name 屬性。不要使用其默認(rèn)的Name屬性MenuStrip1、MenuStrip2、MenuStrip3、 菜單的Name屬性一般使用屬性窗口直接進(jìn)行設(shè)置。 2. Text屬性 Text屬性用于設(shè)置菜單項(xiàng)的文本內(nèi)容。設(shè)置時可以使用屬性窗口，也可以使用代碼，代碼示例如下： MenuStrip.Text = 打開 3. Visibl

7、e屬性 Visible屬性用于設(shè)置菜單項(xiàng)是否可見。設(shè)置時可以使用屬性窗口，也可以使用代碼，代碼示例如下： MenuStrip.Visible = False,4. Enabled屬性 Enabled屬性用于設(shè)置菜單項(xiàng)是否響應(yīng)外部事件。它有True和False兩個值，True表示可用；False表示不可用，這時該菜單項(xiàng)變成灰色。設(shè)置時可以使用屬性窗口，也可以使用代碼，代碼示例如下： MenuStrip.Enabled = False 5. ShortCutKeys屬性 該屬性用于設(shè)置激活菜單項(xiàng)的快捷鍵，這時就不需要使用鼠標(biāo)單擊菜單項(xiàng)而直接使用鍵盤就可以實(shí)現(xiàn)菜單項(xiàng)中的命令。 菜單的ShortCut

8、Keys屬性一般使用屬性窗口直接進(jìn)行設(shè)置。 6. ShowShortcutKeys屬性 ShowShortcutKeys屬性用于設(shè)置是否顯示菜單項(xiàng)的快捷鍵。如果設(shè)為True，菜單項(xiàng)的快捷鍵可見；設(shè)為False，則不可見。設(shè)置時可以使用屬性窗口，也可以使用代碼，代碼示例如下： MenuStrip.ShowShortcutKeys = False,7. Checked屬性 Checked屬性用于設(shè)置或返回菜單項(xiàng)是否被選中。有True和False兩個值，默認(rèn)為False，表示未被選中；True表示被選中，這時菜單項(xiàng)左邊有一個符號。設(shè)置時可以使用屬性窗口，也可以使用代碼，代碼示例如下： MenuStr

9、ip.Checked = True 8. Click事件 Click為單擊事件，當(dāng)用戶單擊菜單項(xiàng)時觸發(fā)該事件。,菜單設(shè)計(jì)器,工具欄,ToolStrip控件用來設(shè)計(jì)一個Windows工具欄，它的功能非常強(qiáng)大，可以將一些常用的控件單元作為子項(xiàng)放在工具欄中，通過各個子項(xiàng)與應(yīng)用程序發(fā)生聯(lián)系。常用的子項(xiàng)有：Button、Label、SplitButton、DropDownButon、Separator、ComboBox、TextBox和ProgressBar等。,工具欄的常用屬性,（1）BackgroundImage屬性。用于設(shè)置子項(xiàng)背景圖片，以增強(qiáng)子項(xiàng)的顯示效果。其設(shè)置方法一般使用屬性窗口直接進(jìn)行設(shè)置

10、。 （2）Items屬性。用于設(shè)計(jì)工具欄中顯示的子項(xiàng)，添加子項(xiàng)的方法有直接單擊設(shè)計(jì)界面中的下拉按鈕添加和使用【項(xiàng)集合編輯器】對話框添加兩種。 （3）ToolTipText屬性。設(shè)置顯示在子項(xiàng)上提示文本內(nèi)容。設(shè)置時一般使用屬性窗口，也可以使用代碼，代碼示例如下： ToolStripButton1.ToolTipText = 打開 （4）Text屬性。設(shè)置文本內(nèi)容。設(shè)置時一般使用屬性窗口，也可以使用代碼，代碼示例如下： ToolStripButton1.Text = 打開,狀態(tài)欄（StatusStrip）,跟工具欄類似，狀態(tài)欄（StatusStrip）控件用來設(shè)計(jì)一個Windows狀態(tài)欄，同樣也可

11、以將一些常用的控件單元作為子項(xiàng)放在工具欄中，通過各個子項(xiàng)與應(yīng)用程序發(fā)生聯(lián)系。狀態(tài)欄常用的子項(xiàng)有：StatusLabel、SplitButton、DropDownButon和ProgressBar等。 添加子項(xiàng)的方法以及狀態(tài)欄常用的屬性與上一節(jié)介紹的類似。,【打開】對話框,1. FileName屬性 FileName屬性表示第一個在對話框中顯示的文件或用戶選擇的最后一個文件，如： OpenFileDialog1. FileName = 打開對話框 2. Filter屬性 對話框中的文件篩選器，F(xiàn)ilter屬性用于設(shè)置打開或保存的文件類型，如： OpenFileDialog1.Filter = v

12、b文件|*.vb|所有文件|*.* 3. DefaultExt屬性 文件默認(rèn)的擴(kuò)展名，如果沒有給出擴(kuò)展名，則系統(tǒng)自動使用DefaultExt屬性設(shè)置的擴(kuò)展名為文件的擴(kuò)展名。設(shè)置時一般使用屬性窗口，也可以使用代碼，代碼示例如下： OpenFileDialog1.DefaultExt= .vb 4. InitialDirectory屬性 對話框的初始目錄，如： OpenFileDialog1.InitialDirectory = C: 5. MultiSelect屬性 確定是否可以選擇多個文件，值為True時可以選擇多個文件，值為False時只能選擇一個文件。 6. ShowDialog方法 Sh

13、owDialog方法用于顯示對話框。,【保存】對話框,【保存】對話框（SaveFileDialog）的外觀和使用方法與【打開】對話框基本上是一致的，SaveFileDialog的另外一些重要的屬性如下： 1. CreatePrompt屬性 設(shè)置一個邏輯值（True或False），當(dāng)要保存的文件不存在時，彈出對話框詢問用戶是否創(chuàng)建該文件。設(shè)置時一般使用屬性窗口，也可以使用代碼，代碼示例如下： SaveFileDialog1.CreatePrompt = True 2. OverwritePrompt屬性 當(dāng)要保存的文件存在時，如果OverwritePrompt屬性值為True，會彈出一個對話框詢

14、問用戶是否覆蓋此文件；若為False，則不加詢問直接覆蓋。設(shè)置時一般使用屬性窗口，也可以使用代碼，代碼示例如下： SaveFileDialog1.OverwritePrompt = True,【顏色】對話框,【顏色】對話框（ColorDialog）用于設(shè)置顏色，Clolor屬性用于獲取選定顏色的RGB值，ShowDialog方法用于顯示【顏色】對話框。如： ColorDialog1.ShowDialog 顯示顏色對話框 將文本框的字體顏色設(shè)置為在【顏色】對話框中選定的顏色 TextBox1.ForeColor = ColorDialog1.Color,【字體】對話框,【字體】對話框（FontD

15、ialog）用于設(shè)置字體的類型、大小、顏色、樣式等，顯示【字體】對話框的方法同樣為“ShowDialog”，F(xiàn)ontDialog的一些常用的屬性如下： 1. ShowColor屬性 用于設(shè)置是否在【字體】對話框中顯示顏色部分。設(shè)置時一般使用屬性窗口，也可以使用代碼，代碼示例如下： FontDialog1.ShowColor = True 2. Color屬性 獲取或設(shè)置在選定字體的顏色，如： TextBox1.ForeColor = FontDialog1.Color 3. ShowEffects屬性 用于設(shè)置是否在【字體】對話框中顯示下劃線和刪除線部分。設(shè)置時一般使用屬性窗口，也可以使用代碼

16、，代碼示例如下： FontDialog1.ShowEffects = True 4. Font屬性 獲取或設(shè)置在【字體】對話框中選定的字體，如： TextBox1.Font = FontDialog1.Font,【文件夾瀏覽】對話框,【文件夾瀏覽】對話框（FolderBrowserDialog）用于瀏覽文件夾，其常用的屬性和方法有： 1. SelectedPath屬性 SelectedPath屬性用于設(shè)置對話框中最先顯示的文件夾或用戶最后選擇的文件夾的路徑，如： FolderBrowserDialog1.SelectedPath = C: 2. ShowNewFolderButton屬性 ShowNewFolderButton屬性用于設(shè)置在對話框中是否顯示【新建文件夾】按鈕，如： FolderBrowserDialog1.ShowNewFolderButton = True 3. Description屬性 Description屬性用于設(shè)