第九章常用控制項 ( ㄧ )

Visual Basic 2008 從零開始學習手冊第九章常用控制項( ㄧ )

注意：本投影片僅供上課使用，非經同意，請勿散播或轉載。

第九章常用控制項( ㄧ )

資訊教育研究室製作


Visual Basic 2008 從零開始學習手冊

9.1 Timer 計時控制項使用 For 、 Do …Loop 等迴圈控制時間延遲相同程式碼使用不同速度 CPU 不同時間延遲。 Timer 計時控制項，用 CPU 計時器計時，不會發生問題。使用時機 - 製作動畫、延遲時間或每隔多少時間等。該控制項置於表單正下方，屬非視覺化控制項幕後執行。



一 . Timer 常用屬性



二 . Timer 常用事件

Tick 事件是計時控制項的預設事件Enabled 屬性為 True ，每當設定的 Interval 週期屬性值一到，會觸動 Tick 事件。將要執行的程式碼，寫在 Tick 事件處理程序中。



【範例演練】試設計一個看板 ( 範例： TVWall.sln)

當按鈕開始計時，每隔一秒鐘，交互顯示 - 淺藍底的 ” Show Time...” - 黃底的 ” 好戲上場 ! ” 訊息。

按鈕結束程式執行。



設計輸出入介面



‘ FileName : TVWall.sln

01 Public Class Form1

03

04 Private Sub Form1_Load (ByVal sender As System.Object, ByVal e As System. _ EventArgs) Handles MyBase.Load

05 lblShow.Text = ""

06 lblShow.Font = New Font(" 標楷體 ", 24, FontStyle.Bold)

08 Timer1.Interval = 1000

09 End Sub

11

12 Private Sub btnStart_Click(ByVal sender As System.Object, ByVal e As System. _ EventArgs) Handles btnStart.Click

13 Timer1.Enabled = True

14 End Sub

16

17 Private Sub btnEnd_Click(ByVal sender As System.Object, ByVal e As System. _ EventArgs) Handles btnEnd.Click

18 Application.Exit()

19 End Sub

20



21

22 Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As _ System.EventArgs) Handles Timer1.Tick

23 If (lblShow.Text = " 好戲上場 !") Then

24 lblShow.Text = "Show Time..."

25 lblShow.BackColor = Color.Aqua

26 Else

27 lblShow.Text = " 好戲上場 !"

28 lblShow.BackColor = Color.Yellow

29 End If

30 End Sub

31

32 End Class



9.2 PictureBox 圖片方塊控制項主要用來顯示圖檔和繪圖。

要將圖片顯示在圖片控制項上- 在設計階段預先載入。- 在執行階段透過 Image.FromFile() 方法載入。

允許載入圖檔格式： bmp 、 jpg 、 gif 、 wmf 等。

若動畫由 2~4 張連續 bmp 、 wmf 或 jpg 圖檔組成，將連續圖檔交互置於變動位置的 PictureBox 上，可展現出動畫。



9.2.1 PictureBox 常用屬性



9.2.2 圖檔的載入與移除一 . 在設計階段載入圖檔

屬性視窗中 Image 屬性值右邊的鈕按一下，進入「選取資源」對話方塊。



二 . 如何在執行階段載入圖檔

程式中使用 - Image.FromFile() 靜態方法 - New Bitmap() 物件來設定 Image 屬性值，載入圖檔。語法：

語法 1 ： PictureBox1.Image = Image.FromFile(path)

語法 2 ： PictureBox1.Image = New Bitmap(path)



程式執行階段載入圖檔：1. 載入固定路徑圖檔，圖檔需安裝在固定路徑，載入 C:\image\

ok.bmp 至 PictureBox1 的 Image 屬性：寫法 1 ： PictureBox1.Image=Image.FromFile(“C:\image\

ok.bmp”)

寫法 2 ： PictureBox1.Image=New Bitmap(“C:\image\ok.bmp”)

2. 載入相對路徑圖檔，路徑以 VB 可執行檔 (\bin\Debug

資料夾 ) 和圖檔的相對位置來表示，可避免使用者安裝在不同資料夾產生的錯誤，四種簡例：

欲載入的 ok.bmp 圖檔和可執行檔在同一資料夾下採用下面兩種寫法：

寫法 1 ： PictureBox1.Image = Image.FromFile(”ok.bmp”)

寫法 2 ： PictureBox1.Image = New Bitmap(”ok.bmp”)



欲載入的 ok.bmp 圖檔位在程式可執行檔的上一層資料夾內，可採用下面兩種寫法：

寫法 1 ： PictureBox1.Image = Image.FromFile(”..\ok.bmp”)

寫法 2 ： PictureBox1.Image = New Bitmap(”..\ok.bmp”)

