第九章 常用控制項 ( ㄧ )

1. 第九章 常用控制項(ㄧ) 資訊教育研究室 製作 注意：本投影片僅供上課使用，非經同意，請勿散播或轉載。

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

3. 一. Timer 常用屬性

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

5. 【範例演練】 試設計一個看板 (範例：TVWall.sln)  當按 鈕開始計時，每隔一秒鐘，交互顯示- 淺藍底的 ”Show Time...” - 黃底的 ” 好戲上場! ” 訊息。  按 鈕結束程式執行。

6. 設計輸出入介面

7. ‘ 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

8. 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. 9.2 PictureBox 圖片方塊控制項 • 主要用來顯示圖檔和繪圖。 • 要將圖片顯示在圖片控制項上- 在設計階段預先載入。- 在執行階段透過 Image.FromFile() 方法載入。 • 允許載入圖檔格式：bmp、jpg、gif、wmf 等。 • 若動畫由 2~4 張連續 bmp、wmf 或 jpg 圖檔組成，將連續圖檔交互置於變動位置的 PictureBox上， 可展現出動畫。

10. 9.2.1 PictureBox常用屬性

11. 9.2.2 圖檔的載入與移除 一. 在設計階段載入圖檔 • 屬性視窗中 Image 屬性值右邊的 鈕按一下，進入「選取資源」對話方塊。

12. 二.如何在執行階段載入圖檔 • 程式中使用- Image.FromFile() 靜態方法- New Bitmap() 物件來設定 Image 屬性值，載入圖檔。 • 語法： 語法1：PictureBox1.Image = Image.FromFile(path) 語法2：PictureBox1.Image = New Bitmap(path)

13. 程式執行階段載入圖檔： 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”)

14. 欲載入的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”)

15. 三.如何在設計階段移除圖檔 • 在設計執行階段欲移除圖檔可用下列兩種方式：  點選 Image 屬性欄，然後按 鍵，移除載入圖檔。 在 Image 屬性欄上面或是右邊的 鈕按右鍵，點選 重設功能即可。 四.如何在執行階段移除圖檔 • 將 Image屬性值設為 Nothing 就可將圖檔清除 • 寫法： PictureBox1.Image = Nothing

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

18. ‘ 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 '

19. 17 Timer1.Enabled = True 18 Timer1.Interval = 50 19 PictureBox1.Image = img(0) 20 PictureBox1.Width = 70 21 PictureBox1.Height = 55 22 PictureBox1.SizeMode = PictureBoxSizeMode.Zoom 23 PictureBox1.BackColor = Color.Transparent 24 End Sub 26 Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System. _ EventArgs) Handles Timer1.Tick 27 n += 1 29 If (n > img.GetUpperBound(0)) Then 30 n = 0 31 End If 32 33 If (PictureBox1.Left >= Me.Width) Then 34 PictureBox1.Left = 0 - PictureBox1.Width 35 End If 36 PictureBox1.Left += 5 37 PictureBox1.Image = img(n) 38 End Sub 40 End Class

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

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

22. GroupBox常用屬性

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

24. Panel 常用屬性

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

26. 9.4.1 RadioButton 選項按鈕控制項

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

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

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

30. 建立輸出入介面

31. ‘ FileName : RadioButtonDeom.sln 01 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

32. 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

33. 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

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

35. 一. CheckBox常用屬性

36. 二. CheckBox 常用事件 • 當 ThreeState 屬性 = False，按核取方塊控制項時依序觸動 CheckedChanged、CheckStateChanged 和 Click 事件。 • 判斷核取方塊勾選狀態程式碼，寫在其中一個事件中皆可。 • 當 ThreeState =True，若勾選狀態為「未確定」，不會觸動 CheckedChanged事件。 1. CheckedChanged事件為核取方塊控制項預設事件。當核取方塊控制項的 Checked屬性值改變時，觸發此事件。 2. CheckStateChanged事件當核取方塊控制項的CheckState屬性值改變時，觸發此事件。 3. Click事件當核取方塊控制項被滑鼠點選時，觸發此事件。

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

38. 【範例演練】 設計相機易購網程式。在「機型」GroupBox選項只能單選，在「配件」GroupBox選項可多選，只要有選取會隨時更新「購買總金額：」。各機型和配件單價如下圖表單所示。(範例：CheckBoxDemo.sln)

39. 設計輸出入介面

40. ‘ FileName : CheckBoxDemo.sln 01 Public Class Form1 02 03 Dim priceDsc, priceM1G, priceReader, priceCharge As Integer 04 05 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 = 15000 08 End If 09 If (rdbP20.Checked) Then 10 priceDsc = 10000 11 End If 12 If rdbD70.Checked Then 13 priceDsc = 25000 14 End If 15 If chkM1G.Checked Then 16 priceM1G = 1000 17 Else 18 priceM1G = 0 19 End If

41. 20 If chkReader.Checked Then 21 priceReader = 500 22 Else 23 priceReader = 0 24 End If 25 If chkCharge.Checked Then 26 priceCharge = 1500 27 Else 28 priceCharge = 0 29 End If 30 31 lblTotal.Text = "購買總金額：" & (priceDsc + priceM1G + priceReader + _ priceCharge) 32 End Sub 33 34 End Class

42. Take a Break ….

43. Take a Break ….