Transcript 松岡VB2010-ch06(6219 KB )

第六章 重覆結構
本章投影片僅供本書上課教師使用，非經同意請勿拷貝或轉載
6-1 計數迴圈
敘述區段
程式中具有特定功能的連續多行敘述
 重複結構
敘述區段需要在程式中某處執行多次時，便需
要利用重複結構來完成
 使用重複結構可縮短程式的長度及易維護。
 重複執行的敘述區段稱為 迴圈 (Loop)。

VB 提供的迴圈：
計數迴圈
程式中某個敘述區段重複執行的次數是可計數，
且已知初值、增值和終值。
 語法：

必須是數值變數
常數、數值變數或數值運算式
[ ]表示可省略
從迴圈中跳出，Exit For 中途離開迴圈
當增值為正時，計數迴圈流程圖
【例1】
寫出變數k 由100 ~ 1，增值為 -1 的
計數迴圈：
For k=100 To 1 Step -1
敘述區段
Next
【例2】
寫出變數 k由10 ~100，增值為 5 計數迴圈
For k = 10 To 100 Step 5
敘述區段
Next
【例3】
求 -1 + -0.5 + 0 + 0.5 + 1.0 + 1.5 + 2.0 總和
For num = -1 To 2 Step 0.5
sum += num
Next
例如 S = 1 + 3 + 5 + … + 99 = 2500
i.e. 初值:1
終值:99
增值:2
如右圖
按鈕1
按鈕2
MsgBox (訊息[, [格式碼][, 標題]])
標題
提示訊息
預設值
MsgBox
' FileName : For.sln
01 Private Sub Form1_Load(ByVal ….. ) Handles MyBase.Load
02
Dim start_num, end_num, step_num, i, sum As Integer
03
start_num = Val(InputBox("請輸入初值(整數):"))
04
end_num = Val(InputBox("請輸入終值(整數):"))
05
step_num = Val(InputBox("請輸入增值(整數):"))
06
For i = start_num To end_num Step step_num
07
sum = sum + i
08
Next
09
MsgBox("初值" & start_num & "到終值" & end_num & _
"增值為" & step_num & "時，總和為" & sum)
10
End
11 End Sub
6-2 條件迴圈
程式中當一個敘述區段重複執行的次數無法預
測時，就需要透過條件式迴圈來解決。
 可依程式需求設定當滿足條件或不滿足條件時，
才執行迴圈內的敘述區段。

VB 提供條件式迴圈基本形式有五種：
一、Do While…Loop (前測式迴圈)
前測式迴圈
表示先判斷是否滿足
條件？若滿足條件，
就執行敘述區段一次，
一直到不滿足條件時
才離開迴圈。
 語法：

二、Do Until…Loop (前測式迴圈)
語法：Do Until <條件>
敘述區段
[Exit Do]
Loop
功能：
執行前先判斷是否不
滿足條件，若不成立
才進迴圈。
三、Do … Loop While (後測式迴圈)
語法：
Do
敘述區段
[Exit Do]
Loop While <條件>
功能：
先進入迴圈執行敘述
區段後，再判斷條件
是否成立， 成立時就
要再進入迴圈。
四、Do … Loop Until (後測式迴圈)
語法：
Do
敘述區段
[Exit Do]
Loop Until <條件>
功能：
先進入迴圈執行敘述
區段後，再判斷條件
是否不成立，不成立
再進入迴圈。
五、Do … Loop (無窮迴圈)
語法：
Do
敘述區段
[Exit Do]
Loop
功能：
在迴圈頭尾沒條件作判斷，一旦執行便無止盡的
迴圈。
【注意】
無窮迴圈發生後，程式在迴圈一直繞，除非迴圈
內有Exit Do敘述才能跳離迴圈。
若發生無窮迴圈，可按Ctrl+Break 鍵中斷程式
執行。
VB可使用Random類別的Next方法來
隨機產生指定範圍的數字，語法如下
Dim 亂數物件 As New Random
Dim 亂數變數 As Integer =亂數物件.Next(最小值, 最大值+1)
如本例，寫法如下 :
Dim rndObj As New Random
Dim rndNo As Integer = rnd.Obj.Next( 1 , 11 )
使用If敘述檢查猜對與否?若猜對則顯
示猜對訊息，若猜錯則可使用 IIf 函式
顯示往大或往小哪邊猜提示訊息，使用
後測試迴圈，而且至少需要再猜一次。
如流程圖。
' FileName : DoLoop.sln
01 Private Sub Form1_Load(ByVal sender …. ) Handles MyBase.Load
02
Dim ans, guess_num, times As Integer
03
Dim rnd_obj As New Random
04
ans = rnd_obj.Next(1, 11) ‘亂數變數=亂數物件.Next(最小值, 最大值+1)
05
Do
06
guess_num = Val(InputBox("請輸入1-10之間的數字:", "猜數字"))
07
If guess_num <> ans Then
08
times += 1
09
MsgBox(IIf(guess_num > ans, "數字太大,小一點！", _
10
"數字太小,大一點！") , , " DoLoop " )
11
End If
12
Loop Until guess_num = ans
13
MsgBox("你答對了！共猜了" & (times + 1).ToString() & "次",, "DoLoop")
14
End
15 End Sub
6-3 巢狀迴圈(Nested Loop)
是指一個程式中，迴圈裡還有迴圈稱為「巢狀迴
圈」。
 二維表格：九九乘法表或是有規則性表格等都可