欲載入的 ok.bmp 圖檔位在可執行檔的上一層的 image 資料夾內，可採用下面兩種寫法：

寫法 1 ： PictureBox1.Image=Image.FromFile(”..\image\ok.bmp”)

寫法 2 ： PictureBox1.Image=New Bitmap(”..\image\ok.bmp”)

欲載入的 ok.bmp 圖檔位在可執行檔的上兩層的 image 資料夾內，可採用下面兩種寫法：

寫法 1 ： PictureBox1.Image=Image.FromFile(”..\..\image\ok.bmp”)

寫法 2 ： PictureBox1.Image=New Bitmap(”..\..\image\ok.bmp”)



三 . 如何在設計階段移除圖檔在設計執行階段欲移除圖檔可用下列兩種方式：

點選 Image 屬性欄，然後按鍵，移除載入圖檔。在 Image 屬性欄上面或是右邊的鈕按右鍵，點選

重設功能即可。

四 . 如何在執行階段移除圖檔將 Image 屬性值設為 Nothing 就可將圖檔清除寫法：

PictureBox1.Image = Nothing



【範例演練】以「山景 .jpg 」當表單背景圖，以

brid0.png~brid5.png 六個連續圖片製作一個小鳥由左往右移動並依序輸流播放 bird0.png~brid5.png 的動畫，當小鳥超出表單的右邊界時，再由表單的左邊界出現並繼續由左往右移動。執行結果如下兩圖： ( 範例： Animation.sln)



‘ FileName : Animation.sln

01 Public Class Form1

02

03 Dim n As Integer = 0

04 Dim img(5) As Bitmap

05

06 Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System. EventArgs) Handles MyBase.Load

07

08 For i As Integer = 0 To img.GetUpperBound(0)

09 img(i) = New Bitmap("bird" & i & ".png")

10 Next

11 Me.BackgroundImage = Image.FromFile(" 山景 .jpg")

12 Me.Width = 430

13 Me.Height = 300

14

15 Me.AutoSizeMode = AutoSizeMode.GrowAndShrink

16 Me.MaximizeBox = False '



17 Timer1.Enabled = True 18 Timer1.Interval = 50 19 PictureBox1.Image = img(0)20 PictureBox1.Width = 7021 PictureBox1.Height = 5522 PictureBox1.SizeMode = PictureBoxSizeMode.Zoom23 PictureBox1.BackColor = Color.Transparent 24 End Sub26 Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System. _

EventArgs) Handles Timer1.Tick27 n += 129 If (n > img.GetUpperBound(0)) Then30 n = 031 End If32 33 If (PictureBox1.Left >= Me.Width) Then34 PictureBox1.Left = 0 - PictureBox1.Width35 End If36 PictureBox1.Left += 537 PictureBox1.Image = img(n) 38 End Sub40 End Class



9.3 GroupBox / Panel 容器控制項群組控制項或稱為框架控制項和表單一樣在該控制項內放置其他控制項。



9.3.1 GroupBox 群組控制項使用群組控制項好處：

可將控制項分門別類。搬移群組，裡面的控制項跟隨移動。同性質選項按鈕或核取方塊可用 GroupBox 或 Panel 來存放。GroupBox 內控制項位置以容器左上角為基準，不以表單為基準。



GroupBox 常用屬性



9.3.2 Panel 面板控制項面板控制項具備有容器的功能。裡面可放置其他控制項。和群組控制項外觀不同是左上角無法顯示文字。面板控制項允許有捲軸，可佔用輸出入介面較小的空間。



Panel 常用屬性



9.4 RadioButton / CheckBox 選擇控制項 RadioButton 選項按鈕控制項，具排他性只能單選，如性別、年收入。CheckBox 核取方塊控制項，每個選項都可獨立選擇互不影響，複選性問題可用。



9.4.1 RadioButton 選項按鈕控制項



二 . RadioButton 常用事件在選項按鈕上按一下，會變更 Checked 屬性值。依序觸動 CheckedChanged 和 Click 兩個事件。若該按鈕已被選取，重複點選，因 Checked 屬性值不改變，只會觸發 Click 事件。判斷勾選狀態程式碼，寫在 CheckedChanged 事件中。

1. CheckedChanged 事件為按鈕控制項的預設事件。當選項按鈕控制項的Checked 屬性值改變時，觸發此事件。

2. Click 事件當選項按鈕控制項被滑鼠點選時，會觸發此事件。



三 . 如何在 GroupBox 內建立選項按鈕



【範例演練】使用

GroupBox 、 RadioButton 、 Label 、 Button 、 PictureBox…

等控制項設計最受歡迎筆電投票程式。如下圖，可在廠牌 GroupBox 內選取筆電型號的選項按鈕後則會顯示該台筆電的圖示，接著按鈕則 GropuBox 得票數內對應的票數會進行加 1 。 ( 範例： RadioButtonDemo.sln)



