第九章 常用控制項 ( 一 ) 9.1 Timer 計時控制項 9.3 GroupBox/Panel 容器控制項 9.2 PictureBox 圖片方塊控制項 9.4 RadioButton/CheckBox 選擇控制項 備註 : 可依進度點選小節
9.1 Timer 計時控制項 設計程式時, 若想製作動畫 延遲時間或每隔多少時間就執行某項工作等都可用計時控制項來完成 如使用 for while{ } do{ } while 迴圈來控制時間延遲程式, 相同程式碼會因不同電腦不同速度的 CPU, 得到不同時間延遲 改用 Timer 計時控制項, 因用 CPU 本身的計時器來計時, 不會發生上述問題 在表單建立計時控制項, 該控制項不置於表單上, 在表單正下方, 表該控制項屬於非視覺化控制項 非視覺化控制項在程式執行時是幕後執行, 在表單上看不到計時控制項 2
3
一. Timer 常用屬性 屬性 Interval Enabled 說明用來設定計時器的的週期時間, 預設值為 1000, 單位為毫秒 (10-3 秒 ) 所以 Interval 屬性值若設為 1000 表示每隔一秒就會去執行計時控制項的 Tick 事件內的程式碼一次, 其先決條件是 Enabled 屬性必須先設為 True, 將電腦的計時器啟動才有效 用來設定是否啟動計時器 若設為 False, 表示計時器不啟動 若設為 True 時, 表示啟動計時器開始計時 預設值為 False 4
二. Timer 常用事件 Tick 事件是計時控制項特有的事件如 Enabled =True, 每當設定的 Interval 屬性值週期一到, 會觸動 Tick 事件 將該事件要執行的程式碼, 撰寫在 Tick 事件處理函式中 5
試設計一個看板, 當按鈕開始計時, 每隔一秒鐘, 交互顯示淺藍底的 Show Time... 及黃底的 好戲上場! 訊息 按鈕結束程式執行 6
上機 Step1 設計輸出入介面 7
Step2 撰寫程式碼 // FileName : TVWall.sln 01 02 private void Form1_Load(object sender, EventArgs e) 03 { 04 lblshow.text = ""; 05 lblshow.font = new Font(" 標楷體 ", 24, FontStyle.Bold); 06 // 設定 timer1 控制項每 1 秒執行 timer1_tick 事件處理函式一次 07 timer1.interval = 1000; 08 } 8
09 // 按下 btnstart 鈕時執行 btnstart_click() 事件處理函式 10 private void btnstart_click(object sender, EventArgs e) 11 { 12 timer1.enabled = true; // 啟動 timer1 計時器 13 } 14 // 按下 btnend 鈕時執行 btnend_click() 事件處理函式 15 private void btnend_click(object sender, EventArgs e) 16 { 17 Application.Exit(); // 結束程式 18 } 19 // 每 1 秒執行 timer1_tick 事件處理函式一次 20 private void timer1_tick(object sender, EventArgs e) 21 { 22 if (lblshow.text == " 好戲上場!") 23 { 24 lblshow.text = "Show Time..."; 25 lblshow.backcolor = Color.Aqua; 26 } 9
27 else 28 { 29 lblshow.text = " 好戲上場!"; 30 lblshow.backcolor = Color.Yellow; 31 } 32 } 10
9.2 PictureBox 圖片方塊控制項 圖片方塊控制項主要是用來顯示圖檔, 它也允許您在該控制項上面繪製圖形 若要將圖片或影像顯示在圖片控制項上, 可以在設計階段預先載入, 也可以在執行階段透過 Image.FromFile() 方法載入 PictureBox 圖片控制項允許載入的圖檔格式主要有 bmp jpg gif wmf 等 若一幅動畫是由 2-4 張連續 bmp wmf 或 jpg 圖檔組成, 只要將這些連續圖檔交互置於變動位置的 PictureBox 控制項上, 即可展現出生動的動畫 11
9.2.1 PictureBox 常用屬性 下表為 PictureBox 圖片方塊控制項常用屬性 屬性 Image SizeMode Visible 說明設定顯示的圖形檔, 預設無 設定圖形在 PictureBox 控制項上顯示的位置 : 1 Normal( 預設值 ): 圖形由控制項的左上角開始放起, 圖形檔長寬不變 2 CenterImage: 顯示在控制項的正中央 3 AutoSize: 控制項依圖形大小縮放 4 StretchImage: 圖形依控制項大小縮放 設定控制項是否顯現 1 True: 表示可顯示 ( 預設值 ) 2 False: 表示隱藏該控制項 12
9.2.2 圖檔的載入與移除 圖形檔可在設計階段或者在執行階段才載入 使用時機當然視當時需求而定 在設計階段載入圖檔 13
14
二. 如何在執行階段載入圖檔 程式中使用 Image.FromFile() 靜態方法和 靜態方法和 new Bitmap() 物件來設定 Image 屬性值, 達到載入圖檔的目的 語法 1. picturebox1.image=image.fromfile(path); // path 為檔案路徑 2. picturebox1.image=new Bitmap(path); 15
簡例 : 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 ); 16
2. 載入相對路徑的圖檔, 路徑以 C# 執行檔 執行檔 (\bin\debug 資料夾 ) 和圖檔的相對位置來表示, 可以避免使用者安裝在不同資料夾產生的錯誤, 如下四種簡例示範 : 1 欲載入的 ok.bmp 圖檔和執行檔在同一資料夾下, 可採用下面兩種寫法 : 寫法 寫法 1:pictureBox1.Image=Image.FromFile( ok.bmp ); 寫法 寫法 2:pictureBox1.Image=new Bitmap( ok.bmp ); 17
2 欲載入的 ok.bmp 圖檔位在程式執行檔的上一層資料夾內, 可採用下面兩種寫法 : 寫法 1:pictureBox1.Image=Image.FromFile(..\\ok.bmp ); 寫法 2:pictureBox1.Image=new Bitmap(..\\ok.bmp ); 3 欲載入的 ok.bmp 圖檔位在執行檔的上一層的 image 資料夾內, 可採用下面兩種寫法 : 寫法 1: picturebox1.image=image.fromfile(..\\image\\ok.bmp ); 寫法 2:pictureBox1.Image=new Bitmap(..\\image\\ok.bmp ); 18
4 欲載入的 ok.bmp 圖檔位在執行檔的上兩層的 image 資料夾內, 可採用下面兩種寫法 : 寫法 1: picturebox1.image=image.fromfile(..\\..\\image\\ok.bmp ); 寫法 2: picturebox1.image=new Bitmap(..\\..\\image\\ok.bmp ); 19
三. 如何在設計階段移除圖檔 1. 點選 Image 屬性欄, 然後按的圖檔 2. 在 Image 屬性上面或是右邊的點選 重設重設 功能即可功能即可 鍵, 可移除原先載入鈕上按右鍵, 四. 如何在執行階段移除圖檔將 PictureBox 的 Image 屬性值設為 null 就可將圖檔清除, 寫法將 picturebox1 的圖檔清除 picturebox1.image = null; 20
以 山景.jpg 當表單背景圖, 以 brid0.png~brid5.png 六個連續圖片製作一個小鳥由左往右移動並依序輸流播放 bird0.png~brid5.png 的動畫, 當小鳥超出表單的最右邊時會再由表單最左邊出現並繼續由左往右移動 21
22
23
完整程式碼 01 FileName : Animation.sln 02 int n = 0; // 成員變數 03 Bitmap[] img = new Bitmap[6]; 04 private void Form1_Load(object sender, EventArgs e) 05 { 06 07 for (int i = 0; i <= img.getupperbound(0); i++) 08 { 09 img[i] = new Bitmap("bird" + i.tostring() + ".png"); 10 } 24
11 this.backgroundimage = new Bitmap(" 山景.jpg"); 12 this.width = 430; 13 this.height = 300; 14 // 設定表單無法調整大小 15 this.autosizemode = AutoSizeMode.GrowAndShrink; 16 this.maximizebox = false; 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 } 25 25
26 private void timer1_tick(object sender, EventArgs e) 27 { 28 n++; 29 // 若 n 大於等於 img 陣列的最大維度, 則 n 設為 0, 由 brid0.png 開始播放 30 if (n > img.getupperbound(0)) 31 { 32 n = 0; 33 } 34 // 若 picturebox1 超出表單的寬度時, 使 picturebox1 由表單左邊出現 35 if (picturebox1.left >= this.width) 36 { 37 picturebox1.left = 0 - picturebox1.width; 38 } 39 picturebox1.left += 5; 40 picturebox1.image = img[n]; 41 } 26
9.3 GroupBox / Panel 容器控制項 GroupBox 群組控制項和 Panel 面板控制項和表單一樣都具備具備有容器 (Container) 的功能, 上面都可放置其他其他控制項, 以便對上面控制項對上面控制項分門別類, 使得畫面排列整齊容易操排列整齊容易操作 如下圖 接龍接龍 遊戲的戲的 選項選項 對話方塊中, 使用 發牌 和 計分 兩個兩個群組控制項組控制項 27
9.3.1 GroupBox 群組控制項 群組控制項或組控制項或稱為框架框架控制項可以和表單一控制項可以和表單一樣在該控制項內放置其他其他的控制項的控制項 使用群組控制項好處是可將控制項組控制項好處是可將控制項分門別類, 調整輸出入介面時, 搬移群組控制項時組控制項時裡面的控制項亦跟隨亦跟隨移動移動 同性質選項按鈕或選項按鈕或核取核取方塊可用 GroupBox 或 Panel 來存放 GroupBox 內的控制項位置是以容器的左上器的左上角為基準, 而不是以表單為基準基準 28
GroupBox 常用屬性 屬性 Text 說明設定群組控制項左上角顯示的標題文字, 該文字可以提示使用者 預設名稱為 groupbox1 29
9.3.2 Panel 面板控制項 面板控制項也具備具備有容器的功能, 裡面可放置面可放置其他的控制項的控制項 和群組控制項組控制項外觀外觀最大的不同是, 左上角無角無法顯示文字 但面板控制項允許有面板控制項允許有捲軸, 輸出入介面佔用較小的表單空間 30
Panel 常用屬性 屬性 BorderStyle AutoScroll 說明設定面板控制項的外框, 其屬性值有 None( 無邊框 )- 為預設值 FixedSingle( 單線框 ) Fixed3D( 立體邊框 ) 面板控制項在執行階段, 使用者是不能拖曳邊框來調整大小 設定面板控制項內的控制項大小若比面板大時是否顯示捲軸 預設值為 True 表顯示捲軸 ; 若設為 False 表不顯示捲軸 右圖是 Panel 上面的控制項範圍超過面版大小且此屬性設為 True 時, 會自動顯示捲軸的情形 : 31
9.4 RadioButton / CheckBox 選擇控制項 當我們要填寫一張申請表時, 表中有些資料是使用勾選, 例如性別 年收入年收入 購買項目 等 如將這張申請表, 改以電腦方式輸入, 這些勾選的資料就可以使用 RadioButton 選項按鈕和 CheckBox 核取方塊控制項來設計 RadioButton 選項按鈕控制項, 具有排他性也就是只能選擇其中之一, 所以單選性的選項可用它如性別 年收入年收入 CheckBox 核取方塊控制項, 每個選項都可獨立選擇互不影響, 複選性問題可用它, 例如下圖購物選單 左邊在群組控制項上面置入選項按鈕控制項 ; 在右邊群組控制項置入核取方塊控制項 32
9.4.1 RadioButton 選項按鈕控制項 選項按鈕控制項, 具有排他排他的特性一組多個 Radio Button 選項按鈕控制項中只能選擇其擇其中之一 若有兩組以上選項按鈕時, 可用群組或面板控制項來加以區隔 RadioButton 選項按鈕控制項上面除可顯示文字外, 也可顯示圖片 33
一. RadioButton 常用屬性 34
二. RadioButton 常用事件當在選項按鈕控制項按一下, 會變更 Checked 屬性值, 且同時依序觸動 CheckedChanged 和 Click 兩個事件 若該按鈕已被已被選取, 重複點選時因 Checked 屬性值不改變, 只會觸發 Click 事件 判斷勾選狀態的程式碼, 都寫在 CheckedChanged 事件處理函式中 1. CheckedChanged 事件當選項按鈕控制項的 Checked 屬性值改變時, 會觸發 Checked Changed 事件 2. Click 事件當選項按鈕控制項被滑鼠被滑鼠點選時, 會觸發 Click 事件 35
使用 等控制項設計最受歡迎筆受歡迎筆電投票投票程式程式 下圖可在廠牌 GroupBox 內選取筆取筆電型號型號的選項按鈕後會顯示該台筆台筆電的圖示, 接著按鈕則 GropuBox 得票數票數內對內對應的票數票數會進行加 1 使用 GroupBox RadioButton Label Button PictureBox 36
37
完整程式碼 // FileName : RadioButtonDeom.sln 01 private void Form1_Load(object sender, EventArgs e) 02 { 03 rdbhp.checked = true; 04 picnb.image = new Bitmap("hp.jpg"); 05 picnb.sizemode = PictureBoxSizeMode.AutoSize; // 使 picnb 與圖的大小相同 06 picnb.borderstyle = BorderStyle.Fixed3D; 07 } 09 private void rdbhp_checkedchanged(object sender, EventArgs e) 10 { 11 picnb.image = new Bitmap("hp.jpg"); 12 } 14 private void rdbbenq_checkedchanged(object sender, EventArgs e) 15 { 16 picnb.image = new Bitmap("benq.jpg"); 17 } 38
19 private void rdbacer_checkedchanged(object sender, EventArgs e) 20 { 21 picnb.image = new Bitmap("acer.jpg"); 22 } 24 private void btnok_click(object sender, EventArgs e) 25 { 26 if (rdbhp.checked) 27 { 28 lblhp.text = (Convert.ToInt32(lblHp.Text) + 1).ToString(); 29 } 30 else if (rdbbenq.checked) 31 { 32 lblbenq.text = (Convert.ToInt32(lblBenq.Text) + 1).ToString(); 33 } 34 else if (rdbacer.checked) 35 { 36 lblacer.text = (Convert.ToInt32(lblAcer.Text) + 1).ToString(); 37 } 38 } 39
9.4.2 CheckBox 核取方塊控制項 核取方塊控制項, 每個選項都可任意任意選取彼此間互不影響 複選性選項可用它來設計選性選項可用它來設計 CheckBox 核取方塊控制項除可以顯示方塊控制項除可以顯示文字外, 上面也可顯示圖片 40
一. CheckBox 常用屬性 41
二. CheckBox 常用事件 當 ThreeState = False 時, 使用者按核取方塊控制項時會依序觸動 CheckedChanged CheckStateChanged 和 Click 三個事件 判斷核取方塊方塊勾選狀態的程式碼, 寫在其中一個事件中皆可 當 ThreeState =True 時, 若使用者點選勾選狀態為 未確未確定 時, 不會觸動 CheckedChanged 事件 42
1. CheckedChanged 事件當核取核取方塊控制項的 Checked 屬性值改變時, 會觸發此事件事件 2. CheckStateChanged 事件當核取核取方塊控制項的 CheckState 屬性值改變時會觸發此事件事件 3. Click 事件當核取核取方塊控制項方塊控制項被滑鼠被滑鼠點選時, 就會觸發此事件事件 43
設計相機易購網易購網程式程式 在 機型 GroupBox 選項只能單選, 在 配件 GroupBox 選項可多選, 只要有選取會隨時更新更新 購買總金額 : 各機型和配件單件單價如下圖表單如下圖表單所示 44
上機 設計輸出入介面 45
完整程式碼 // FileName : CheckBoxDemo.sln 01 int pricedsc, pricem1g, pricereader, pricechange; 02 private void rdbp10_checkedchanged(object sender, EventArgs e) 03 { 04 if (rdbp10.checked) // 選取 rdbp10 05 { 06 pricedsc = 15000; 07 } 08 if (rdbp20.checked) // 選取 rdbp20 09 { 10 pricedsc = 10000; 11 } 46
12 if (rdbd70.checked) 13 { 14 pricedsc = 25000; 15 } 16 if (chkm1g.checked) 17 { 18 pricem1g = 2000; 19 } 20 else 21 { 22 pricem1g = 0; 23 } 24 if (chkreader.checked) 25 { 26 pricereader = 500; 27 } 47
28 else 29 { 30 pricereader = 0; 31 } 32 if (chkcharge.checked) 33 { 34 pricechange = 1500; 35 } 36 else 37 { 38 pricechange = 0; 39 } 41 lbltotal.text = " 購買總金額 :" + (pricedsc + pricem1g + pricereader + pricechange).tostring(); 42 } 48
設定共用事件當在三個選項按鈕控制項或三個核取核取方塊控制項上按一下都會觸動該控制項的 CheckedChanged 事件由於這六個控制項都做同樣的事的事情, 可共用同一個 rdbp10_checkedchanged 事件處理函式 49
50