第 12 章 視窗介面進階.

Presentation on theme: "第 12 章 視窗介面進階."— Presentation transcript:

1 第 12 章 視窗介面進階

2 本章重點提要 12-1 功能表設計基礎 12-2 功能表視覺效果 12-3 快顯功能表 12-4 工具列 12-5 狀態列

3 本章閱讀建議 本章將介紹功能表、工具列、狀態列等控制項, 這些控制項都可提供更豐富的圖形使用者介面。
12-1 功能表設計基礎：我們先從如何建立功能表開始, 一步步說明如何建立能執行特定功能的功能表命令。

4 本章閱讀建議 12-2 功能表的視覺效果：學會設計功能表後, 本節進一步介紹一些功能表效果的使用及處理方法。
12-3 快顯功能表：快顯功能表的用法基本上承襲自一般的功能表, 看過前兩節後, 再看本節應是輕鬆愉快。

5 本章閱讀建議 12-4 工具列：工具列雖和功能表長得不太一樣, 但其實它們的用法非常相似。
12-5 狀態列：看過功能表和工具列後, 我們再介紹也是常見於一般應用程式的狀態列, 讓讀者認識如何將要傳達給使用者的資訊,顯示在狀態列中。

6 12-1 功能表設計基礎 功能表算是 Windows 應用程式的基本介面之一, 雖然大家用得都很習慣了, 但可能仍不瞭解功能表的組成。以下我們先由程式設計的觀點, 好好認識一下功能表。

7 功能表設計基礎 我們可將功能表內容分成主功能表、子功能表、功能表命令等三種：

8 功能表設計基礎 例如上面圖中的主功能表, 就有檔案、編輯、檢視...等子功能表,而檔案子功能表下則有新增、開啟、關閉... 等子功能表或功能表命令；而新增子功能表則有專案、檔案兩個功能表命令。 要在表單中加入主功能表, 需使用 控制項, 以下我們就來練習建立如下的功能表內容：

9 功能表設計基礎 在表單中建立功能表。 建立新專案 Ch12-01, 加入一個 控制項, 也加入一個 控制項, 如下圖：

10 功能表設計基礎 用滑鼠在功能表中的 按一下, 即可輸入第1 個子功能表, 請輸入『樣式』：

11 功能表設計基礎 在樣式功能表中加入 3 個功能表命令：一般、粗體、斜體, 建立的方式和剛才類似：

12 功能表設計基礎

13 功能表設計基礎

14 功能表設計基礎 接著按 將專案存檔 ( 因根據測試, 輸入數字功能表命令時, 偶爾會使 VB 意外終止, 故建議先存檔再進行下一步驟)。
接著以同樣的方法, 在主功能表建立另一個大小子功能表, 並輸入如下內容：

15 功能表設計基礎 由於『ToolStripMenuItem 數字編號』名稱較不易辨識它是什麼命令, 最好將它改成其它有意義的文字, 在此我們就將之更名為『Size9』、『Size18』、『Size27』：

16 功能表設計基礎 按[F5] 鍵執行程式, 雖然尚未替各功能表命令撰寫程式,但我們可先測試功能表本身是否可運作：

17 處理功能表命令 在剛才建立功能表的過程可發現, 子功能表和功能表命令也都是控制項, 它們是使用 ToolStripMenuItem 控制項建立的, 但此控制項未列在工具箱中。當使用者在功能表中選擇了某個命令時, 會觸發該控制項的 Click 事件, 因此我們只需在程式中加入各命令控制項的 Click 事件程序, 就能讓命令發揮功效。

18 處理功能表命令 以剛才建立的功能表為例, 我們想做的是由功能表改變 Label 控制項的文字樣式和大小。此時可利用如下方式建立新的字型物件, 並指定給控制項的 Font 屬性：

19 處理功能表命令 第一個 Font() 方法已在第 6 章介紹過, 至於第 2 個只有 2 個參數的版本, 其參數是字型物件和新的字型樣式, 因此第 2 個方法適用於修改現有字型樣式的場合, 例如：

20 處理功能表命令 我們就在功能表命令事件程序中利用兩種方式來建新字型, 並設定給控制項的 Font 屬性, 即可達到『執行功能表命令, 即變更控制項字型』的效果。