建立輸出入介面



‘ FileName : RadioButtonDeom.sln01 Public Class Form1

02

03 Private Sub Form1_Load(ByVal sender As System.Object, ByVal e _ As System.EventArgs) Handles MyBase.Load

04 rdbHp.Checked = True

05 picNb.Image = New Bitmap("hp.jpg")

06 picNb.SizeMode = PictureBoxSizeMode.AutoSize

07 picNb.BorderStyle = BorderStyle.Fixed3D

08 End Sub

10

11 Private Sub rdbHp_CheckedChanged(ByVal sender As System. Object, _ ByVal e As System.EventArgs) Handles rdbHp.CheckedChanged

12 picNb.Image = New Bitmap("hp.jpg")

13 End Sub

14



15

16 Private Sub rdbBenq_CheckedChanged(ByVal sender As System.Object, ByVal _ e As System.EventArgs) Handles rdbBenq.CheckedChanged

17 picNb.Image = New Bitmap("benq.jpg")

18 End Sub

19

20

21 Private Sub rdbAcer_CheckedChanged(ByVal sender As System.Object, ByVal _ e As System.EventArgs) Handles rdbAcer.CheckedChanged

22 picNb.Image = New Bitmap("acer.jpg")

23 End Sub

24

25



26 Private Sub btnOk_Click(ByVal sender As System.Object, ByVal e As System. _ EventArgs) Handles btnOk.Click

27 If rdbHp.Checked Then

28 lblHp.Text = (Integer.Parse(lblHp.Text) + 1).ToString()

29 ElseIf rdbBenq.Checked Then

30 lblBenq.Text = (Integer.Parse(lblBenq.Text) + 1).ToString()

31 ElseIf rdbAcer.Checked Then

32 lblAcer.Text = (Integer.Parse(lblAcer.Text) + 1).ToString()

33 End If

34 End Sub

35

36 End Class



9.4.2 CheckBox 核取方塊控制項核取方塊控制項，每個選項都可以任意選取彼此互不影響，複選性選項可用它來設計。CheckBox 核取方塊控制項除可顯示文字外，上面也可顯示圖片。



一 . CheckBox 常用屬性



二 . CheckBox 常用事件當 ThreeState 屬性 = False ，按核取方塊控制項時依序觸動 CheckedChanged 、 CheckStateChanged 和 Click 事件。判斷核取方塊勾選狀態程式碼，寫在其中一個事件中皆可。當 ThreeState =True ，若勾選狀態為「未確定」，不會觸動 CheckedChanged 事件。

1. CheckedChanged 事件為核取方塊控制項預設事件。當核取方塊控制項的 Checked屬性值改變時，觸發此事件。

2. CheckStateChanged 事件當核取方塊控制項的 CheckState 屬性值改變時，觸發此事件。

3. Click 事件當核取方塊控制項被滑鼠點選時，觸發此事件。



三 . 如何在 GroupBox 內建立核取方塊



【範例演練】設計相機易購網程式。在「機型」 GroupBox 選

項只能單選，在「配件」 GroupBox 選項可多選，只要有選取會隨時更新「購買總金額：」。各機型和配件單價如下圖表單所示。 ( 範例：CheckBoxDemo.sln)



設計輸出入介面



‘ FileName : CheckBoxDemo.sln01 Public Class Form102 03 Dim priceDsc, priceM1G, priceReader, priceCharge As Integer0405 Private Sub rdbP10_CheckedChanged(ByVal sender As System.Object, _

ByVal e As System.EventArgs) Handles _ rdbP10. CheckedChanged, rdbD70.CheckedChanged, _ rdbP20. CheckedChanged, chkReader. CheckedChanged, _ chkM1G. CheckedChanged, chkCharge. CheckedChanged

06 If rdbP10.Checked Then 07 priceDsc = 1500008 End If09 If (rdbP20.Checked) Then 10 priceDsc = 1000011 End If12 If rdbD70.Checked Then 13 priceDsc = 2500014 End If15 If chkM1G.Checked Then 16 priceM1G = 100017 Else 18 priceM1G = 019 End If



20 If chkReader.Checked Then 21 priceReader = 50022 Else 23 priceReader = 024 End If25 If chkCharge.Checked Then26 priceCharge = 150027 Else 28 priceCharge = 029 End If30 31 lblTotal.Text = "購買總金額： " & (priceDsc + priceM1G + priceReader + _

priceCharge)32 End Sub3334 End Class

Visual Basic 2008 從零開始學習手冊第九章常用控制項( ㄧ )

Take a Break Take a Break ….….



Take a Take a Break ….Break ….

第九章 常用控制項 ( ㄧ )

Documents

第九章常用控制項 ( ㄧ )