進階輸出入元件

1. 進階輸出入元件 本書第三章已介紹 Form 、Label 、TextBox 及 Button 等最基本的輸 出入控制項, 本章將繼續介紹一些可以提昇輸出入視覺效果的控制項, 例 如 CheckBox、RadioButton 及 GroupBox 等 13 個進階元件, 學習本章將可提昇輸出入介面的親和性。 1 4 - 1核取方塊 (CheckBox) 1 4 - 8 圖片盒 (Picturebox) 1 4 - 2 選項鈕 (RadioButton) 1 4 -9 RichTextBox 1 4 - 3 群組方塊 (GroupBox) 1 4 - 10 對話框 1 4 - 5 下拉式清單 (ComboBox) 1 4 - 11 Timer 1 4 - 12 Da teTimePicke r 1 4 -6 水平捲軸 (HScrollBar) 與垂直捲軸 (VScrollBar) 1 4 - 7 功能表與工具列

2. 1 4 - 1核取方塊 (CheckBox) CheckBox 通常用來讓使用者點選某項功能的有無, 例如以下範例 即可讓使用者點選文字是否表現粗體、斜體或含底線, 本控制項的常用 屬性如下： Checked 屬性 記錄選項是否致能。 Caption 屬性 標題。 範例 14-1a 示範 CheckBox 的用法。 操作步驟 1. CheckBox 位於工具箱的通用控制項標籤。 2. 安排一個 TextBox, 其 Name 屬性設為 txt1, 如下頁圖。 3. 安排二個 CheckBox, 其 Name 屬性分別設為 chkBold 及 chkItalic, 如 下圖右。

3. 執行結果 1. 程式執行之初, 畫面如右圖, 文字型態為 非粗體及非斜體。 2. 按一下 chkBold, TextBox 文字已呈現粗體, chkBold 並自動打勾, 如 下圖左。 3. 再按一下 chkBold, TextBox 文字恢復為一般, chkBold 的勾號自動 消失, 如上圖。

4. 4. checkBox 勾號的存在與否是 C# 自動完成, 勾號存在時, 表示選中此項 功能, CheckBox 的 Checked 屬性值為 True; 勾號消失時, 表示無此功能,其 Checked 屬性值為 False。 5. 下圖右是同時勾選 chkBold 及 chkItalic 的畫面。

5. 程式列印

6. 程式說明 1. 本程式中兩個 CheckBox 所要處理的事件程序是完全相同, 故可共用同 一事件, 其設定方式為在完成 chkBold_Click 事件程序後, 選取 chkItalic 物件, 並切換至事件視窗, 然後按一下 Click 事件旁邊的選取箭頭, 如右 圖所示, 選取 chkBold_Click 事件程序, 即可完成設定。 2. 關於 Font 類別的詳細說明, 請查閱 16_3 節的 Font 類別。

7. 1 4 - 2 選項鈕 (RadioButton) 前面 14-1 節的 CheckBox 可以點選多個選項, 但有些情況是僅能有一個 選項致能, 就像收音機的音源選擇, 當您選 CD 時, 不管原來的音源為何, 均 會自動切掉, 當您繼續選 Tape 時, CD 也會自動切掉, 這就是 RadioButton 控制 項的特性, 它具有排它性, 一次僅能一個選項成立。本物件的重要屬性如下： Checked 屬性 記錄選項是否致能。 範例 14-2a 本例示範 RadioButton 的使用。 表單配置 1. 本例共安排三個 RadioButton 如下圖左, 其 Name 分別設為 rab8、rab12 及 rab18 。 2. 安排一個 TextBox, 其 Name 屬性設為 txt1, 如下圖左。

8. 執行結果 1. 程式執行之初, 預設字型大小為 12, 如下圖右。

9. 2. 按一下 rab18, 畫面如下圖左, rab12 自動除能。 3. 按一下 rab8, 畫面如下圖右, rab18 亦自動除能。 4. 字型大小僅能一項成立, 所以特別適用 RadioButton 。

10. 程式列印