21 處理功能表命令 建立功能表命令的 Click 事件程序, 並在程序中變更控制項字型樣式或大小。 開啟剛才建立的專案 Ch12-01。

22 處理功能表命令

23 處理功能表命令 在新建的事件程序中輸入如下程式： 以同樣方式建立 、 功能表命令的 Click 事件程序, 並輸入如下程式：

24 處理功能表命令

25 處理功能表命令 至於 功能表中調整字型大小的命令, 則是用 3 個參數的 Font() 方法建立指定大小的字型, 並設定給 Label1 控制項。請分別建立 3 個字型尺寸命令的 Click 事件處理程序, 並輸入如下的程式碼：

26 處理功能表命令

27 處理功能表命令 按[F5] 鍵執行程式, 即可利用功能表中的命令, 改變字型的樣式或大小：

28 處理功能表命令 請替剛才的範例專案加入可讓標籤文字加上底線的命令。 在樣式功能表中新增一個加底線命令。
建立其 Click 事件程序, 並輸入如下程式碼：

29 12-2 功能表視覺效果 除了單純列出功能表命令外, 功能表也可呈現不同的風貌, 例如在VB 中就會看到如下的功能表內容：

30 分隔線與便捷鍵 分隔線與便捷鍵都是在輸入表單命令時, 即可直接輸入產生：
分隔線：在 中輸入功能表命令名稱時, 若只輸入一個 ‘-’ 符號, 該項目就會變成分隔線。附帶說明, 分隔線也是一個 ToolStripMenuItem 控制項。 便捷鍵：在輸入功能表命令時, 加入 “&” 符號及按鍵字元, 該字元就會自動變成可搭配[Alt] 鍵使用的便捷鍵。

31 分隔線與便捷鍵 以下我們就用一個可由功能表命令將表單放大或縮小的簡單程式,來練習在功能表中加入分隔線與便捷鍵。

32 分隔線與便捷鍵 實作具有分隔線與便捷鍵的命令。 建立新專案 Ch12-02, 並加入一個 MenuStrip 控制項。

33 分隔線與便捷鍵 在 上按一下, 輸入如下命令：

34 分隔線與便捷鍵

35 分隔線與便捷鍵 依同樣方式繼續輸入如下命令：

36 分隔線與便捷鍵 接著我們要建立分隔線, 只要輸入一個 "-" 符號就可以了：

37 分隔線與便捷鍵

38 分隔線與便捷鍵 我們要用功能表命令將表單放大或縮小, 只需在其事件程序中修改表單物件的 Width、Height 屬性即可, 請分別建立三個命令的 Click 事件程序, 並輸入如下程式：

39 分隔線與便捷鍵

40 分隔線與便捷鍵 按[F5] 執行程式, 測試功能表的便捷鍵：

41 勾選、淡化與快速鍵 前面設定分隔線、便捷鍵時, 都是直接輸入命令內容即可。但像功能表命令的勾選、淡化效果, 以及快速鍵功能, 則都是透過ToolStripMenuItem 的屬性來設定： Checked 屬性：此屬性為 True 時, 命令前面就會出現打勾符號 ；預設值為 False, 亦即沒有打勾符號。 Enabled 屬性：預設值為 True, 表示功能表可使用；設為False 即為淡化且無法選取。

42 勾選、淡化與快速鍵 ShortcutKeys 屬性：此屬性需使用上一章介紹過的 Keys類別來指定執行命令的按鍵或按鍵組合, 例如：
不過我們不必硬記按鍵名稱, VB 已提供選擇介面供我們設定此屬性 (後詳)。

43 勾選、淡化與快速鍵 建立含如下功能表的畫圓程式, 功能表具勾選、淡化與快速鍵等效果。

44 勾選、淡化與快速鍵 建立新專案 Ch12-03, 並加入如下功能表。

45 勾選、淡化與快速鍵 接著我們要透過ShortcutKeys 屬性來設定功能表命令的快速鍵, 請先在 命令上按一下, 然後再按屬性窗格中ShortcutKeys 屬性旁的 鈕, 就會出現如下設定畫面：

46 勾選、淡化與快速鍵 在屬性窗格中出現的面板可設定快速鍵的按鍵組合, 上半部的 、 、 是快速鍵按鍵組合中需同時按下的按鍵, 下半的下拉式選單則是要搭配的按鍵名稱。例如勾選 再於下拉式選單中選 , 表示快速鍵為[Ctrl]+[A] 。在此為方便對照, 我們就將 命令的快速鍵設為[F1] ：

