第十章 進階輸出入元件(一) StringGrid 10-1 核對框（CheckBox）

Presentation on theme: "第十章 進階輸出入元件(一) StringGrid 10-1 核對框（CheckBox）"— Presentation transcript:

1 第十章 進階輸出入元件(一) 10-10 StringGrid 10-1 核對框（CheckBox）
第十章 進階輸出入元件(一) 10-10 StringGrid 10-11 DriveComboBox、DirectoryListBox、 FileListBox及FilterComboBox 10-12 Timer 10-13 Shape 10-14 BitBtn 10-15 SpeedButton 10-16 Chart 10-17 Animate 10-1 核對框（CheckBox） 10-2 選項鈕（RadioButton） 10-3 選項鈕群（RadioGroup） 10-4 列表盒（ListBox） 10-5 雙併盒（ComboBox） 10-6 捲軸（ScrollBar） 10-7 功能表與快顯功能表 (PopupMenu) 10-8 影像盒（Image） 10-9 對話框

2 本書第三章已介紹Form、Label、Edit及Button等最基本的輸出入元件，本章將繼續介紹一些可以提昇輸出入視覺效果的元件，例如CheckBox、RadioButton及RadioGroup等17個進階元件，學習本章將可提昇使用介面的親和性。

3 10-1 核對框（CheckBox） CheckBox 通常用來讓使用者點選某項功能的有無，例如以下範例即可讓使用者點選文字是否表現粗體、斜體或含底線，本物件的重要屬性如下： Checked屬性 記錄選項是否致能。 Caption 屬性 標題。

4 範例10-1a 示範CheckBox的用法。 程式說明: 1. Checked屬性。 Checked屬性用於記錄CheckBox勾號的有無。
2. 勾號的有無及Checked屬性值的變化均是Delphi協助處理，程式設計者所要處理的是Checked屬性值變化時所需處理的事即可。

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

6 範例10-2a 本例示範RadioButton的使用。 程式說明: 1. Checked屬性。
Checked屬性記錄RadioButton選項成立與否，在眾多的RadioButton中，只能有一個為True，當其中一個選項有黑點時，其它選項均會自動清除。 2. rab12.Checked:=true; edi.Font.Size:=12; 於眾多RadioButton中應先預設某一個RadioButton為True，其餘為False。 3. 當RadioButton被按一下時，程式設計者要處理的是此選項所要處理的事即可，至於其它選項的清除則由Delphi代勞。

7 10-3 選項鈕群（RadioGroup） 於同一表單僅能有一個RadioButton選項為True，若有兩組的RadioButton要在同一表單出現，則應使用本節所要介紹的RadioGroup。 例如範例10-3a在同一表單需使用兩組選項鈕分別設定Edit1的字型大小及邊界樣式，此時即可使用RadioGroup元件。

8 範例10-3a 示範RadioGroup的使用。

9 自我練習: 1. 元件盤中Standard標籤的GroupBox及Panel亦有分組的功能，請讀者自行揣摩練習，完成範例10-3a程式的功能。

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

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

12 10-5 雙併盒（ComboBox） ComboBox是一種結合ListBox與Edit的輸入控制項，使用者於ComboBox中所點選的項目，可以直接放入Text屬性，因此可以簡化程式的撰寫，但ComboBox一次只能點選一個項目，因此特別適用一次只點選一個項目的場合。其待選項目（Items）亦可使用屬性視窗或撰寫程式設定，其方法同RadioGroup或ListBox，以下範例將用ComboBox讓使用者點選其職業。

13 範例10-5a 請寫一個程式，可以讓使用者依序輸入姓名、職業及性別，其中職業的輸入方式為事先將所有可能的職業放在ComboBox，讓使用者點選。 元件名稱 物件類別 屬性 屬性值 說　　　明 Edit1 TEdit Name 輸入姓名 ComboBox1 TComboBox 點選職業 Items RadioGroup1 TRadioGroup 點選性別 Columns 2 設定選項排列的行數 btnIn TButton 執行輸入資料 Caption 輸入 btnClose 結束 StringGrid1 TStringGrid 以二維的表格輸出結果 Colcount 4