用「巢狀迴圈」。如下圖，在表單上以巢狀For
迴圈將結果以MsgBox輸出對話方塊敘述顯示。

【問題分析】
1. i=1 第1列，k由1至i=1，分別顯示k値1，換行
2. i=2 第2列，k由1至i=2，分別顯示k値1,2，換行
3. i=3代表第3列，k由1至i=3，分別顯示k値1,2,3
換行。
4. i=4代表第4列，k由1至i=4，分別顯示k値
1,2,3,4，換行。
5. i=5代表第5列，k由1至i=5，分別顯示k値
1,2,3,4,5，換行。
6. 歸納以上規律
外層迴圈i=1~5
內層迴圈 k=1~i
' FileName : NestFor.sln
01 Private Sub Form1_Load(ByVal sende … Handles MyBase.Load
02
Dim i, k As Integer
03
Dim str1 As String = ""
04
For i = 1 To 5
05
For k = 1 To i
06
str1 &= k
07
Next
08
str1 &= vbNewLine ' 換行
09
Next
10
MsgBox(str1)
11
End
12 End Sub
6-4 圖片方塊 PictureBox
一、圖片方塊控制項常用的屬性
二、圖片方塊接受的常用圖形檔格式
圖片方塊控制項的 Image 屬性可接受下列圖形格式，可依
程式需求來選擇需要的圖形格式：
 Bitmap圖檔
附檔名為 .BMP，屬於非壓縮點矩陣圖形，縮放會失真。
 GIF
附檔名為 .GIF，屬於壓縮過的圖形檔。以GIF格式存放
的圖形檔可製作動畫，也可設定透空色。
 JPEG
附檔名為 .JPG，是屬於壓縮過的圖形檔，主要用來存放
實體的圖片。
 Icon
附檔名為 .ICO，為壓縮點矩陣圖形，主要當小圖示。
 MetaFile
附檔名為 .WMF，為向量圖形，圖形縮放不失真。
三、如何將圖檔置於圖片方塊控制項

Step1 由工具箱拖曳一個PictureBox圖片方塊控制項
到表單上，該控制項預設名稱為「PictureBox1」。

Step2 點選「PictureBox1」成為作用控制項，再由屬
性視窗點選Image屬性上 鈕出現「選取資源」對話方
塊，來設定圖片方塊圖檔的路徑與檔名。

Step3 在「選取資源」對話方塊中
點選「專案資源檔(P) 」選項按鈕，再按匯入鈕出現
「開啟」對話方塊。如次頁圖。
若點選「本機資源(L) 」選項按鈕，不會加入到方案
資料夾，日後拷貝時應將圖檔與路徑同時複製。
 選取圖形檔後按 開啟舊檔鈕，圖檔就加入該方案資料
夾下的Resources資源資料夾內。操作步驟如下 :



若要更換圖片，請依照上述步驟再操作一次。
若要刪除圖片方塊控制項中的圖片，請在Image屬性上
按右鍵，然後執行快顯功能表中「重設(R)」指令。
使用此種方式由圖片方塊控制項載入圖片後，VB會將
圖檔拷貝一份放在程式中。若要修改圖形檔，圖片方塊
控制項內的圖片仍是舊圖，並不受影響。若要更新圖檔，
就必須重新設定屬性值。
四、如何在程式執行階段設定圖片方塊
1. Image.FromFile方法
在執行階段，利用 Image.FormFile方法來設定
圖形檔到指定的控制項上面。(檔名要包含完整的
路徑)。
語法：
PictureBox1.Image = Image.FromFile("檔名")
功能：
將指定圖檔載入到圖片方塊的Image屬性。
【例】將C根目錄下abc.bmp圖形檔載入到
picTest圖片方塊中。如
picTest.Image = Image.FromFile("c:/abc.bmp")
2. 移除圖檔
在程式執行階段移除 PictureBox1上的圖檔。
寫法：
PictureBox1.Image = Nothing
3. Point物件
要改變控制項的Location屬性可用Point物件。
語法：
Object.Location=New Point(X,Y)
功能：
將物件移動到指定的X、Y座標位置上。
【例】picTest.Location = New Point(30,50)
4. Size物件
若要透過控制項的Size屬性來調整控制項的大小，
可使用Size物件來達成，其語法如下：
語法：
Object.Size = New Size(Width, Height)
功能：
將物件設定為指定長度的寬和高。
【例】將picTest圖片方塊的寬度和高度各縮小一半
picTest.Size = New Size(picTest.Width/2,picTest.Height/2)
【問題分析】
1. 應建立那些控制項
本例要求圖片方塊顯示gif動畫檔，需在表單上
建立圖片方塊控制項。
需使用兩個按鈕控制項來控制直升機朝左或右
飛行。
2. 程式開始執行預設機頭朝右原地飛等待按鈕指示，
此部分程式碼應寫在表單的Load事件處理程序:
使用Image.FromFile方法載入機頭朝右
picR.gif動畫檔。
使用圖片方塊的SizeMode屬性設定自動調整和
圖片一樣大小。
【問題分析】(續)
3. 按 鈕，直升機朝右方飛一段距離，此部分的程式碼
應寫在此按鈕的Click事件處理程序 :
先將直升機朝右方動畫載入到圖片方塊控制項上。
將目前圖片方塊左上角水平座標PictureBox1.Left
當For迴圈的初值。
需要向右飛150Pixels，以(PictureBox1.Left+150)
當迴圈終值。
每次移動1 Pixel，終值大於初值，增設值為正值。
For迴圈中每移動一次位置，除了必須將新座標使用
New Point指定給圖片方塊控制項外，要記得使用
Me.Refresh()方法讓表單能重新繪製，如此才能看
到PictureBox1圖片方塊內的直升機有移動效果。
【問題分析】(續)
4. 按 鈕，直升機朝左方飛一段距離，此部分的程式碼
應寫在此按鈕的Click事件處理程序 :
先將直升機朝左方動畫載入到圖片方塊控制項上。
將目前圖片方塊左上角水平座標PictureBox1.Left
當For迴圈的初值。
需要向左飛150Pixels，以(PictureBox1.Left-150)
當迴圈終值。
每次移動1 Pixel，終值小於初值，增設值為負值。
For迴圈中每移動一次位置，除了必須將新座標使用
New Point指定給圖片方塊控制項外，要記得使用
Me.Refresh()方法讓表單能重新繪製，如此才能看
到PictureBox1圖片方塊內的直升機有移動效果。
【問題分析】(續)
5. 由於本例只有兩張動畫圖做切換且圖檔較小，每
次變換圖檔才由磁碟機中載入圖檔不會有延遲現
象，所以可以只用一個圖片方塊控制項輪流來更
換圖片。
6. 使用多張連續動作圖檔構成動畫時，如何產生動
畫為使動畫順暢，建議事先將動畫檔依序置入多
個圖片方塊控制項(此時動畫檔已存放在記憶體中
而不是硬碟中)。動畫開始時，先將Visible屬性設
為隱藏看不見，再將這些圖片方塊上的動畫依序
置入指定展示的圖片方塊中，就可產生原地動畫 ;
若展示時順便移動圖片方塊位置，就產生會移動
的動畫。
C:\Documents and Settings\user\Local Settings\Application Data\
Temporary Projects\PictureBox\bin\Debug
【上機】
1. 建立表單
專案名稱命名為『PictureBox』。
本例由程式執行階段動態載入指定的圖檔，請將書
附光碟images資料夾下的PicL.jpg及PicR.jpg兩張
圖檔放入目前專案的bin/Debug資料夾下，使上述
兩張圖與執行檔置於相同路徑下，以方便透過程式
載入圖檔。
在表單內，建立如次頁圖所示控制項 :
【上機】(續)
2. 設定各物件的屬性 :
預設名稱
Name
Text標題
Image圖片
Button1
btnL
左
--
Button2
btnR
右
--
PictureBox1
PictureBox1
--
--
' FileName : PictureBox.sln
01 Private Sub Form1_Load(ByVal sender . ) Handles MyBase.Load
02
PictureBox1.Image = Image.FromFile("PicR.gif") ‘載入圖片
03
PictureBox1.SizeMode = PictureBoxSizeMode.AutoSize
04 End Sub
05 '------------------------------------------------------------------------------------06 Private Sub btnL_Click(ByVal sender … ) Handles btnL.Click
07
PictureBox1.Image = Image.FromFile("PicL.gif")
08
Dim x, x1 As Integer
09
x1 = PictureBox1.Left
‘記錄圖片方塊目前的X座標
10
For x = x1 To x1 - 150 Step -1‘終值小於初值，圖形向左移動
11
PictureBox1.Location = New Point(x, 50)
12
Me.Refresh() ‘讓表單重新繪製，才看的到圖片方塊移動的效果
13
Next
14 End Sub
16 Private Sub btnR_Click(ByVal sender … ) Handles btnR.Click
17
PictureBox1.Image = Image.FromFile("PicR.gif")
18
Dim x, x1 As Integer
19
x1 = PictureBox1.Left
20
For x = x1 To x1 + 150 Step 1‘終值大於初值，圖形向右移動
21
PictureBox1.Location = New Point(x, 50)
22
Me.Refresh() ‘讓表單重新繪製，才看的到圖片方塊移動的效果
23
Next
24 End Sub
6-5 變數的生命週期





變數在程式中，因宣告位置不同有效範圍不同。
變數若超過有效範圍，自動將變數由記憶體中
釋放掉。
區域變數 (Local Variable)
在程序內所宣告的變數，若沒特別宣告均屬之。
區域變數有效範圍
僅限該程序，離開該程序自動由記憶體中釋放
掉
不同的程序允許有名稱相同的區域變數，兩者
區域變數視為不相干的變數。





若兩個程序中要共同參用一個變數名稱，必須
將此變數宣告在類別(Class)內所有程序外。
由於VB屬於物件導向程式語言，將宣告於類別
內的變數稱為「欄位變數」或「屬性」。
若程序中一個變數的結果必須傳給另一個程序
使用時，此變數就必須宣告於程序外。
在表單檔中，欄位變數(或稱屬性) 必須宣告在
所有程序的外面
區域變數在程序內或If / For程式區塊內。
在var.sln範例中
 FieldX欄位變數
有效範圍限於整
個Form1表單類
別。
 程序內宣告
LocalX區域變
數有效範圍限
Button1_Click
事件處理程序內
 For迴圈內宣告
了ForX區域變
數有效範圍只限
於For迴圈區塊
內。
因為FieldX欄位變數有效範圍涵蓋整個Form1表
單，所以，Form1_Load及Button1_Click事件處
理程序可以一起用。因此，若連續按
鈕會發
現FieldX欄位變數都會保留前一次所記錄的值。
Var.sln執行結果如下 :
6-6 計時器 Timer

傳統 BASIC 語言使用迴圈需使用迴圈來控制
時間長短、顯示目前時間，或讓一張圖片能每
隔固定時間移動。所以，不同電腦的 CPU速度
不同，相同迴圈敘述會得到不同時間延遲。

VB的計時器(Timer)工具，不必用迴圈便可解
決上述問題。

計時器控制項是屬於非視覺化控制項。控制項
在編輯程式階段看得到，程式執行時卻看不到
此控制項。
Timer 計時器(續)
此控制項時建在表單正下方。
 屬幕後執行，未提供 Height 或 Width屬性來
設定該控制項的大小。

程式範例
試透過Timer計時器控制項製作一個可連續反覆
播放五張圖片的播放程式。
(圖片檔名：img1.jpg~ img5.jpg)
按
鈕時，啟動計時器，每隔兩秒播放一
張圖。
按
鈕時，即停止計時器不播放圖檔。
【問題分析】
1. 為方便呼叫圖檔，檔名以最後面數字來區分，故宣
告一個欄位變數 n 做為圖檔編號，將此變數置於所
有事件處理程序之外。
2. 執行Form1_Load事件處理程序設定相關初值
先顯示img1.jpg第一張圖片，將變數n設為1。
要求每隔兩秒更換圖片，故將Interval屬性設為
2000。
為避免五張圖片大小不一，須調整圖片與圖片控
制項同大小，避免播放時圖片跳來跳去。將圖片
方塊的SizeMode屬性值設為StrechImage。
使用Image.FromFile方法載入第一張圖片於圖片
方塊控制項上。
【問題分析】(續)
3. 於計時器每兩秒執行的Timer_Tick事件處理程序內
設定n累加1，使PictureBox1顯示第 n 張圖 ; 若目前
n 大於等於5，則令 n 等於1。
4. 如何啟動計時器
本例要求按
鈕時，才啟動計時器，故將計時器
的Enabled屬性設為True的程式碼寫在
btnPlay_Click事件處理程序中。
5. 每隔兩秒更換圖片的工作寫在Timer_Tick事件處理:
將圖片編碼 n 加1。
檢查圖片編碼 n 是否超過5?若超過5，則將圖片編
號n 設為1，重新開始播放。
使用Image.FromFile方法顯示圖片編號n 所指定
的圖片。
【問題分析】(續)
6. 按
鈕執行 btnStop_Click事件處理程序，在
該程序內將Timer1計時器的Enabled=False 關閉
計時器，停止呼叫Timer1_Tick事件處理程序。
C:\Documents and Settings\user\Local Settings\Application Data\
Temporary Projects\Timer\bin\Debug
【上機】
1. 建立表單
專案名稱命名為『Timer』。
本例每次播放時都由磁碟機動態載入指定的
圖檔，請將書附光碟images資料夾下的
img1.jpg~img5.jpg 五張圖檔複製到目前專
案的bin/Debug資料夾下，使圖片與執行檔
置於相同路徑下，以方便透過程式載入圖檔。
在表單內，建立如次頁圖所示控制項 :
Timer1
【上機】(續)
2. 設定各物件的屬性 :
預設名稱
Name
Text標題
Image圖片
Timer1
Timer1
--
--
Button1
btnPlay
播放
--
Button2
btnStop
停止
--
PictureBox1
PictureBox1
--
--
' FileName : Timer.sln
01 Dim n As Integer ' 宣告n為欄位變數, 宣告於所有事件處理程序外
02 ' ----------------------------------------------------------------------------------------03 Private Sub Form1_Load(ByVal … ) Handles MyBase.Load
04 n = 1
05 Timer1.Interval = 2000 ' 兩秒執行Timer_Tick事件處理程序一次
06 PictureBox1.Image = Image.FromFile("img" & n.ToString & _
".jpg")
07 PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
08 End Sub
09 ' ----------------------------------------------------------------------------------------10 Private Sub Timer1_Tick(ByVal sender … ) Handles Timer1.Tick
11 n += 1
12 If n >= 5 Then
13
n=1
' 從第1張開始
14 End If
15 PictureBox1.Image = Image.FromFile("img" & n.ToString _
& ".jpg")
16 End Sub
17 ' ---------------------------------------------------------------------------------18 Private Sub btnPlay_Click(ByVal sender …. ) Handles _
btnPlay.Click
19 Timer1.Enabled = True
' 啟動計時器
20 End Sub
21 ' --------------------------------------------------------------------------------22 Private Sub btnStop_Click(ByVal sender … ) Handles _
btnStop.Click
23 Timer1.Enabled = False
' 不啟動計時器
24 End Sub
6-7 影像清單 ImageList
圖片方塊控制項只能置入一張圖，若希望同時置
入多張圖片，再依需求指定顯示哪張圖就需用影
像清單工具。
 圖片方塊和影像清單工具都是將圖片由硬碟事先
載入到主記憶體中，使得圖片能快速顯示。
 由於影像清單控制項可存放多張圖片，所以無法
直接顯示圖形，必須透過含有ImageList屬性的
控制項來顯示圖片。
 由於影像清單可同時指定給多個含有ImageList
屬性的控制項共同使用，可省略控制項須載入圖
片的困擾。


也可將「影像清單」控制項物件的Images屬
性值指定給「圖片方塊」控制項的Image屬性
值只要影像清單內圖片清單的索引值有改變，
就將該索引値指到的圖片置入圖片方塊上。
語法：
PictureBox1.Image = ImageList1.Images(Index)
功能：
將影像清單上指定索引値的圖檔置於圖片方
塊控制項上面 (Index値是由0開始計數)
一、影像清單控制項的建立
1. 將ImageList 控制項放入表單下方，出現預設名稱。
點按ImageList1即出現屬性窗格。點按Images屬性
質右方的
鈕，開啟對話方塊。
2.在「影像集合編輯器」對話方塊中按
鈕，
會出現「開啟」對話方塊。選取圖形檔所在的資料
夾，在圖檔名稱上快按兩下，此時要使用的圖片即
載入影像清單控制項內。反覆上述步驟就可以加入
多張圖片。
3.若要刪除圖片，只要點選該圖然後按
鈕即可。
4.若要調整圖片順序可按 和 鈕來上移或下移圖片。
5.最後按
鈕即可完成加入圖片的工作。
二、影像清單控制項常用的屬性
三、影像清單控制項使用的圖片檔格式
影像清單控制項適用的圖形格式和圖片方塊控
制項物件相同。
 圖片載入到影像清單控制項後，大小會調整和
ImageSize 屬性值一樣大小。
 載入的圖片最好大小要一致，至少比例要相似，
以免顯示圖片時會變形(失真)。

【問題分析】
1. 應建立那些控制項
本例要求將fly1.jpg和fly2.jpg兩張蝴蝶圖片
先置入影像清單控制項，因此需在表單上建
立ImageList影像清單控制項，再將兩張圖片
分別載入影像清單控制項的Image(0)和
Image(1)屬性集合。
欲展示蝴蝶飛舞，需在表單上建立圖片方塊
控制項來展示圖片。
每隔一秒更換圖片和移動圖片位置，需在表
單建立Timer計時器控制項。
【問題分析】(續)
2. 應設定那些變數和更改屬性值
影像清單控制項內ImageSize圖示大小屬性
值要和圖片方塊控制項的Size屬性值一致，
均設為(60, 60)。
設定一個布林變數方便切換圖片，由於此變
數進出事件處理程序時須保留參用，將它設
為欄位變數，變數名稱為pic。
3. 表單載入時執行Form1_Load事件處理程序應
做哪些事情
Timer的Interval屬性設為1000，即1秒週期。
Timer的Enabled屬性設為True來啟動Timer。
【問題分析】(續)
4. Timer每隔1秒會執行Timer的Tick事件 :
更換圖片
 將pic變數的布林值互換(即True
False)
 透過IIf(pic , 0 , 1)取得影像控制清單控制項
Images的索引值
若pic=True取得索引值0，
Images(IIf(pic , 0 , 1)) Images(0)
若pic=True取得索引值1，
Images(IIf(pic , 0 , 1)) Images(1)
 將影像清單Images(Index)屬性對應的圖片指定給
圖片方塊的Image屬性，便可將圖片顯示在圖片方
塊上 :
picButterfly.Image=imgButterfly.ImagesImages(IIf(pic , 0 , 1))
【問題分析】(續)
變更圖片方塊位置
 產生兩個介於-10和10間的整數亂數，限制移
動間距。
 分別和圖片方塊左上角的座標相加，取得最
新圖片方塊左上角座標。
 使用Point物件將圖片方塊控制項左上角移到
新座標，而產生移動效果。
【上機】
1. 建立表單
專案名稱命名為『ImageList』。
在表單內，建立如下圖所示控制項 :
【上機】(續)
2. 設定各物件的屬性 :
預設名稱
Name
PictureBox1
picButterfly
ImageList1
imgButterfly
--
Timer1
Timer1
--
Image
Size
(預設值) 60, 60
imageSize Enabled
--
(預設值)
--
60, 60
--
--
--
Flase
【註】imgButterfly的Images屬性如前面影像清
單控制項建立方式載入fly1.gif和fly2.gif兩個
圖片檔，圖片檔置於書附光碟的images資料
夾下。
' FileName : Imagelist.sln
01 Dim pic As Boolean ‘ 欄位布林變數，用來進出Timer1_Tick事件保留舊值
02 ' ---------------------------------------------------------------------------------------------------03 Private Sub Form1_Load(ByVal sender … ) Handles MyBase.Load
04 Timer1.Interval = 1000‘ 每隔1秒執行Timer_Tick事件處理程序一次
05 Timer1.Enabled=True ‘ 啟動Timer
06 End Sub
07 ' ---------------------------------------------------------------------------------------------------08 Private Sub Timer1_Tick(ByVal sender … ) Handles Timer1.Tick
09
Dim rndNo As New Random ‘宣告rndNo屬於Random類別的變數
10
Dim x, y As Integer
‘存放圖片方塊左上角座標
11
pic = Not pic ‘ 改變pic值， pic為布林變數，只有True/False兩種狀態
12
picButterfly.Image = imgButterfly.Images(IIf(pic, 0, 1)) ‘pic為True選0
‘否則選1
13
x = picButterfly.Left + rndNo.Next(-10, 11) ‘寬度移動間距，-10到10亂數
14
y = picButterfly.Top + rndNo.Next(-10, 11) ‘高度移動間距
15
picButterfly.Location = New Point(x, y) ‘重設picButterfly圖片方塊位置
16 End Sub
6-8 捲軸 ScrollBar
當開啟視窗，若資料超出視窗範圍時，馬上會出現
捲軸，供上下或左右捲動以顯示資料。
VB提供垂直捲軸(Vertical Scroll Bar)和水平捲軸
(Horizontal Scroll Bar)工具來使用。
下圖是捲軸控制項的各個按鈕說明 :
二、捲軸控制項常用的事件
當使用者正在拖曳捲動鈕時會觸動該捲軸的
Scroll事件
 當放開捲動鈕時會觸動該捲軸的
ValueChanged事件。
 如希望正拖曳捲動鈕時捲軸的設定值能同步跟
著顯示，就需要將相關的程式碼寫在Scroll事
件處理程序中。
 如希望拖曳完畢放開滑鼠後才顯示設定值，程
式碼就需寫在Value Changed事件處理程序中。

6-9 數字鈕 NumericUpDown
NumericUpDown數字鈕控制項除了可使用
上下按
鈕來調整數值外，也可讓使用者由鍵盤輸入一個數
值，以避免輸入布正確數字或數字超出範圍。
一、數字鈕控制項常用的屬性
二、數字鈕控制項常用的事件

ValueChanged事件
當使用者按上、下鈕或直接輸入數值後，都會
觸動ValueChanged事件 。
C:\Documents and Settings\user\Local Settings\Application Data\
Temporary Projects\NumericUpDown\bin\Debug
【問題分析】
1. 應建立那些控制項
要求圖片以面板當容器，須先建立Panel控制項。
圖片置於圖片方塊控制項上面，然後需在面板上建
立圖片方塊控制項。
由於圖片方塊放在面板內，若圖片大於面板，則面
板會遮蔽圖片，須建立水平和垂直捲軸控制項供上
下左右瀏覽。
本例以數字按鈕切換圖片，須建立數字按鈕控制項。
2. 將上述三個圖片檔由Images資料夾拷貝到目前專
案的bin/Debug資料夾中，以方便程式載入到圖片方
塊上。
【問題分析】(續)
3. 應設定那些變數和更改屬性值
設定面板Size屬性大小為240*240(寬*高)。
由於圖片方塊置於面板上，且因為三張圖片均為
640*480，所以必須將圖片方塊控制項的SizeMode屬
性設為AutoSize，讓圖片方塊控制項能容納整張圖片。
圖片超出面板部分使用捲軸來瀏覽。
設定數字鈕的Minimum(最小值)和Maximum(最大
值)屬性值分別為1和3。
4.表單載入執行Form1_Load處理程序應做哪些事情?
本例要求先顯示picture2.jpg圖片，所以將數字按鈕
控制項的Value屬性值設為2，經
「"picture"&"nudPicture.Value&".jpg"」字串合併成
picture2.jpg。再透過Image.FromFile方法載入此圖
片到圖片方塊上面。
【問題分析】(續)
5. 切換圖片由數字鈕控制項的ValueChanged事件處理
當在數字鈕按一下會觸動該鈕的ValueChanged事
件，將取得數字置入Value屬性，同上一步驟將指定的
圖片顯示到圖片方塊上面。
將圖片方塊的左上角定在面板的左上角。
設定水平卷軸的上界(Max.)和下界(Min.)範圍
Max. =圖片控制項的寬度(即圖片寬度)減面板的寬度
Min. = 0
設定垂直卷軸的上界(Max.)和下界(Min.)範圍
Max. =圖片控制項的高度(即圖片高度)減面板的高度
Min. = 0
預設捲軸停在下界的位置
水平捲軸.Value=0
垂直捲軸.Value=0
【問題分析】(續)
6. 拖曳水平捲軸會觸動該捲軸的scroll事件，將圖片
發生水平捲軸的程式碼寫在此事件處理程序中 :
當水平捲軸往右捲時，圖片發生左捲效果，此時捲
軸的Vaule 值改變，相當於圖片控制項左上角往左移
動的水平距離，寫法如下 :
picPicture.Left = - hsbWidth.Value
7. 拖曳垂直捲軸會觸動該捲軸的scroll事件，將圖片
發生上下捲動的程式碼寫在此事件處理程序中 :
當垂直捲軸往下捲時，圖片發生上捲效果，此時捲
軸的Vaule 值改變，相當於圖片控制項左上角往上移
動的水平距離，寫法如下 :
picPicture.Top = - vsbHeight.Value
【上機】
1. 建立表單
專案名稱命名為『NumericUpDown』。
將書附光碟images資料夾下的picture1.jpg、
picture2.jpg、picture3.jpg 放在目前專案的
bin/Debug 資料夾下。
在表單內，建立如下圖所示控制項 :
【上機】(續)
2. 設定各物件的屬性 :
預設名稱
Name
Text
Size
SizeMode
Max./
Min.
Panel1
(預設值)
--
240, 240
--
--
PictureBox1
picPicture
--
(預設值)
60, 60
--
HScrollBar1
hsbWidth
--
240, 16
--
--
VScrollBar1
vsbHeight
--
16, 240
--
--
Label1
(預設值)
切換圖片
(預設值)
--
--
NumericUpDown1
nudPicture
--
33, 22
--
3/1
' FileName : NumericUpDown .sln
01 Private Sub Form1_Load(ByVal sender …. ) Handles MyBase.Load
02
nudPicture.Value = 2 ‘ 載入2號圖片
03 End Sub
04 ' ---------------------------------------------------------------------------------------------05 Private Sub nudPicture_ValueChanged(ByVal sender … ) Handles
nudPicture.ValueChanged ‘第5~14行Value屬性值改變時先載入相對圖檔
06
picPicture.Image = Image.FromFile("picture" & nudPicture.Value _
& ".jpg")
07
picPicture.Location = New Point(0, 0) ‘圖片方塊左上角座標置於面板左上角
08
hsbWidth.Maximum = picPicture.Width – 240 ‘根據圖片寬度重設面板寬度
09
hsbWidth.Minimum = 0
10
hsbWidth.Value = 0
11
vsbHeight.Maximum = picPicture.Height - 240‘根據圖片高度重設面板高度
12
vsbHeight.Minimum = 0
13
vsbHeight.Value = 0
14 End Sub
16 Private Sub hsbWidth_Scroll(ByVal sender … ) Handles _
hsbWidth.Scroll
17
picPicture.Left = -hsbWidth.Value ‘根據hsbWidth的Value
18 End Sub ‘屬性值,來重設picPicture的Left值。加上負號就是將
19 ‘ -------------------- ‘圖片移出面板範圍外
------------
20 Private Sub vsbHeight_Scroll (ByVal sender …. ) Handles _
vsbHeight.Scroll
21
picPicture.Top = -vsbHeight.Value
22 End Sub
6-10 實例
【問題分析】
1. 使用Timer計時器控制項的Enabled屬性，來設定
足球是否移動。
2. 當足球碰到邊框時，只要改變X、Y值的正負，就可
達成足球彈跳的效果。
3. 檢查足球是否是否碰到右邊界時，不要忘記要扣掉
足球球體的寬度。檢查足球是否碰到下邊界時，除
了扣掉足球的寬度外還要扣掉表單的標題欄高度。
4. X和Y座標必須宣告在所有事件處理程序之外，以供
程序中各程序參用。每隔0.1秒執行tmrBall計時器的
Tick事件處理程序，將X和Y座標各加5Pixels，再檢
查足球是否有碰到上、下、左、右邊界，若有就變
更相關的座標。
【問題分析】(續)
5. 如下即是碰到上、下、左、右邊的處理方式。
【上機】
1. 建立表單
專案名稱命名為『Ball』。
使用書附光碟images資料夾下的ball.gif，載入
PictureBox1的Image項下。
在表單內，建立如下圖所示控制項 :
Timer1
(tmrBall)
【上機】(續)
2. 設定各物件的屬性 :
預設名稱
Name
Text
Image
Size
SizeMode
Button1
btnStart
開始
--
(預設值)
--
Button2
btnStop
停止
--
(預設值)
--
PictureBox1
picBall
--
Ball.My.Resources
.Resources.ball
(32,32)
AutoSize
Timer1
tmrBall
--
--
--
--
' FileName : Ball.sln
01 Dim x, y As Integer
‘ 宣告X、Y變數，供所有事件共用
02 ' --------------------------------------------------------------------------------------------------03 Private Sub Form1_Load(ByVal sender …. ) Handles MyBase.Load
04
x=5:y=5
05
tmrBall.Interval = 100
‘ 設定X、Y初值，也就是球移動的距離
06 End Sub
07 ' ---------------------------------------------------------------------------------------------------
08 Private Sub tmrBall_Tick(ByVal sender … ) Handles tmrBall.Tick
09
picBall.Location = New Point(picBall.Left + x, picBall.Top + y) ‘球新位置
10
If picBall.Left <= 0 Then x = -x
11
If picBall.Left >= Me.Width - picBall.Width Then x = -x‘球碰右邊界扣除球體
12
If picBall.Top <= 0 Then y = -y
13
If picBall.Top >= Me.Height - picBall.Height - 30 Then y = -y‘球碰下邊界
14 End Sub
‘球碰左邊界
‘球碰上邊界
‘除要扣除球的高度外還要再扣標題欄高度30
16 Private Sub btnStart_Click(ByVal sender …. ) Handles _
btnStart.Click
17
tmrBall.Enabled = True
‘計時器啟動球開始移動
18 End Sub
19 ' ---------------------------------------------------------------------------------20 Private Sub btnStop_Click(ByVal sender …. ) Handles _
btnStop.Click
21
tmrBall.Enabled = False
22 End Sub