47 勾選、淡化與快速鍵

48 勾選、淡化與快速鍵

49 勾選、淡化與快速鍵 依同樣方式將 的快速鍵設為[F2] 、 的快速鍵設為[F4] 、 的快速鍵設為[F8] 。
接著開始做程式的處理。我們要讓程式畫出圓形的圖案,所以請先建立表單的 Paint 事件程序, 並在程序外宣告一個記錄圓形直徑 ( 即外接矩形的寬度) 的表單變數 Diameter, 以便在功能表命令的事件程序中, 也能修改圓形的直徑大小, 達到將圓形變大變小的效果。

50 勾選、淡化與快速鍵

51 勾選、淡化與快速鍵

52 勾選、淡化與快速鍵 在各命令的 Click 事件程序中, 所要做的就是更改圓形的直徑, 並請表單重繪, 因此請建 、 、 、 的事件程序, 並分別輸入如下的程式碼：

53 選、淡化與快速鍵

54 選、淡化與快速鍵 最後要利用程式來處理命令的打勾及淡化效果, 這些工作可放在功能表的 DropDownOpening 事件程序。此事件會在功能表被開啟時觸發, 所以只要在其事件程序中將該打勾的命令打勾、該淡化的淡化, 使用者就會看到相關效果。請由屬性窗格建立尺寸ToolStripMenuItem 控制項的 DropDownOpening 事件程序：

55 選、淡化與快速鍵

56 選、淡化與快速鍵 在剛剛建立的事件程序中輸入如下程式：

57 選、淡化與快速鍵

58 選、淡化與快速鍵 一般應用程式較少讓某個功能表命令同時被打勾及淡化, 此處為了練習及示範, 所以讓功能表命令同時被打勾及淡化。
按[F5] 鈕執行程式, 可用快速鍵或用滑鼠選取功能表命令, 即可看到勾選及淡化效果：

59 選、淡化與快速鍵

60 12-3 快顯功能表 快顯功能表 (Context Menu) 就是指按下滑鼠右鈕時所出現的功能表：

61 快顯功能表 其建立方式和前兩節介紹的一般功能表大同小異, 使用的技巧也差不多, 主要的差異有以下兩點：
建立快顯功能表時, 是使用 控制項, 而非一般功能表所用的 控制項。 要讓表單或控制項『擁有』快顯示功能表, 需設定其ContextMenu 屬性。例如要讓使用者於表單中按滑鼠右鈕時顯示快顯功能表, 就需設定表單的 ContextMenuStrip 屬性。

62 快顯功能表 建立含如下快顯功能表的應用程式, 使用者可由快顯功能表中的命令變更表單內顯示的顏色。

63 快顯功能表 建立新專案 Ch12-04, 並加入一個 控制項。

64 快顯功能表 選取表單, 並將ContextMenuStrip 屬性設為剛才建立的 ContextMenuStrip1 控制項。

65 快顯功能表 程式要做的是根據使用者在快顯功能表中所選的顏色, 塗滿表單工作區, 所以我們建立 Paint 事件程序, 並建立一個記錄所選顏色的 myColor 表單變數：

66 快顯功能表 快顯功能表中的 3 個命令, 分別可改變填滿表單所用的顏色, 所以分別建立 3 個命令的 Click 事件程序, 並加入如下的程式：

67 快顯功能表 快顯功能表中的命令同樣可有淡化、勾選等各種效果, 不過上一節對一般功能表是用 DropDownOpening 事件程序, 對快顯功能表則要改用 Opening 事件程序 (Opening 事件是快顯功能表正要被顯示時所觸發的事件)。請建立快顯功能表的 Opening事件程序, 並輸入如下程式來設定勾選的效果：

68 快顯功能表 按[F5] 鍵執行程式, 在表單中按滑鼠右鈕即可開啟快顯功能表, 並選擇顏色：

69 12-4 工具列 在一般應用程式中, 工具列通常是位於主功能表之下, 內含按鈕或其它控制項, 提供使用者另一種便利的操作介面。工具列是用 控制項建立, 之後則可加入工具按鈕, 作法類似於在功能表加入功能表命令。