14 10-6 捲軸（ScrollBar） ScrollBar的功能為使用捲軸控制輸出的大小，其使用方式請看範例10-6a，本物件特殊屬性如下：
Kind屬性 捲軸的擺設方向，有水平與垂直兩種，其值如下： sbHorizontal（以水平方式呈現捲軸）。 sbVertical（以垂直方式呈現捲軸）。 Position屬性 設定捲軸的值。 Max屬性 捲軸可移動的最大值。 Min屬性 捲軸可移動的最小值。

15 LargeChange屬性 當使用者用滑鼠按一下捲軸盒至捲軸端點箭頭鈕之間的區域時，可移動捲軸，而此移動的大 小，稱為LargeChange。 SmallChange屬性 當使用者用滑鼠按一下捲軸盒至捲軸兩端的箭頭鈕時，可令捲軸盒移動，而此移動的大小，稱為SmallChange。 ScrollBar的特殊事件如下： OnChange事件 當捲軸值改變時，產生此事件。 OnScroll事件

16 範例10-6a 示範捲軸的用法。

17 範例10-6b 示範以3個捲軸分別代表顏色的（R、G、B），並改變Edit1的背景顏色。

18 10-7 功能表(MainMenu)與 快顯功能表(PopupMenu)
所有Windows的應用程式均有功能表選單，提供功能選單（例如File、Edit及Help）及功能選項（如File選單的New、Open及Save等選項），Delphi的MainMenu即是協助使用者製作此功能表的物件。 以下範例即是示範功能表的使用。

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

20 快顯功能表（PopupMenu） 當使用者按一下滑鼠右鍵時所出現的功能表，稱為快顯功能表（Popup- Menu）。其製作與編輯方式均同MainMenu，唯一要注意的是PopupMenu製作完成之後，要將啟動此PopupMenu物件的PopupMenu屬性點選為PopupMenu，請看以下範例說明。

21 範例10-7b 製作快顯功能表。

22 10-8 影像盒（Image） Image元件可用來展示Bitbmps（*.bmp）、Icons（*.ico）、Enhanced Metafiles（*.emf）、Metafiles（*.wmf）及JPEG（*.jpg或*.jpeg）等影像，若配合Canvas等繪圖方法，還可發展出一套類似小畫家的應用軟體。Image的常用屬性如下： Picture屬性 顯示圖片的檔名。 Stretch屬性 是否將影像的大小與元件大小同步。預設值為False，如下圖左， 原影像若比元件還大，則超出的部分不予顯示；若設為True，則是自動調整影像大小而填滿整個元件，如下圖右，此種方式可藉由調整元件的大小（Width與Height）來放大或縮小影像。 AutoSize屬性 是否將元件的大小配合影像的大小，預設值為False，也就是當影像超出控制項大小時，將有部份影像不顯示，如下圖左；若設為True，則是自動調整元件大小以配合影像的尺寸，如下圖右。（請留意表單已出現捲軸）

23 範例10-8a 示範Image影像盒。

24 範例10-8b 影像的移動與縮放。 物件說明: 物件名稱 物件類別 屬性 值 說 明 Image1 TImage btnBig
說　　　　明 Image1 TImage Name Stretch true btnBig TBitBtn 放大鍵 Caption 放大 btnUp 上移鍵 Picture arrow1u btnDown 下移鍵 arrow1d btnLeft 左移鍵 arrow1l btnRight 右移鍵 arrow1r btnSmall 縮小鍵 縮小

25 10-9 對話框 Delphi的對話框元件， 共有OponDialog（取檔）、SaveDialog（存檔）、OpenPictureDialog（取影像檔）、 SavePictureDialog（存影像檔）、 FontDialog（字型）、ColorDialog（顏色）、PrintDialog（印表）、PrintSetup Dialog （印表機設定）、FindDialog（尋找文字）、 ReplaceDialog（尋找文字）等。

26 OpenDialog與OpenPictureDialog
OpenDialog與OpenPictureDialog都是取檔對話框，其中OpenDialog、OpenPictureDialog，兩者都可取任何類型檔案，但是後者多了影像預覽功能，以及已預設Filter屬性為影像檔案，可專門用來取得影像類別的檔案。

27 SaveDialog與SavePictureDialog
SaveDialog與SavePictureDialog都是用來存檔的對話框，但是後者的Filter屬性已預設為影像檔案，但SaveDialog與OpenDialog的Filter都是空白，須由程式設計者自行設計。

