第八章 各種選取鈕、列表框、面板 第八章我們將介紹各式各樣的選取鈕，包括單選、複選等不同的選擇鈕，也將介紹列表框的使用方式，甚至帶入如何加入Scroll Bar的功能，以及發展視窗程式中的一個好工具  面板。

Presentation on theme: "第八章 各種選取鈕、列表框、面板 第八章我們將介紹各式各樣的選取鈕，包括單選、複選等不同的選擇鈕，也將介紹列表框的使用方式，甚至帶入如何加入Scroll Bar的功能，以及發展視窗程式中的一個好工具  面板。"— Presentation transcript:

1 第八章 各種選取鈕、列表框、面板 第八章我們將介紹各式各樣的選取鈕，包括單選、複選等不同的選擇鈕，也將介紹列表框的使用方式，甚至帶入如何加入Scroll Bar的功能，以及發展視窗程式中的一個好工具  面板。

2 大綱 8-1 核取方塊（CheckBox） 8-2 RadioButton 8-3 群組方塊(GroupBox和RadioGroup)
8-4 面板（Panel） 8-5 列表盒（ListBox） 8-6 選取列表盒（Check ListBox） 8-7 下拉式選單（ComboBox） 8-8 捲軸（ScrollBar） 8-9 捲軸盒（ScrollBox） 本章習題

3 8-1 核取方塊（CheckBox）簡介 在程式中如果想讓使用者對某些選項作選擇時，可以使用CheckBox元件來讓使用者選擇。CheckBox元件通常都用於多選項式的情況，如右圖視窗所示。 CheckBox元件

4 核取方塊的使用 Step1：在元件模板中的standard分類項選擇CheckBox元件。
Step2：點選CheckBox圖示，並用滑鼠在欲放置核取方塊的程式Form中，拖曳出CheckBox控制元件。 Step3：編輯CheckBox元件屬性；在元件上利用滑鼠點一下，「Object Inspector」視窗便會出現，下頁的表格列出常用的CheckBox元件屬性。

5 核取方塊屬性列表 屬性 功能說明 Alignment 核取方塊與標題名稱的相對位置：
taRightJustify：核取方塊位於方塊名稱的右側 taLeftJustify：核取方塊位於方塊名稱的左側(預設值) Caption 核取方塊的標題名稱 Checked 核取方塊的狀態： true：表示該方塊已被核取(打勾)，其State = cbChecked false：表示該方塊沒有被核取，其狀態又可以分為兩種： 若該方塊為”不選取”，則其狀態State = cbUnchecked 若該方塊為”失效”，則其狀態State = cbGrayed Enabled 該核取方塊是否為有效方塊： true：這個核取方塊可以被選取，此為有效方塊(預設值) false：這個核取方塊不可以被選取，此為失效方塊 Name 此核取方塊在程式中所具有的變數名稱

6 8-2 RadioButton簡介 在程式中，如果想讓使用者對某些選項作單一選擇時，可以使用RadioButton來做設計。RadioButton按鈕的特性為在一群RadioButton中，當其中有一個按鈕被選取，則其他按鈕便會自動跳回未選取狀態，也就是說只有一個RadioButton是可以被選取的。以下兩張圖為例子，原本是第一個RadioButton被選取的，可是當選了其他的RadioButton的時候，原本第一個被選取的就取消了。 原本選取第一個按鈕 選取第二個按鈕時，選項便跳到第二個選項

7 RadioButton的使用 Step1：在元件模板中的standard分類項選擇RadioButton元件。
Step2：點選RadioButton圖示，並用滑鼠在欲放置核取方塊的程式Form中，拖曳出RadioButton控制元件。 Step3：編輯RadioButton元件屬性；在元件上利用滑鼠點一下，「Object Inspector」視窗便會出現，下頁的表格列出常用的RadioButton元件屬性。

