1、CHAPTER 8常用控制項介紹常用控制項介紹 8-1 文字方塊、標籤與命令鈕的常用屬性8-28-2選項按鈕(選項按鈕(Option ButtonOption Button) 當你需要在表單上安排多個選項,讓使用者只能選擇其中一項時,最適合使用此控制項控制項。各選項按鈕選項按鈕之間是有關聯的,當你點選點選某一選項時,其中心會出現黑點,而且Value屬性質會變成True,表示此項被選取了。設定選項按鈕的步驟:設定選項按鈕的步驟:1.1. 將滑鼠指標移到工具箱的選項按鈕工具上,再按一下左將滑鼠指標移到工具箱的選項按鈕工具上,再按一下左 鍵。鍵。2. 2. 將指標移到表單上(變成十字型)將指標移到表
2、單上(變成十字型)3. 3. 在要設定選項按鈕的開始位置,按住滑鼠左鍵拖曳,達到適在要設定選項按鈕的開始位置,按住滑鼠左鍵拖曳,達到適 當的大小後,再放開左鍵(如下圖)。當的大小後,再放開左鍵(如下圖)。選項按鈕常用的屬性選項按鈕常用的屬性屬性說明預設值Alignment(對齊) 標題出現的位置:0-靠左對齊 1-靠右對齊0-靠左對齊Caption(標題)顯現在按鈕右邊的文字Option1、Option2、.Font(字型)設定標題的文字、大小與效果細明體、9點Name(名稱)按鈕的名稱,在程式中使用Option1、Option2、.Value是否被選取:True-已被選取 False-未被選
3、取FalseEnable是否有效用:True-有效 False-無效True【例例1 1】讀者意見調查:讀者意見調查:根據點選的意見顯示結果【表單設計表單設計】【程式碼】儲存資料夾:8-2101 Private Sub Command1_Click( )02 Dim opinion As String 設定Opinion為字串變數 03 If Option1.Value = True Then opinion = 很滿意04 If Option2.Value = True Then opinion = 滿意05 If Option3.Value = True Then opinion = 普通
4、06 If Option4.Value = True Then opinion = 不敢領教07 Label2.Caption = 你選擇的項目是:+opinion08 End Sub09 Private Sub Command2_Click( )10 End11 End Sub【討論】1.屬性Value的內容為邏輯值邏輯值True或False,因此列0306中,可以直接將Value當作條件式條件式(不必加True),以列3為例,可以簡化為: If Option1.Value Then opinion = 很滿意 又因為選項按鈕的預設屬性為Value,因此更可以省略 .Value而使用:If
5、Option1 Then opinion =很滿意2. 此例中,四個選項按鈕都要檢查過,程式很單純, 但比較耗費執行時間。如果將列0306改為下面的程式碼,依序檢查出有一項被選取後,就可會跳到End If下面的敘述繼續處理。 If Option1.Value Then Opinion= 很滿意 ElseIf Option2.Value Then Opinion=滿意 ElseIf Option3.Value Then Opinion=普通 Else Opinion=不敢領教 End If3. 如何將列0306改成更簡捷的一個Switch函數?8-3 8-3 核取方塊(核取方塊(Check Bo
6、xCheck Box) 選項按鈕選項按鈕適合多選一的情況採用。如果有多個選項,但要求可以複選,也可以完全不選,則要採用核取方塊。核取方塊常用的屬性核取方塊常用的屬性屬性說明預設值Alignment(對齊)標題出現的位置:0-靠左對齊1-靠右對齊0-靠左對齊Caption(標題)顯現在按鈕右邊的文字Check1、Check2、Font(字型)設定標題的字型、大小與效果 細明體、9點Name(名稱)按鈕的名稱,在程式中使用Check1、Check2、Value是否被核取:0-不核取1核取2-忽略(V呈灰色)0-不核取Enable(有效性)是否有效用:(可否被核取)True-有效 False-無效T
7、rue例例1.興趣調查:興趣調查:根據核取的項目顯示結果【程式碼】儲存資料夾:8-3101 Private Sub Command1_Click()02 Dim interest As String03 Dim n As Integer04 If check1.Value = 1 then interest =interest+“ 運動”:n = n + 105 If check2.Value = 1 then interest =interest+ “ 游泳”:n = n + 106 If check3.Value = 1 then interest =interest+ “ 音樂”:n =
8、 n + 107 If check4.Value = 1 then interest =interest+ “ 聊天”:n = n + 108 Label2.Caption = “你的興趣有:”+interest +Str(n)+”項”09 End Sub10 Private Sub Command2_click()11 End12 End Sub8-48-4框架框架 利用框架,可以將表單中屬於同一類的控制項控制項圍起來,有下列的好處:1. 讓表單的排列比較整齊,也顯得有條理。2. 在框架框架內的控制項屬於同一群,搬移框架框架時,其內的各控制項也會隨著搬移,如果需要調整表單上的配置,會比較省事
9、!3. 如果沒有設定框架框架,則表單上所有的選項按鈕選項按鈕算是同一群,只能選取一項。如果有不同類的選項按鈕,個別要選取一項,此時可分別用框架圍起來。(每個框架內的選項按鈕,都只能選取一項,如例1的表單)框架常用的屬性框架常用的屬性屬性說明預設值Caption(標題) 要顯現在左上角的文字Frame1、Frame2、Font(字型)設定標題的字型、大小與效果細明體、9點Name(名稱)框架的名稱,在程式中使用Frame1、Frame2、例例1.1.輸入個人資料:輸入個人資料:利用框架將選項按鈕分類,並顯示輸入的資料【表單設計表單設計】【程式碼】儲存資料夾:8-4101 Private Sub
10、Command1_Click()02 Dim sex As String , education as String03 If option1 Then sex= 先生 Else sex = 小姐 04 If Option3 Then05 education= 博士06 ElseIf Option4 Then07 education= 碩士08 ElseIf Option5 Then09 education= 大專10 ElseIf Option6 Then11 education= 高中職12 Else13 education= 國中小14 End If15 Label2.caption=
11、HI! +Text1.Text+sex+ ,學歷:+education+ 歡迎來學VB!16 End Sub17 Private Sub Command2_Click()18 End19 End Sub8-58-5母件與子件的觀念母件與子件的觀念母件母件:可背負其他物件的物件物件。子件子件:被背負的物件物件。這種母子母子(主從)關係關係有下列四個特性:1.1.母件母件將其子件子件與範圍外的物件隔開,與界外的物件互 不影響(干擾)。2.子件的座標座標以母件為基準。(是相對於母件的座標)3.刪除母件母件,其全部子件子件會隨著消失。4.搬移母件母件,其全部子件子件會隨著移動。(母移子隨也!) 以上一
12、節設定框架所舉的例子來看,整個主從關係如下圖:圖中,在左邊一層的是母件母件,右邊一層是子件子件。如框架Frame1是表單的子件,但也是選項按鈕Option1與Option2的母件。電腦測驗電腦測驗:設計表單(參考下圖)及程式,由接受測驗者點選答案,每題計50分,答錯一題倒扣20分,並顯示得分(最少為0分)。8-68-6圖片方塊(圖片方塊(Picture BoxPicture Box) 在表單中設定圖片方塊圖片方塊,便可在其中放置圖片圖片。事後要在圖片方塊圖片方塊中放置圖片的方法有四種:1. 設計表單時,直接在Pictrue屬性的內容中,設定該圖片檔圖片檔所在的資料夾資料夾與檔名檔名。2. 在程
13、式碼中,配合使用LoadPictureLoadPicture函數函數來載入圖片。3. 直接利用指定敘述指定敘述將圖片方塊中的圖片設定給另一圖片方塊,如: 圖片方塊名稱1.Picture=圖片方塊名稱2.Picture4. 利用剪貼簿的功能,將圖片貼上圖片方塊中。【例例1 1】設定圖片方塊,及圖檔所在的資料夾與設定圖片方塊,及圖檔所在的資料夾與 檔名。檔名。1. 在屬性視窗的Picture屬性右邊的按一下, 便出現插入圖片方塊如下:2. 選擇圖片檔所在的資料夾與檔名3. 按開啟舊檔鈕,就完成設定,圖片方塊中會同時顯現該圖片,如下:圖片方塊常用的屬性圖片方塊常用的屬性屬性說明預設值Align設定圖
14、片方塊中的對齊方式:0-自行調整1-對齊表單上方:與表單等寬,緊靠其上方2-對齊表單下方:與表單等寬,緊靠其下方3-對齊表單左方:與表單等高,緊靠其左方4-對齊表單右方:與表單等高,緊靠其右方0-自行調整AutosizeTrue:圖片方塊的大小會依圖片大小而自動調整False:圖片方塊的大小不會依圖片大小而調整FalseBorderStyle0-沒有框線 1-單線固定Picture設定要顯現的圖片檔資料夾及檔名(無)VisibleTrue-看得件圖片方塊 False-看不見圖片方塊TrueHeight圖片方塊的高度(此項及以下單位均為Twip)-Width圖片方塊的寬度-Left圖片方塊左邊框
15、與母件左邊框的距離-Top圖片方塊上邊框與母件上邊框的距離-【例2】切換圖片顯示位置:設計表單(如下圖),只要按一下鈕,就會將圖片在左右兩邊的方塊交互出現。【程式碼與解說程式碼與解說】儲存資料夾:8-6201 Private Sub Command1_Click( )02 If Picture1.Visible = False Then 假如左邊圖看不見就03 Picture1.Picture = Picture2.Picture _ 將右邊圖設定給左邊方塊04 Picture1.Visible = True設定左邊圖看得見05 Picture2.Visible = False設定右邊圖看不見
16、06 Else左邊圖看得見的情況07 Picture2.Picture = Picture1.Picture_ 將左邊圖設定給右邊方塊08 Picture2.Visible = True設定右邊圖得見09 Picture1.Visible = False設定左邊圖看不見10 End If11 End Sub8-78-7影像(影像(lmagelmage)影像與圖片方塊兩個控制項控制項很相似,都可以顯示圖片,而且可使用的圖片檔格式都一樣(參看表9-1)。但是影像影像可以選用的屬性屬性比較少,顯示的速度通常會比較快,非常適合要有動畫效果的程式使用。影像特別有的Stretch(伸展)屬性屬性,設定其屬
17、性值屬性值為True時,它顯示的圖片會自動調整成與設定的大小一樣。 【例例1 1】設定影像控制項(Stretch為 True),及圖檔所在的資料夾與檔名。1. 依上述步驟在表單表單中建立一個影像控制項控制項。2. 在屬性視窗屬性視窗設定BorderStyle的屬性值屬性值為1-單線固定,如下面左圖:(BorderStyle的預設值為0-沒有框線,如上面右圖)。3. 在屬性視窗屬性視窗設定Stretch的屬性值為True。4. 如上一節例1的步驟13,在屬性視窗屬性視窗的Picture屬性設定圖片檔圖片檔所在的資料夾資料夾與檔名檔名(cat.bmp), 結果就完整的顯現該圖片,如下:影像常用的屬
18、性影像常用的屬性屬性說明預設值BorderStyle0-沒有框線 1-單線固定0-沒有框線Picture設定要顯現的圖檔之資料夾及檔名(無)StretchTure-影像自動調整大小False-不自動調整FalseVisibleTrue-看得見影像 False-看不見影像(隱藏起來)TrueHeight影像的高度(以下單位均為Twip)- Width影像的寬度-Left影像左邊框與母件左邊框的距離-Top影像上邊框與母件上邊框的距離-【註】與上一節的常用屬性表對照一下,影像就少了Align與Autosize屬性。【例例2 2】圖片連續縮小:圖片連續縮小:在表單上設定五個從大到小 的影像,只要按一
19、下表單的影像外圍之空白 區,就會將圖片依下面的情況變化: 最大大中小最小1. 設定由大到小,而且重疊的五個影像控制影像控制 項項,如下圖:2. 設定每個影像的Stretch屬性值均為True。3. 設定每個影像的Picture屬性值均為 d:pictureteacher.bmp。4. 設定Imagel影像的Visible屬性值為True, 其他四個都為False。此時情況如下:【程式碼程式碼】儲存資料夾:8-72Private Sub Form_Click( )If Image1.Visible Then Image1.Visible = False : Image2.Visible =Tru
20、e EsleIf Image2.Visible ThenImage2.Visible = False : Image3.Visible =True ElseIf Image3.Visible ThenImage3.Visible = False : Image4.Visible =True ElseIf Image4.Visible ThenImage4.Visible = False : Image5.Visible =TrueElseImage5.Visible = False : Image1.Visible =TrueEnd IfEnd Sub8-88-8計時器(計時器(TimerTi
21、mer) 利用計時器,可以設定時間的間隔間隔(Interval (Interval ,以毫秒為單位,即Minisecond=10-3秒),每次經過設定的時間,便會驅動該計時器的TimerTimer事件事件。 設定計時器的時間間隔設定計時器的時間間隔1.設計表單表單時,直接在IntervalInterval屬性屬性中,設定其屬屬性值性值。(如設定1000毫秒,即1秒,如下圖)2. 在程式碼中,以指定敘述指定敘述來設定,其用法如下: 計時器名稱計時器名稱.Interval=n.Interval=n【程式碼程式碼】儲存資料夾:8-81Private Sub Form_Activate( ) Time
22、r1.Interval = 1000 設定時間間隔為1秒End SubPrivate Sub Timer1_Timer( ) 每隔1秒就驅動此程序 Label2 = Time顯示目前時間End Sub【程式碼程式碼】儲存資料夾8-8201 Private Sub Form_Activate( ) 02 Timer1.Interval = 100 設定時間間隔為0.1秒03 End Sub04 Private Sub Timer_Timer()05 Image1.Visible = False設定影像Image1為看不到06 gap = 2007 If Image1.Width =1000 Th
23、en08 Image1.Top = Image1.Top+gap09 Image1.Left = Image1.Left+gap10 Image1.Width = Image1.Width-gap*211 Image1.Height= Image1.Height-gap*212 End If13 Image1.Visible = True 恢復影像Image1為看得到14 End Sub【討論討論】1.改變列02的Interval值,就可以改變縮小的速度;改變列06的gap值就可以改變每次縮小的幅度,請讀者自己試試看!2.如果要將影像逐步放大,應如何修改?3.如果要由操作者選擇放大或縮小圖片,又要如何修改?