28 FileName屬性 Filter屬性 FilterIndex屬性 DefaultExt屬性 Options屬性 Execute( )方法
關於以上四種檔案對話框的常用屬性說明如下： FileName屬性 所欲存取檔案的名稱。其次，若欲得到檔案的進一步資訊，可使用以下函式協助 ExtractFileName( )：取出之檔名。 ExtractFileExt( )：取出副檔名。 ExtractFilePath( )：取出完整路徑。 ExtractFileDir( )：取出所在目錄。 ExtractFileDrive( )：取出所在磁碟機。 Filter屬性 檔案過濾屬性，可指定所要存取的檔案類型，上圖是OpenPictureDialog 的預設屬性，共預設六種檔案類型。 FilterIndex屬性 傳回使用者使用檔案過濾屬性的索引編號。 DefaultExt屬性 設定檔案對話框的預設副檔名。 Options屬性 雜項設定。 Execute( )方法 開啟所有對話框所使用的方法，其語法如下： 物件.Execute() 若對話框順利執行，則上式傳回True，因此在實務的應用上應在上式加一個if敘述，若if條件成立時才執行存取檔動作，如此可避免使用者沒有正確回應對話框的內容，但卻執行存檔，而造成當機。

29 範例10-9a 同範例10-8a，但使用檔案對話框存取影像檔案。 程式說明: 1. 取檔時，FileName屬性可得檔案的全名。
“使用者所輸入的主檔名” + “使用者所點選的檔案類型” 其中使用者所輸入的主檔名可由FileName屬性傳回， 而使用者所點選的檔案類型可由FilterIndex屬性傳回， 所以本例使用字串陣列a，作一個副檔名對照表， 完整的檔名如下： FileName+a〔FilterIndex〕;

30 FontDialog FontDialog，是一個字型設定對話框，其常用屬性如下： Font屬性
記錄字型的字集（Charset）、字型名稱（Name）、字型樣式（Style）、大小（Size）、顏色（Color）等，以上存取的方式為Font.Charset、Font.Name等。 Device屬性 設定選取螢幕字型（fdScreen）、印表機字型（fdPrinter）或是兩者皆要（fdBoth）。 Options屬性 雜項設定。 以下程式可以將RichEdit元件內所選定的文字（使用者拖曳元件內的部份文字使之反白，稱為選定）重設字型。 //字型設定 procedure TForm1.btnFontClick(Sender: TObject); begin FontDialog1.Execute; RichEdit1.SelAttributes.Charset:=FontDialog1.Font.Charset; RichEdit1.SelAttributes.Name:=FontDialog1.Font.Name; RichEdit1.SelAttributes.Style:=FontDialog1.Font.Style; RichEdit1.SelAttributes.Size:=FontDialog1.Font.Size; RichEdit1.SelAttributes.Color:=FontDialog1.Font.Color; //SelAttributes 使用者所選定的範圍 end;

31 ColorDialog ColorDialog，可以用來設定物件的顏色，其常用屬性為Color。
以下程式可以設定RichEdit元件的背景。 //背景顏色設定 procedure TForm1.btnColorClick(Sender: TObject); begin if ColorDialog1.Execute then RichEdit1.Color:=ColorDialog1.Color; end;

32 PrintDialog PrintDialog，可以提供印表的參數設定，PrintDialog與PrintSetup Dialog都是直接呼叫Windows系統的PrintDialog與PrintSetupDialog對話框，所以不用再傳遞任何參數，即可執行使用者於對話框的任何設定。 以下程式可以啟動PrintDialog，若使用者有按一下“確定”，則可將RichEdit的內容交由印表機列印，RichEdit的列印方法如下： 物件.Print（常數字串） //列印 procedure TForm1.btnPrintClick(Sender: TObject); begin if (PrintDialog1.Execute) then RichEdit1.Print(Form1.Caption); end;

33 FindDialog與ReplaceDialog
FindDialog與ReplaceDialog會出現尋找與取代對話框，FindDialog對話框，ReplaceDialog，其常用屬性如下： FindText屬性 欲尋找的文字。 ReplaceText屬性 欲取代的文字。

34 FindDialog與ReplaceDialog與前面的對話框有些不同，其使用步驟如下：
1. 先用Execute( ) 啟動對話框，待使用者輸入字串。 2. 若使用者按一下對話框的“找下一個”，則系統啟動Find事件。 3. 若使用者按一下對話框的“取代”或“全部取代”，則系統啟動Replace事件。