8 RadioButton屬性列表 屬性 功能說明 Alignment RadioButton與標題名稱的相對位置：
taRightJustify：核取方塊位於方塊名稱的右側 taLeftJustify：核取方塊位於方塊名稱的左側(預設值) Caption RadioButton的標題名稱 Checked RadioButton的狀態： true：表示該方塊已被選取 false：表示該方塊沒有被核取(預設值) Enabled 該RadioButton是否為有效按鈕： true：這個RadioButton可以被選取，此為有效按鈕(預設值) false：這個RadioButton不可以被選取，此為失效按鈕 Name 此RadioButton在程式中所具有的變數名稱

9 8-3 群組方塊(GroupBox和RadioGroup)
在同一個Form中，如果需要有許多的控制選擇項，可以利用群組方塊將同一類的RadioButton集節在一起，如此整個畫面便會較為整潔且有條理；群組方塊有兩類，GroupBox與RadioGroup。 GroupBox可將同一個Form中的元件集結在一起，而RadioGroup只能專門處理RadioButton元件所集結的群組。 使用GroupBox分類 在編輯時，整個群組都會一起移動

10 GroupBox的使用 Step1：在元件模板中的standard分類項選擇GroupBox元件。
Step2：點選GroupBox圖示，並用滑鼠在欲放置核取方塊的程式Form中，拖曳出GroupBox控制元件。 Step3：編輯GroupBox元件屬性；在元件上利用滑鼠點一下，「Object Inspector」視窗便會出現，下頁的表格列出常用的GroupBox元件屬性。 Step4：在GroupBox元件上面放置其他元件；要將其他的控制項放置在GroupBox上，須注意控制元件需要放置在GroupBox內，及元件的左上角需在區域裡，否則會被視為在表單上，而不是在GroupBox內。

11 GroupBox屬性列表 屬性 功能說明 Caption GroupBox的標題名稱 Enabled
若為false則在此Group Box的功能選項都不能動作 Name 此GroupBox在程式中所具有的變數名稱

12 8-4 面板（Panel）簡介 面板提供了一個固定的區域給集結在一起的控制項，當面板被移動，或是被切換選取時，上面的控制項也會跟著移動，這可以用來製作工具列之類的功能，在下圖中，三個面板放在同一個位置，用上面的三個Show Panel的按鈕來控制這三個面板的Visible屬性，如此一來，這三個面板及附在其上的控制項能夠在這有限的區域中交互顯示而不會影響彼此。 顯示第一個面板內容 顯示第二個面板內容 顯示第三個面板內容

13 面板的使用 Step1：在元件模板中的standard分類項選擇Panel元件。
Step2：點選Panel圖示，並用滑鼠在欲放置核取方塊的程式Form中，拖曳出Panel控制元件。 Step3：編輯Panel元件屬性；在元件上利用滑鼠點一下，「Object Inspector」視窗便會出現，下頁的表格列出常用的Panel元件屬性。

14 面板屬性列表 屬性 功能說明 Caption Panel的標題名稱 BevelInner Panel的邊界樣式 BevelOuter
BevelWidth Panel的邊界寬度 Locked 此Panel是否能移動 Name 此Panel在程式中所具有的變數名稱 Visible 此Panel是否顯示

15 8-5 列表盒（ListBox）簡介 列表盒元件可以將一群選項，做成列表清單的形式供使用者選取。在右圖裡所顯示的視窗中間，就是一個典型的列表盒，列舉了檔案類型和位置的資訊。

16 列表盒的使用 Step1：在元件模板中的standard分類項選擇ListBox元件。
Step2：點選ListBox圖示，並用滑鼠在欲放置核取方塊的程式Form中，拖曳出ListBox控制元件。 Step3：編輯ListBox元件屬性；在元件上利用滑鼠點一下，「Object Inspector」視窗便會出現，下頁的表格列出常用的ListBox元件屬性。 Step4：將控制項放置在ListBox中，只要在「Object Inspector」視窗中點選屬性Items，便會彈出String List Editor視窗，在其中便可做編輯的動作。整個列表盒的顯示區域就是用來顯示這個List的，這個列表所放的就是列表盒最重要的資訊。