70 工具列 我們先將前一章以 Windows Media Player 控制項建立的媒體播放程式, 改成使用工具列的按鈕來控制, 讓讀者熟悉工具列的基本用法：

71 工具列 使用 控制項建立工具列, 並在工具列上佈置按鈕。
使用 控制項建立工具列, 並在工具列上佈置按鈕。 建立新專案 Ch12-05, 並加入一個 控制項,以及 控制項 ( 若工具箱沒有此控制項, 請參考 頁新增之)：

72 工具列

73 工具列 工具列預設沒有任何按鈕, 可採如下的步驟新增工具鈕：

74 工具列 工具列按鈕預設使用的圖案為 , 我們必須自行提供圖案更換：

75 工具列

76 工具列

77 工具列

78 工具列

79 工具列 工具按鈕的類別為 ToolStripButton, 我們可像一般控制項修改其Name、Text ( 但文字預設不會顯示) 等屬性。例如我們可將剛才建立的按鈕名稱 (Name) 設為 "StartButton"。此外還有一項實用的屬性TooltipText, 此屬性代表滑鼠指標移到按鈕上時,自動顯示的『提示文字』：

80 工具列

81 工具列 請用同樣的方式加入第 2 個按鈕, 並以圖檔 Stop.bmp 當成按鈕圖案, 同時將其 (Name) 屬性設為 "StopButton"、TooltipText 屬性設為 " 停止"：

82 工具列 工具按鈕被按下時也是觸發 Click 事件, 我們只要在 VB中, 於按鈕上雙按, 就會建立其 Click 事件程序。請建立 的Click 事件程序, 並輸入如下程式：

83 工具列

84 工具列 接著建立 的 Click 事件程序, 並輸入如下程式： 按[F5] 執行程式, 接著即可用工具列上的按鈕播放音樂,或停止播放了。

85 工具列 請替剛才建立的工具列加入一個暫停播放的按鈕, 讓使用者可暫停播放音樂。
在工具列上新增一個按鈕, 並將其 ( N a m e ) 屬性設為"PauseButton"。 建立 PauseButton 的 Click 事件程序, 並輸入如下程式碼：

86 12-5 狀態列 狀態列 (Status Bar) 也是許多應用程式會用到的使用者介面, 一般都會用狀態列來顯示應用程式的相關資訊、提示訊息等等。 在 VB 中, 要建立狀態列需使用 控制項, 其用法和主功能表、工具列相似, 加入表單後只是一個空的狀態列, 我們必須加入附屬的控制項, 才能在狀態列中顯示資訊。

87 狀態列 在播放程式中加入狀態列, 顯示目前播放進度 (時間) 以及檔案名稱。

88 狀態列 請開啟範例專案 Ch12-06 來練習：

89 狀態列 雙按工具箱中的 將狀態列加到表單中, 此控制項的 Dock 屬性預設值為 Bottom, 因此會自動列在表單最下方：

90 狀態列 狀態列中最常見的應用就是顯示文字訊息, 所以請依如下方式在狀態列加入一個 ToolStripStatusLabel 控制項, 並將其(Name) 屬性設為 "FileName"、 Text 屬性設為 "　" (一個空白字元)：

91 狀態列

92 狀態列 由於我們要顯示播放進度和檔案名稱, 所以再建立另一個 ToolStripStatusLabel 控制項, 並將 (Name) 屬性改為"PlayingTime"、Text 屬性設為 "　" ( 一個空白字元)：

93 狀態列 要顯示播放進度, 必須隨著播放的狀況, 定時更新狀態列上的進度文字, 所以請再加入一個 控制項：

94 狀態列 雙按 進入其 Click 事件程序, 這次要加入啟動計時器的相關程式, 以及在狀態列顯示檔名的程式碼：

95 狀態列 在 鈕的 Click 事件程序, 也同樣要有停止計時器的相關程式：

96 狀態列 最後我們要建立計時器 Timer1 的 Tick 事件程序, 我們要利用此事件定時更新狀態列上顯示的播放進度, 並顯示在狀態列的中。播放進度字串, 可直接由 AxWindowsMediaPlayer1.Ctlcontrols 的 currentPositionString 屬性取得：

97 狀態列 按[F5] 鍵執行程式, 按 鈕開始播放, 在狀態列上就會顯示播放的進度了。