11. 程式說明 1. Checked 屬性。 Checked 屬性記錄 RadioButton 選項成立與否, 在眾多的 RadioButton 中, 只能有一個為 True, 當其中一個選項有黑點時, 其它選項均會自動清 除。 2. txt1.Font=new Font (txt1.Font.Name, 12, txt1.Font.Unit); 以上敘述是指定一個 Font 物件給 txt1 物件的 Font 屬性, 該 Font 物件的 建構子分別傳入字型名稱、字型大小及字型大小的單位來初始化 Font 物件。(關於 Font 類別的詳細說明, 請看 16-3 節) 3. rab12.Checked=true; 於眾多 radioButton 中應先預設某一個 RadioButton 為 True, 其餘為 False。 4. 當 RadioButton 被按一下時, 程式設計者要處理的是此選項所要處理的 事即可, 至於其它選項的清除則由 C# 代勞。

12. 1 4 - 3 群組方塊 (GroupBox) GroupBox 能夠將同一表單上的元件分成不同的群組, 例如, 於同一表 單僅能有一個 RadioButton 選項為 True, 若有兩組 RadioButton 要在同一表單 出現, 則應搭配本節所要介紹的 GroupBox 控制項, 以下將透過範例 14-3a 介紹 GroupBox 的使用。 範例 14-3a 示範 GroupBox 的使用。

13. 操作步驟 1. 安排一個 TextBox 及兩個 GroupBox, 其屬性設定如下表所示： 完成上述設定後其結果如下圖所示。

14. 2. 在 gbSize (GroupBox) 與 gbBorderStyle (GroupBox) 中各放入 3 個 RadioButton, 其屬性設定如下表所示。 完成上述設定後, 其結果如下圖所示

15. 3. 分別在上述 6 個 RadioButton 的 Click 事件鍵入以下相對應的程式。

16. 4. 在程式執行時, 設定選項初值, 程式碼鍵入如下。

17. 執行結果 1. 下圖左是程式執行時的初始畫面, 有兩組選項。 2. 下圖右是個別操作每一組選項的結果。

18. 1 4 - 4 列表盒 (ListBox) ListBox 的主要功能是將使用者需要輸入的文字、數字, 預先放在 ListBox, 方便使用者直接點選, 以減少使用者鍵入文字、數字的困擾。於 範例 14-4a 中, 筆者以醫師開處方為例, 因目前大部分的程式均是醫師需鍵 入藥品名稱或代碼, 本例則將處方於程式設計階段預先放入 ListBox 中, 待 醫師操作時, 只要點選藥品名稱與重量即可, 完全不用輸入藥品名稱或記 憶代碼等工作。其次, 於實務的應用, 應將全部藥品分門別類, 放於不同的 ListBox, 以減少使用者目視搜尋藥品的時間。 範例 14-4a 試設計三個列表盒於表單：左邊放入藥品名稱、中間放入重量、右 邊放入患者所需處方藥品。當使用者依序按一下藥品名稱、重量後, 右邊 列表盒即輸出藥品及重量; 當使用者按一下右邊處方藥品, 即應刪除該項 指定藥品。

19. 執行結果 1. 下圖左是程式執行畫面, 使用者只要依序點選藥品名稱與重量後, 藥品 名稱即會出現在右邊的 lstOut 。 2. 下圖右是按一下右邊" 木瓜*1", 電腦自動刪除" 木瓜*1" 的畫面。

20. 操作步驟 1. 表單配置如上圖左, 分別安排三個 ListBox, 其 Name 屬性分別設為 lstDrug、lstWeight 及 lstOut。 2. 將選項放入 ListBox。 (1) 選項放入的方式有兩種方式, 分別是使用屬性視窗設定或撰寫程 式設定。 (2) 下圖左是於屬性視窗, 按一下 Items 右邊的省略按鈕 所鍵入的藥品選項。 (3) 下圖右是撰寫程式放入的重量選項。

21. 3. 填寫 lstDrug_SelectedIndexChanged 事件程式。 (1) 其程式如下： (2) 當 ListBox 某個選項被選取時, 將反應在下列二個屬性： SelectedIndex：被選取的索引值, 索引值從 0 開始。 SelectedItem：被選取項目的內容。 (3) 本例即是將被選取的文字內容交由表單區域變數 Drug, 並順便以 表單的標題印出。 (4) 上式程式的執行結果如下圖左, 請留意標題。

22. 4. 鍵入 lstWight_SelectedIndexChanged 事件程式 (1) 其程式碼如下： (2) 以上程式的執行結果如下圖右, lstOut 已新增一個項目。