17 列表盒屬性列表 屬性 功能說明 Caption ListBox的標題名稱 Items 此ListBox中的控制項 MultiSelect
Name 此ListBox在程式中所具有的變數名稱 Sorted ListBox中的控制項是否經過字母排序 ItemIndex 目前被選取的項目的Index

18 8-6 選取列表盒（Check ListBox）簡介

19 選取列表盒的使用 Step1：在元件模板中的additional分類項選擇CheckListBox元件。
Step2：點選Check ListBox圖示，並用滑鼠在欲放置核取方塊的程式Form中，拖曳出Check ListBox控制元件，並調整元件的有效範圍。 Step3：編輯Check ListBox元件屬性；在元件上利用滑鼠點一下，「Object Inspector」視窗便會出現，下頁的表格列出常用的Check ListBox元件屬性。 Step4：將控制項放置在Check ListBox中，只要在「Object Inspector」視窗中點選屬性Items，便會彈出String List Editor視窗，在其中便可做編輯的動作。

20 8-7 下拉式選單（ComboBox）簡介 下拉式選單的功能和列表盒差不多，只是在點到它的時候才會將選項顯示出來，比列表盒節省空間，請看右圖範例。 下拉式選單

21 下拉式選單的使用 Step1：在元件模板中的standard分類項選擇ComboBox元件。
Step2：點選ComboBox圖示，並用滑鼠在欲放置ComboBox的程式Form中，拖曳出ComboBox控制元件。 Step3：編輯ComboBox元件屬性，在元件上利用滑鼠點一下，「Object Inspector」視窗便會出現，下頁表格列出常用的ComboBox元件屬性。 Step4：將控制項放置在ComboBox中，只要在「Object Inspector」視窗中點選屬性Items，便會彈出String List Editor視窗，在其中便可做編輯的動作。

22 下拉式選單的屬性 屬性 功能說明 Items 此ComboBox中的控制項 Name 此ComboBox在程式中所具有的變數名稱
Sorted ComboBox中的控制項是否經過字母排序

23 8-8 捲軸（ScrollBar）簡介 當視窗的內容超出顯示範圍時，便需要捲軸來捲動視窗內容，下圖中的視窗都是捲軸的應用。

24 捲軸的使用 Step1：在元件模板中的standard分類項選擇ScrollBar元件。
Step2：點選ScrollBar圖示，並用滑鼠在欲放置ScrollBar的程式Form中，拖曳出ScrollBar控制元件。 Step3：編輯ScrollBar元件屬性，在元件上利用滑鼠點一下，「Object Inspector」視窗便會出現，下頁表格列出常用的ScrollBar元件屬性。

25 捲軸的屬性 屬性 功能說明 Kind 此ScrollBar是水平還是垂直的 LargeChange
當有大捲動時(如PgUp，PgDn)捲動的長度 Name 此ScrollBar在程式中所具有的變數名稱 Position 目前捲動到的位置 SmallChange 當有小捲動時(如Up，Down)捲動的長度

26 8-9 捲軸盒（ScrollBox）簡介 捲軸盒是個有捲軸的區域，請看下圖範例，程式碼所顯示的區域就是在ScrollBox的區域裡，所以當內容超過可以顯示範圍的時候，就會出現ScrollBar。

27 捲軸盒的使用 Step1：在模板中的additional分類項選擇ScrollBox元件。
Step2：點選ScrollBar圖示，並用滑鼠在欲放置ScrollBox的程式Form中，拖曳出ScrollBox控制元件。 Step3：編輯ScrollBox元件屬性，在元件上利用滑鼠點一下，「Object Inspector」視窗便會出現，下頁表格列出常用的ScrollBox元件屬性。

28 捲軸盒的屬性 屬性 功能說明 HorzScrollBar 此ScrollBox的橫向捲軸 Name
VertScrollBar 此ScrollBox的縱向捲軸

29 本章習題 仿照Windows檔案總管的功能，用Win31介面完成一個功能具備的檔案管理程式。
設計一個小型的備忘錄，一次列出當月的每一天，點選日期開啟備忘錄顯示介面。