35 範例10-9b 對話框的使用。

36 10-10 StringGrid StringGrid元件可以將資料以二維的表格方式呈現，其常用屬性下： ColCount屬性 行數。
RowCount屬性 列數。 FixedCols屬性 當捲軸捲動時，不被移動的行數 FixedRows屬性 當捲軸捲動時，不被移動的列數 Cells[n][m]屬性 第n行m列所欲填入的資料，其行列（n，m）座標如下： 以下範例示範將一個二維陣列填入StringGrid。 （0，0） （1，0） （2，0） （3，0） （0，1） （1，1） （2，1） （3，1） （0，2） （1，2） （2，2） （3，2）

37 範例10-10a 設有一個二維陣列初值如下，請將其填入StringGrid。 程式說明: 1. cells[j][i]:=a[i][j]
二維陣列的行列（n，m）關係如下，與StringGrid的行列關係不同，所以i，j的位置要對調。 座號 國文 英文 數學 平均 名次 不及格科數 1 50 60 70 2 30 40 3 80 90 （0，0） （0，1） （0，2） （0，3） （1，0） （1，1） （1，2） （1，3） （2，0） （2，1） （2，2） （2，3）

38 10-11 DriveComboBox、DirectoryListBox、 FileListBox及FilterComboBox
DriveComboBox（位於Win3.1標籤頁）稱為磁碟機雙併盒，它可以將使用者的所有磁碟機列出供使用者點選，其常用屬性如下： Drive屬性 使用者所點選的磁碟機編號。 DirList屬性 欲關聯的目錄列表盒。

39 DirectoryListBox DirectryListBox（位於Win3.1標籤頁）稱為目錄列表盒，它可以將指定磁碟機的所有目錄列出，其常用屬性如下： FileList屬性 欲關聯的檔案列表盒。 DirLabel屬性 欲關聯的Label控制項，該控制項可顯示使用者所點選的目錄全名。

40 FileListBox FileListBox稱為檔案列表盒，它可以將指定目錄的所有檔案列出，以下是FileListBox的常見屬性。
Mask屬性 指定只印出的副檔名稱類型，預設值為*.*。 MultiSelect屬性 是否同意檔案可複選，預設值為False。 FileEdit屬性 設定欲關聯的Edit元件，該元件可顯示使用者所點選的檔名。

41 FileType屬性 設定可顯示的檔案型態，其子選項有以下7個。 ftReadOnly： 唯讀檔案，預設值為False。 ftHidden： 隱藏檔案，預設值為False。 ftSystem： 系統檔案，預設值為False 。 ftDirectory： 子目錄檔案，預設值為False。 ftArchive： 可備份檔案，預設值為False。 ftNormal： 正常檔案，預設值為True。 使用DriveComboBox、DirectoryListBox及FileListBox等三個元件，並配合DirList、FileList、DirLabel、FileEdit及Mask等屬性，即可作出類似檔案總管的功能，請於物件檢視視窗完成以下設定 DriveComboBox1.DirList:=DirectoryList1 DirectoryListBox1.FileList:=FileListBox1 DirectoryListBox1.DirLabel:=Label1 FileListBox1.FileEdit:=Edit1 FileListBox1.Mask:=*.bmp

42 範例10-11a FileComboBox、DirectoryListBox及FileListBox示範。 物件說明: 以上屬性設定如下：
元件名稱 屬性 值 DriveComboBox1 DirList DirectoryListBox1 FileList FileListBox1 DirLebel Label1 FileEdit Edit1 Mask *.bmp Image1 Stretch True

43 FilterComboBox FilterComboBox元件的主要功能，是將前面的FileListBox加上檔案過濾效果，其常用屬性如下：
欲關聯的檔案列表盒。 Filter屬性 檔案過濾參數。 雖然FileListBox的Mask屬性亦可過濾檔案，但是FilterComboBox的使用較為靈活，請看以下範例。

44 範例10-11b 以FilterComboBox重作以上範例。

45 10-12 Timer Timer可用來執行某些週期性的工作，例如文字的閃爍、動畫的製作、或時鐘的顯示等。因為以上工作的特性，都是固定某一個週期，即要重複執行某一事件函式。其常用屬性如下： Interval屬性 設定Timer事件執行的週期，單位為千分之一秒 Timer的常用事件如下： Timer事件 每隔Interval的週期，均會自動執行此事件。