23. 5. 鍵入 lstOut_SelectedIndexChanged 事件程式。 (1) 其程式如下： (2) 以上事件程式, 可將使用者所點選的項目刪除。 (3) 刪除某項目的語法如下, 其中 index 為該項目的索引值。

24. 程式列印

26. 1 4 - 5 下拉式清單 (ComboBox) ComboBox 是一種結合 ListBox 與 TextBox 的輸入控制項, 使用者於 ComboBox 中所點選的項目, 可以直接放入 Text 屬性, 因此可以簡化程式的 撰寫, 但 ComboBox 一次只能點選一個項目, 因此特別適用一次只點選一 個項目的場合。其待選項目 (Items) 亦可使用屬性視窗或撰寫程式設定, 其 方法同上一小節的 ListBox 。 範例 14-5a 示範 ComboBox 的用法。

27. 操作步驟 1. 於表單上放置二個 Label 及一個 ComboBox 元件, 其屬性設定如下：

28. 2. 完成以上設定, 表單配置如下圖左。 執行結果 下圖右是於 ComoBox 點選 "Red", lblOut 的文字變為紅色的結果。

29. 程式列印

30. 1 4 -6 水平捲軸 (HScrollBar) 與垂直捲軸 (VScrollBar) HScrollBar 與 VScrollBar 是兩種幾乎相同的元件, 其差別只是在於 HScrollBar 是水平放置, 而 VScrollBar 則是垂直放置, 其它的屬性則都相 同。此兩種元件最主要的功能為使用捲軸控制輸出的大小, 其使用方式請看範例 14-6a 。 常用屬性 此兩種元件常用的屬性如下： Value 屬性 取得或設定捲軸的值。 Maximum 屬性 捲軸可移動的最大值。 Minimum 屬性 捲軸可移動的最小值。 LargeChange 屬性 當使用者用滑鼠按一下捲軸盒至捲軸端點箭頭鈕之間的區域時, 可移 動捲軸, 而此移動的大小, 稱為 LargeChange 。

31. SmallChange 屬性 當使用者用滑鼠按一下捲軸盒至捲軸兩端的箭頭鈕時, 可令捲軸盒移 動, 而此移動的大小, 稱為 SmallChange。 特殊事件 此兩種元件的特殊事件如下： ValueChanged 事件 當捲軸值改變時, 產生此事件。 Scroll 事件 當捲軸值改變時, 產生此事件。 範例 14-6a 示範捲軸的用法。

32. 表單配置 如下圖。 物件說明 本例共使用一個 HScrollBar、一個 TextBox 及一個 Button, 表列如下：

33. 執行結果 1. 當使用者改變捲軸值 (拖曳或按一下捲軸任何位置均可), 如下圖左的 滑鼠指標位置稱為 SmallChange, 及下圖右的滑鼠指標位置稱為 LargeChange, 均會改變 Value 屬性值, 並由 txt1 輸出。 2. 本例僅將 Value 屬性值印出, 實務的應用亦可由 Value 控制其它的變數 或屬性, 如範例 14-6b 的顏色設定。

34. 程式列印 本例程式設計者, 只要交待 Value 改變時所要處理的事, 至於使用者 改變捲軸值時, 捲軸的移動則由 C# 負責。

35. 1 4 - 7 功能表與工具列 C#2005 起新增 MenuStript、ContextMenuStrip、ToolStript 及 StatusStript等四個功能表與工具列控制項, 用來取代 MainMenu 、ContextMenu 、ToolBar 及 StatusBar 等控制項, 但是原有程式若使用舊的控制項, 亦可繼續使用原控制項, 而不必重新改寫程式, 若還是要使用舊的控制項, 則可點選工具箱快顯功能表的 "選擇項目", 自行加入以上舊式控制項。 M e n u S t r i p t MenuStript 的主要功能就是製作功能表, 請看以下範例說明。 範例 14_7a 請完成如下表的功能表。

36. 操作步驟 1. 幫每一選單及選項設定 Name 與 Text。本例將以上功能表的 Name 與 Text 規定如下：(括號內為 Name, 括號外為 Text) 2. 插入 MenuStrip 控制項。本例於工具箱的 MenuStrip 圖示按兩下, 表單 畫面如下圖, 已新增一個 MenuStrip1 的物件。

