1 / 59

第十四章 進階輸出入元件

第十四章 進階輸出入元件. 本書第三章已介紹 Form 、 Label 、 TextBox 及 Button 等最基本的輸出入元件 , 本章將繼續介紹一些可以提昇輸出入視覺效果的元件 , 例如 CheckBox 、 RadioButton 及 GroupBox 等 13 個進階元件 , 學習本章將可提昇介面的親和性。. 1 4 - 1 核取方塊 (CheckBox) 1 4 - 2 選項鈕 (RadioBut ton) 1 4 - 3 群組方塊 (GroupBox) 1 4 - 4 列表盒 (ListBox)

tiana
Download Presentation

第十四章 進階輸出入元件

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第十四章 進階輸出入元件 • 本書第三章已介紹Form 、Label 、TextBox 及Button 等最基本的輸出入元件, 本章將繼續介紹一些可以提昇輸出入視覺效果的元件, 例如CheckBox、RadioButton 及GroupBox 等13 個進階元件, 學習本章將可提昇介面的親和性。

  2. 1 4 - 1 核取方塊(CheckBox) • 1 4 - 2 選項鈕(RadioBut ton) • 1 4 - 3 群組方塊(GroupBox) • 1 4 - 4 列表盒(ListBox) • 1 4 - 5 下拉式清單(Combobox) • 1 4 - 6 水平捲軸(HScrollBar) 與垂直捲軸(VScrollBar) • 1 4 - 7 功能表(MainMenu) 與快速鍵功能表(Context Menu) • 1 4 - 8 圖片盒(Picturebox) • 1 4 -9 RichTextBox • 1 4 - 10 對話框 • 1 4 - 11 Timer • 1 4 - 12 Dat eT imePicke r • 1 4 - 13 Mon t hCa len da r • 習題

  3. 1 4 - 1 核取方塊(CheckBox) CheckBox 通常用來讓使用者點選某項功能的有無, 例如以下範例即可讓使用者點選文字是否表現粗體、斜體或含底線, 本物件的重要屬性如下： • Checked 屬性 記錄選項是否致能。 • Caption 屬性 標題。

  4. 範例14-1a • 示範CheckBox 的用法。

  5. 1 4 - 2 選項鈕(RadioBut ton) 前面14-1 節的CheckBox 可以點選多個選項, 但有些情況是僅能有一個選項致能, 就像收音機的音源選擇, 當您選CD 時, 不管原來的音源為何, 均會自動切掉, 當您繼續選Tape 時, CD 也會自動切掉, 這就是RadioButton 控制項的特性, 它具有排它性, 一次僅能一個選項成立。本物件的重要屬性如下： • Checked 屬性 記錄選項是否致能。

  6. 範例14-2a • 本例示範RadioButton 的使用。

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

  8. 範例14-3a • 示範GroupBox 的使用。

  9. 1 4 - 4 列表盒(ListBox) • ListBox 的主要功能是將使用者需要輸入的文字、數字, 預先放在ListBox,方便使用者直接點選, 以減少使用者鍵入文字、數字的困擾。於範例14-4a 中, 筆者以醫師開處方為例, 因目前大部分的程式均是醫師需鍵入藥品名稱或代碼, 本例則將處方於程式設計階段預先放入ListBox 中, 待醫師操作時, 只要點選藥品名稱與重量即可, 完全不用輸入藥品名稱或記憶代碼等工作, 於實務的應用, 應將全部藥品分門別類, 放於不同的ListBox, 以減少使用者目視搜尋藥品的時間。

  10. 範例14-4a • 試設計三個列表盒於表單：左邊放入藥品名稱、中間放入重量右邊放入患者所需處方藥品。當使用者依序按一下藥品名稱、重量後, 右邊列表盒即輸出藥品及重量; 當使用者按一下右邊處方藥品, 即應刪除該項指定藥品。

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

  12. 範例14-5a • 示範ComboBox 的用法。

  13. 1 4 - 6 水平捲軸(HScrollBar) 與垂直捲軸(VScrollBar) • HScrollBar 與VScrollBar 是兩種幾乎相同的元件, 其差別只是在於HScrollBar是水平放置, 而VScrollBar 則是垂直放置, 其它的屬性則都相同。此兩種元件最主要的功能為使用捲軸控制輸出的大小, 其使用方式請看範例14-6a 。

  14. 常用屬性 此兩種元件常用的屬性如下： • Value 屬性 取得或設定捲軸的值。 • Maximum 屬性 捲軸可移動的最大值。

  15. Minimum 屬性 捲軸可移動的最小值。 • LargeChange 屬性 當使用者用滑鼠按一下捲軸盒至捲軸端點箭頭鈕之間的區域時, 可移動捲軸, 而此移動的大小, 稱為LargeChange 。 • SmallChange 屬性 當使用者用滑鼠按一下捲軸盒至捲軸兩端的箭頭鈕時, 可令捲軸盒移動, 而此移動的大小, 稱為SmallChange 。

  16. 特殊事件 此兩種元件的特殊事件如下： • ValueChanged 事件 當捲軸值改變時, 產生此事件。 • Scroll 事件 當捲軸值改變時, 產生此事件。

  17. 範例10-6a • 示範捲軸的用法。

  18. 範例14-6b • 示範以3 個捲軸分別代表顏色的(R 、G、B), 並改變txt1 的背景顏色。

  19. 1 4 - 7 功能表(MainMenu) 與快速鍵功能表(Context Menu)

  20. 功能表(MainMenu) • 所有Windows 的應用程式均有功能表選單, 提供功能選單(例如File 、Edit 及Help) 及功能選項(如File 選單的New、Open 及Save 等選項), C#的MainMenu 即是協助使用者製作此功能表的物件。以下範例即是示範功能表的使用。

  21. 範例14-7a • 請以MainMenu 重作範例14-3a 的字型大小及邊界樣式設定。

  22. 快速鍵功能表(ContextMenu) • 當使用者按一下滑鼠右鍵時所出現的功能表, 稱為快速鍵功能表(ContextMenu)。其製作與編輯方式均同MainMenu, 唯一要注意的是ContextMenu製作完成之後, 要將啟動ContextMenu 物件的ContextMenu 屬性點選為ContextMenu, 請看以下範例說明。

  23. 範例14-7b • 製作快速鍵功能表。

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

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

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

  27. 範例14-8a • 示範PictureBox 圖片盒。

  28. 範例14-8b 影像的移動與縮放。 題目分析 • 1. 物件的Top 與Left 屬性是控制元件在表單的位置, 若要改變元件的位置, 只要重設這兩個屬性即可。 • 2. 物件的Height 與Width 屬性是控制元件的大小, 所以重設這兩個屬性值可改變元件的大小。 • 3. SizeMode 屬性若點選StretchImage, 則影像可配合元件的大小而調整大小。 • 4. Button 元件有一個Image 屬性可設定其圖示, 本例即利用四個Button 控制PictureBox 的上下左右移動, 為了使圖示能充分表現上下左右的效果, 筆者於c:\CsBook\ch14\ 資料夾中放入了四個箭號圖示供其設定。

  29. 1 4 -9 RichTextBox RichTextBox 元件提供比標準TextBox 元件更進階的功能。例如, 可直接載入或儲存文字檔, 不同區段的文字可有不同的字型與顏色設定等。本節將介紹如何以RichTextBox 元件實作一個簡單的文字處理器, 以下是幾個常用的屬性。 • SelectedText 屬性 取得或設定RichTextBox 中選取的文字。 • SelectionLength 屬性 取得或設定RichTextBox 中選取的字元數。 • SelectionStart 屬性 取得或設定選取文字的起點。

  30. SelectionFont 取得或設定目前文字選取範圍的字型。 • SelectionColor 取得或設定目前文字選取範圍的文字顏色。 以下是一些常用的方法。 • LoadFile 方法 將檔案載入RichTextBox 中, 其語法如下： public void LoadFile( string path, RichTextBoxStreamType fileType ) ; 其中path 是檔案名稱與路徑; fileType 是載入檔案的資料流類型, 此參數必須指定一個RichTextBoxStreamType 型別的資料流類型, 以下介紹3 種常用的資料流類型。 • PlainText 包含空格的純文字資料流。

  31. RichText RichText 格式(RTF) 的資料流。 • UnicodePlainText 以Unicode 編碼包含空格的純文字資料流。例如, 以下敘述可載入一純文字檔案, 其檔案路徑與名稱為"c:\CsBook\ch14\doc1.txt"。 richTextBox1.LoadFil e (" c: \ \ CsBook \ \ c h14 \ \ doc1. t x t " , RichTextBoxStreamType.PlainText); • SaveFile 方法 將RichTextBox 的內容儲存至檔案, 其語法如下： public void SaveFile( string path, RichTextBoxStreamType fileType ) ; 其中path 與fileType 同上述的LoadFile 方法。例如, 以下敘述可將RichTextBox 的內容, 以純文字的類型儲存, 其檔案路徑與名稱為"c:CSBookch14doc2.txt"。 richTextBox1. SaveFile (" c : \ \ CsBook \ \ ch14 \ \ doc1. t x t " , RichTextBoxStreamType.PlainText);

  32. Copy 方法 將RichTextBox 中目前選取範圍的文字複製到剪貼簿中。例如, 以下敘述可在richTextBox1 物件中複製目前選取文字。 r i c hTe x tBo x 1 .C o p y ( ) ; • Cut 方法 將RichTextBox 中目前選取範圍的文字移到剪貼簿中。例如, 以下敘述可在richTextBox1 物件中剪下目前選取文字。 r i c h T e x t Bo x 1 .C u t ( ) ; • Paste 方法 將剪貼簿的內容貼入RichTextBox 中。例如, 以下敘述可在richTextBox1物件中執行貼上的動作。 r i c h Te x tB o x 1 . P a s t e ( ) ;

  33. SelectAll 方法 選取RichTextBox 中所有的文字。例如, 以下敘述可選取richTextBox1 物件中的所有文字。 r i c h T e x t b o x 1 . S e l e c t Al l ( ) ; • Undo 方法 將RichTextBox 中上次的編輯作業復原。例如, 以下敘述可復原richTextBox1 物件最近一次的編輯作業。 r i c hTe x t B o x 1 . Undo ( ) ;

  34. Find 方法 搜尋RichTextbox 內容中的文字, 共有7 種多載, 在此僅介紹最常用的一種, 其語法如下： public int Find( string str ) ; 在RichTextBox 中搜尋指定字串, 若找到則傳回符合該字串第一個字元的位置, 否則傳回負值。例如, 以下敘述可在richTextBox1 物件中搜尋字串"Rich"。 r i c hT e x t B o x 1 . F i n d ( "R i c h " ) ; • Focus 方法 設定RichTextBox 的輸入焦點。例如, 以下敘述可於找到"Rich" 字串後,將其設為輸入焦點。 richTextBox1.SelectionStart = richTextBox1.Find("Rich"); richTextBox1.SelectionLength = "Rich".Length; r i c hT e x tB o x 1 . F o c u s ( ) ;

  35. 範例14-9a • 示範RichTextBox 的使用。

  36. 1 4 - 10 對話框 • 在前面章節的程式中, 不論是取檔或存檔以及設定字型等動作, 都是在程式中直接鍵入檔名或字型來完成上述的功能, 如此不僅缺乏彈性, 也尚失了Windows 程式所擁有的高互動性精神, 本節所要介紹的對話框, 即為改善上述缺點, 學會本章的內容, 將可使讀者開發更具互動性的程式。本節將介紹OpenFileDialog (取檔)、SaveFileDialog (存檔)、FontDialog (字型)、ColorDialog (顏色) 等常用的對話框。

  37. OpenFileDialog • OpenFileDialog 可讓使用者透過對話框取得檔案路徑與名稱, 它可取各種類型檔案, 但一般在使用時皆會設定Filter 屬性, 控制所能截取的檔案類型。下圖為OpenFileDialog 對話框。

  38. SaveFileDialog • SaveFileDialog 可讓使用者透過對話框設定儲存檔案的路徑與名稱, 它可設定任何檔案類型, 但一般都會視實際需要而設定Filter 屬性, 控制使用者可存檔類型。下圖為SaveFileDialog 對話框。

  39. 常用屬性與方法 關於以上兩種檔案對話框的常用屬性與方法說明如下： • FileName 屬性 所欲存取的檔案名稱, 若於檔案對話框選取檔案, 會傳回一包含路徑與副檔名的檔名字串; 若沒有選取任何檔案則傳回空字串("")。

  40. Filter 屬性 檔案過濾屬性, 可指定所要存取的檔案類型, 例如上圖之OpenFileDialog對話框, 就設定了BMP 、JPG 及GIF 等3 種檔案類型, 此時使用者在對話框中僅能看見此3 種類型的檔案。以下敘述將示範Filter 屬性的設定方式, 其中說明敘述與篩選條件以及不同篩選項目都以垂直線(|) 隔開; 其次, 同一篩選項目的條件中, 若有多種檔案類型, 可以分號(;) 相隔。 openFileDialog1.Filter = " 影像檔(*.BMP;*.JPG;*.GIF) | *. B M P ; * . JPG; * .GI F | 所有檔案(*.*) | * . * " ;

  41. FilterIndex 屬性 取得或設定檔案對話框中目前所選取之篩選條件的索引編號。 • DefaultExt 屬性 取得或設定預設的副檔名。 • ShowDialog 方法 開啟對話框, 如果使用者按一下對話框中「確定」, 則傳回DialogResult.OK; 否則傳回DialogResult.Cancel 。例如, 以下敘述可開啟openFileDialog1 物件的對話框, 若使用者按下「確定」, 則將檔案載入。 if (openFileDialog1.ShowDialog() == DialogResult.OK) { pictureBox1.Image = Image.FromFile(openFileDialog1.FileName); }

  42. 範例14-10a • 同範例14-8a, 但使用檔案對話框存取影像檔案。

  43. FontDialog FontDialog 如右圖,是一個字型設定的對話框, 其常用的屬性與方法如下： • Color 屬性 取得或設定選取字型的顏色。

  44. Font 屬性 取得或設定選取的字型。 • ShowEffects 屬性 是否顯示指定刪除線、底線和文字色彩等選項。例如, 上圖是字型對話框的ShowEffects 屬性設定為True 的結果; 下圖是ShowEffects 設定為False的結果。

  45. ShowApply 屬性 於對話框中是否顯示" 套用" 按鈕。例如, 右圖含有套用鈕, 上圖則無。

  46. ShowDialog 方法 開啟對話框, 其使用方式與檔案對話框相同, 讀者可參考前面OpenFileDialog 的介紹。例如, 以下程式可將RichTextBox 元件中所選取的文字重設字型。 / / 設定字型 private void mFont_Click(object sender, System.EventArgs e) { f o n tDi a l o g 1 . C o l o r = r i c hTe x tB o x 1 . F o r eC o l o r ; f o n tDi a lo g 1 . F o n t = r i c h Te x tB o x 1 . F o n t ; f o n tDi a l o g 1 . S ho w Ef f e c t s = t r u e ; f o n tDi a l o g 1 . S h o w A p p l y= t r u e ; if(fontDialog1.ShowDialog() == DialogResult.OK) { / / 將當前選定的文字改變字型 r i c hTextBox1.Se l e c t i o n F o n t = f o n tDi a l o g 1 . F o n t ; / / 將當前選定的文字改變顏色 richTextBox1.SelectionColor =fontDialog1.Color; } }

  47. ColorDialog • ColorDialog 如右圖,可以用來設定物件的顏色, 其常用的屬性和方法如下：

  48. Color 屬性 取得或設定使用者所選取的色彩。 • AllowFullOpen 屬性 禁止或啟用自訂色彩按鈕, 下圖左是設定為True 的結果; 下圖右是設定為False 的結果。

  49. FullOpen 屬性 當開啟對話框時, 是否可以看到對話框中用來自訂色彩的部份, 下圖是設定為True 的結果, 上圖左是設定為False 的結果, 使用者必須點選「定義自訂色彩按鈕」才可看到下圖的結果。

  50. ShowDialog 方法 其使用方式同OpenFileDilog 。例如, 以下程式可設定RichTextBox 元件的背景顏色。 / / 設定背景顏色 private void mColor_Click(object sender, System.EventArgs e) { c o l o r Di a lo g 1 . Al l owF u l lOp e n= t r u e ; c o l o rDi a l o g 1 . F u l lOp e n = t r u e ; colorDialog1.Color= richTextBox1.BackColor; if (colorDialog1.ShowDialog() == DialogResult.OK) { richTextBox1.BackColor = colorDialog1.Color; } }

More Related