46 範例10-12a 示範Timer元件。

47 範例10-12b 請設計一個紅綠燈，其時序如下（T=500ms）：
0　1　2　3　4　5　6　7　8　9　10　11　12　13　14　15　16　17　18 綠燈 　　綠閃 　　 黃燈 　　　紅燈

48 10-13 Shape Shape元件可由Shape屬性表現各種不同的形狀，以下範例將示範其各種形狀，其常用屬性如下： Shape屬性
形狀，其常數共7個如下： stCircle：圓形。 stEllipse：橢圓。 stRectangle：矩形。 stRoundRect：圓角矩形。 stRowndSquare：圓角正方形。 stSquare：正方形。 Pen屬性 雜項設定，有以下子屬性。 Color：顏色。 Mode：重疊模式。 Style：線條樣式。 Width：線條寬度。

49 範例10-13a 示範Shape元件的各種形狀及顏色。

50 10-14 BitBtn BitBtn是一個功能與Button相近的元件，但比Button多一個屬性Glyph，此屬性可於控制項上放置圖項。
筆者點選“gwosheng.bmp”。其次，若不自己輸入圖項，亦可使用Kind屬性預設的12個現成圖項，筆者點選bkAll。

51 10-15 SpeedButton SpeedButton亦是與Button功能相近的元件，比較特殊的是多了一個GroupIndex屬性，此GroupIndex屬性預設值為0，表示各個按鈕獨立操作，程式設計者若將多個SpeedButton的GroupIndex的值設為相同，則他們與RadioButton（選項鈕）功能相近，具有同組互斥的功能。

52 範例10-15a 以SpeedButton重作10-2a的字型大小設定

53 10-16 Chart Chart是一個統計圖元件，它可以協助使用者迅速完成Line、Bar、Horiz.Bar、Area、Point、Pie、Fast Line、Shape、Gantt、Arrow及Bubble等圖形。 以下範例將示範如何繪製Bar Chart及以股價走勢圖繪製Fast Line Chart。

54 範例10-16a 設有員工業績如下，請繪製Bar Chart。 程式說明: 1. Series加入資料的語法如下：
Series1.Add（數量，標題，顏色）; 2. 讀者亦可事先將數量與標題放在陣列， 再用迴圈載入。 姓名 張三 李四 王五 陳六 業績 8 6 5 16

55 範例10-16b 同上範例，但繪製以下業績的統計圖。 姓名 張三 李四 王五 陳六 月 一月 8 6 5 16 二月 3 2 19 三月
7

56 範例10-16c 繪製股價走勢圖。

57 範例10-16d 同上範例，但同時繪製2支股價走勢圖。

58 10-17 Animate Animate元件的功能為播放一個動畫檔（*.avi），其常用屬性為Active，Active設為True則開始播放，False則停止播放，FileName屬性則為欲播放的檔名。此外，CommonAVI屬性亦已內定8種動畫檔，例如CopyFile、CopyFiles、DeleteFile、EmptyRecycle、FindComputer、FindFile、FindFolder 及Recycle File等8個動畫，程式設計者可於CommonAVI屬性點選以上動畫。

59 範例10-17a 示範Animate的動畫播放。 程式說明: 1. FrameCount屬性 傳回動畫檔的總畫格數。
2. Play（x, y, z）方法 設定欲播放的起始畫格、結束畫格與播放次數，其中x為起始畫格，y為結束畫格，z為播放次數。

60 習題 1. 請實際參觀保齡球館的計分方式，寫一程式完成以下功能。 (1) 可單人單球道擊球，並逐一顯示此人的分數。
1. 請實際參觀保齡球館的計分方式，寫一程式完成以下功能。 (1) 可單人單球道擊球，並逐一顯示此人的分數。 (2) 可2至3人單球道擊球，並逐一顯示此2-3人的分數。 2. 請參考電視“非常男女”的節目，設計一個程式，可以讓男女生各10人互選，功能要求如下： (1) 可於螢幕同時顯示配對成功者的男女生編號。 (2) 可個別逐一將配對成功者的男女生個人資料及照片於同表單顯示。 (3) 可逐一將每人的愛慕者於表單顯示。例如女生1號有3位男生投給她，編號分別為3、4及8號，則可將此3人的編號和姓名顯示在1號女生的旁邊。