37. 3. 逐一依照上面的階層架構, 於 MenuStrip 控制項新增所需要的 ToolStripMenuItem 控制項。 (1)、請於下圖左依序點選 8 個 MenuItem, 下圖右是新增一個 MenuItem 之後的畫面, 已新增一個 toolStripMenuItem1 物件。 (2)、下圖左是新增 8 個 ToolStripMenuItem 控制項的畫面, 其物件名稱分別預設為 ToolStripMenuItem1~8

38. 4. 修改上面 8 個 ToolStripMenu 控制項的 Name 與 Text 屬性。本例表單畫面如下圖。

39. 5. 於 8 個 ToolStripMenu 控制項的 Click 事件撰寫程式。本例程式撰寫如下：

41. 執行結果 補充說明 1. 如何於每一選項新增快速鍵？ 請於每一物件的 ShortcutKeys 屬性點選所需的快速鍵, 如下圖左, 其執 行結果如下圖右。

42. 2. 如何為選項新增打勾的效果？ 請將物件的 Checked 屬性點選 true 。 ContextMenuSt r i p ContextMenuStrip 的主要功能就是製作快顯功能表, 其效果如下圖, 請 自行開啟範例 14_7b 。 ToolStrip ToolStrip 的主要功能是提供工具列。其次, 工具列的表現有兩種方式, 分別是文字與圖示, 例如下圖共有兩個工具列按鈕, 其表現方式分別是文 字與圖示。 StatusStrip StatusStrip 的主要功能是製作狀態列。

43. 1 4 - 8 圖片盒 (Picturebox) PictureBox 元件可用來展示 Bitbmps (*.bmp)、Icons (*.ico)、Enhanced Metafiles (*.emf)、Metafiles (*.wmf) 及 JPEG (*.jpg 或*.jpeg) 等圖片, 其常用屬性如下： BorderStyle 屬性 PictureBox 外框的樣式, 共有 3 種型式, 分別是 None 、FixedSingle 及Fixed3D, 讀者可自行測試, 了解其變化。 Image 屬性 取得或設定 PictureBox 顯示的影像。 SizeMode 屬性 指示如何顯示影像, 共有 4 種模式, 分別介紹如下：

44. Normal 影像放置在 PictureBox 的左上角, 如果影像大於包含它的 PictureBox, 就 會被裁剪, 如下圖左所示。 AutoSize 將 PictureBox 的大小調整為與其所包含影像的大小, 其效果如下圖右所示。

45. CenterImage 如果 PictureBox 大於影像, 顯像即置中顯示, 如果影像大於 PictureBox, 圖片即放在 PictureBox 中央, 而外緣被裁剪, 如下圖左所示。 StretchImage PictureBox 內的影像會延伸或縮小, 以調整為最適合 PictureBox 的大小, 如下圖右所示。

46. 範例 14-8a 示範 PictureBox 圖片盒。 操作步驟 1. 於表單放置 PictureBox 元件。 2. 如何於設計階段載入影像檔案？ 於 Image 屬性的省略按鈕 按一下, 畫面出現開啟檔案視窗, 如下 圖。PictureBox 於設計階段共可載入*.bmp 、*.gif 、*.jpg 、*.jpeg 、*.ico 、*.png 及*.wmf 等型態的檔案。

47. 3. 如何於執行階段載入影像檔或儲存檔案？本例直接鍵入檔名, 第 14-10節將介紹對話框存取影像檔案。請於相關事件鍵入以下程式。

50. 1 4 -9 RichTextBox RichTextBox 控制項提供比標準 TextBox 控制項更進階的功能。例如, 可直接載入或儲存文字檔, 不同區段的文字可有不同的字型與顏色設定 等。本節將介紹如何以 RichTextBox 控制項實作一個簡單的文字處理器, 以 下是幾個常用的屬性。 SelectedText 屬性 取得或設定 RichTextBox 中選取的文字。(用滑鼠拖曳後, 反白的文字 稱為選取) SelectionLength 屬性 取得或設定 RichTextBox 中選取的字元數。 SelectionStart 屬性 取得或設定選取文字的起點。 SelectionFont 取得或設定目前文字選取範圍的字型。