第五章 視窗程式設計

1. 第五章 視窗程式設計 任課老師：江啟惠

2. Visual Basic Studio 起始頁畫面

3. 2.新增專案 • 在起始頁左邊「最近使用的專案」窗格中最後一行點選 「建立：」 的『專案(P)... 』鈕。 • 或是執行功能表【 檔案(F) / 新增(N) / 專案(P) 】指令，就會開啟「新增專案」對話方塊，供我們對新專案做相關的設定。

4. 3.設定新專案條件 (1)在「專案類型(P)：」窗格中點選「Visual Basic」，設定要建立一個屬於Visual Basic 的專案。 (2)在「範本(T)：」窗格中點選 「 Windows應用程式」，設定要建立可以在Windows作業系統中執行的視窗應用程式。 (3)在「名稱(N)：」文字方塊中輸入專案的名稱，預設專案名稱為「Windows Application1」。 (4)在「位置(L)：」文字方塊中輸入專案要存放的路徑名稱。 (5)若勾選「為方案建立目錄」，表示允許為該方案建立一個資料夾。 一般都不勾選此項目，以免開啟專案時會點選多層的資料夾。 (6)按『確定』鈕後，系統將來會在「位置(L)：」欄位上指定的位置建立指定名稱的專案。

5. Visual Basic 2005的IDE環境

6. 4.儲存專案 • 執行【檔案(F)/全部儲存(L)】進行儲存專案，接著會出現下圖儲存專案視窗。 • 在「名稱(N)」請輸入指定的專案名稱。 • 在「位置(L)」設定專案的儲存位置。 • 完成後可按『儲存』 鈕儲存專案。

7. 方案總管的固定 • 若方案總管採彈跳式未固定，請移動滑鼠到右邊界「方案總管」處按一下，方案總管會由右邊界向左彈出。當滑鼠離開方案總管時又自動彈回隱藏起來。

8. 方案總管的固定 • 移動滑鼠到「方案總管」視窗上方右邊 平躺的圖釘「自動隱藏」圖示上按一下，變成 直立的圖釘圖示，表示將方案總管和屬性視窗黏在右邊界，以方便在編輯程式碼或屬性設定時操作。

9. 將方案總管和屬性視窗黏在視窗的右邊界 • 分別移動滑鼠到方案總管和屬性視窗的標題欄上，壓滑鼠左鍵拖曳出來會變成浮動式視窗。

10. 設定工具箱 • 若你的電腦解析度設為1024x768，在IDE整合開發環境可以在功能表列的正下方看到完整的標準工具列。 • 若螢幕解析度是800x600，導致標準工具列長度太長而無法完整顯現，此時標準工具列的最右邊會出現 「工具選項」圖示，按此圖示會將未顯示的工具顯示出來供你點選。

11. 設定工具箱 • 點選標準工具列靠右邊的 「工具箱」 圖示，在IDE的左窗格會出現工具箱。若在標準工具列找不到 工具箱圖示，可能視窗未最大化，若最大化仍未找到可能是螢幕解析度設為800x600，此時可如下圖按照數字順序打開工具箱。 1 2

12. 設計工具窗格放置表單、程式碼、說明、起始頁…等標籤頁供切換。設計工具窗格放置表單、程式碼、說明、起始頁…等標籤頁供切換。 方案總管用來管理方案內各種檔案 • Visual Basic 常用的IDE整合開發環境 工具箱放置系統提供的各種工具 屬性視窗可快速設定各個控制項的屬性值

13. 工具箱 • 工具箱中放置系統所提供的各種控制項工具，只要在該工具圖示上快按兩下，就可以在表單建立一個控制項物件。 固定式工具箱 彈跳式工具箱

14. 方案總管 • 方案（Solution）就像是一個容器，它可以包含多個專案（Project），而一個專案通常含有多個項目。

15. 屬性視窗 • 作用控制項所對應的所有屬性會出現在「屬性視窗」供你以視覺化的操作方式選取和設定。

16. 設計工具標籤頁 • 「設計工具」標籤頁是用來顯示和設計表單。 開啓程式碼標籤頁 設計工具標籤頁 程式碼標籤頁 開啓設計工具標籤頁

17. 虛線框為「設計工具」標籤頁範圍

18. 程式碼標籤頁

19. 控制項編輯與命名 • 工具箱的展開和縮小 7-22

20. 3.在AutoSize屬性欄位右側的下拉鈕按一下，出現清單。 • 如何建立控制項-直接拖曳 2.直接拖曳到表單適當位置，會產生一個預設大小的標籤控制項 4.選取False屬性值，將控制項改成手動調整。 1.滑鼠點選標籤工具不放 5.拖曳標籤控制項的白色小方框，來調整控制項的大小。 7-23

21. 控制項的排列 • 當移動Button1按鈕控制項時，若按鈕四周出現藍色線表示這兩個控制項邊框有對齊。若出現粉紅色線條表示控制項內的文字互相對齊。

22. 控制項的排列 –格式功能 • 先利用「指標」工具框選欲做排列的多個控制項，再移動滑鼠點選以哪個控制項作為基準，此時當基準的控制項四週會出現小白框，其他控制項出現小黑框，然後執行「格式」功能表的功能指令。

23. 如何刪除控制項 • 刪除控制項的方法非常簡單，先選取要刪除的控制項或框住欲刪除的多個控制項，壓滑鼠右鍵由快顯功能表中選取【刪除(D)】，也可以直接按鍵盤的 鍵即可。 • 若欲復原直接按標準工具列的 復原鈕即可。

24. 控制項的命名 • 建立一個控制項時，系統會產生一個預設的名稱給該控制項，以方便在程式中分辨和呼叫，這個預設的名稱是放在Name屬性中。譬如：標籤控制項預設名稱為Label1、Label2、Label3…）。 • 當表單中有許多控制項時，若用預設名稱會很難區分，所以允許程式設計者重新命名，改以有意義的名稱，提高程式的可讀性。 • 控制項命名規則 • 建議名稱的前三個字母為控制項名稱的小寫英文縮寫，後面接著是該控制項有意義的名稱（第一個字母建議為大寫）。例如：某個按鈕的功能是用來結束程式，可以命名為btnExit。 • 名稱可以使用英文字母、數字、底線和中文，但不可以使用標點符號和空白。 • 名稱可以用英文字母、底線或中文開頭。 • 盡量使用有意義的名稱，日後程式維護程式容易。

25. 常用控制項建議命名名稱：

26. 視窗應用程式的架構 • 開發應用程式的步驟： • 分析問題 ：根據已知條件輸入格式、計算或處理方式、輸出哪些結果和格式，使用演算法或流程圖規劃出程式的執行流程，以免設計出來的程式，執行時發生邏輯上的錯誤。 • 設計輸出入介面 ：根據程式需求在表單上面建立適當的控制項，並設定相關屬性值。 • 撰寫程式碼 ：在適當的事件程序中，按照演算法或流程圖撰寫相關程式碼，並進行程式偵錯和驗證執行結果是否正確。

27. 直接選取「Form1.vb*」。 • 在控制項壓滑鼠右鍵，由快顯功能表中選取【程式碼檢視(C)】。 • 在方案總管窗格選取 程式碼檢視圖示。 • 執行功能表的【檢視(V) / 程式碼(C) 】指令。 • 進入「程式碼檢視」模式撰寫程式的方式

28. 進入在Button1按鈕控制項的Click事件中撰寫程式碼，其操作方式如下： • 先在上圖點選「物件名稱」的下拉鈕開啟下拉式清單。 • 點選Button1物件名稱。 • 接著點選「事件名稱」的下拉鈕開啟下拉式清單。 • 點選Click事件名稱。

29. 點選Button2按鈕控制項成為作用控制項。 • 移動滑鼠到屬性視窗中點選事件圖示。 • 移動滑鼠到「動作」分類的Click欄位上快按兩下，產生Button2_Click事件程序。 • 進入事件程序編碼視窗的快速方式：

30. 實例演練 • 程式要求如下： • 程式開始時標題欄顯示「我的第一個程式」 ，表單上出現「 Hello 」打招呼訊息，表單下方出現三個按鈕分別為、『日期』、『結束』 三個按鈕。 • 當按『你好』鈕，顯示「你好」 ，背景改為淺藍色(Aqua)。 • 當按『日期』鈕，顯示今天日期，背景改為咖啡色(Chocolate)。 • 當按『結束』鈕，結束程式執行。

31. 範例一 • 建立新增專案 • 路徑設在D:\vb2005\ch07，方案名稱為「hello」 1 2 3 4 5

32. 儲存專案 • 執行功能表的【檔案(F)/全部儲存(L)】開啟儲存專案視窗，再依下圖操作，將hello專案儲存在「D:\vb2005\chap07」資料夾下。 1 2 3

33. 設定輸出入介面 • 在表單上建立一個標籤控制項以及三個按鈕控制項。各控制項須變更的屬性如下圖所示： Name=lblShow Text=”Hollo!” Font/Size=18 Name=btnDate Text=“日期” Name=btnWord Text=“你好” Name=btnQuit Text=“結束”

34. 設定表單標題欄初值 • 在表單中沒有控制項的地方按一下，將表單設成作用表單。接著在屬性視窗中的Text屬性值上快按兩下，將”Form1”更改為”我的第一個程式”。

35. 設定標籤控制項的Name屬性 • 先在表單中的標籤控制項上按一下設成作用控制項。接著在屬性視窗中的(Name)屬性值上快按兩下，將 ”Label1”更改為 ”lblShow”。

36. 設定標籤控制項的Text屬性 • 在屬性視窗中的Text屬性值上快按兩下，將 ”Label1”更改為 ”Hello !”。

37. 設定標籤控制項的Font屬性 • 在屬性視窗中的Font屬性值上按一下，出現圖示，在上面按一下，開啟字型對話方塊，將「大小(S)」改成18。 2 4 1 3

38. 設定Button1按鈕控制項的Name屬性為 ”btnWord” • 設定Button1按鈕控制項的Text屬性為”你好”

39. 更改Button2的Name和Text屬性 • Name屬性的Button2 btnDate ; Text屬性的Button2日期 • 更改Button3的Name和Text屬性 • Name屬性的Button3 btnQuit ; Text屬性的Button3結束

40. 撰寫「btnWord_Click」事件程序 • 在『你好』鈕按一下，會觸動btnWord按鈕的Click事件。 • 本例希望按下『你好』鈕後，會在lblShow標籤控制項上面顯示“你好”，並將lblShow標籤控制項的背景色設為淺藍色(Aqua)。

41. 程式中設定lblShow標籤控制項的背景色 • 程式碼： • lblShow.BackColor = Color.Aqua • 標籤控制項名稱 . 屬性名稱 = 結構 . 成員 • 上面敘述中Color.Aqua 是指Color結構，Aqua是淺藍色為Color的成員。

42. 程式中設定lblShow的Text的屬性 • 程式碼： • lblShow.Text = “你好 !” • 標籤控制項名稱 . 屬性 = 字串常值

43. 撰寫「btnWord_Click」事件程序步驟 • 在表單設計標籤頁的『你好』鈕快按兩下，此時即進入btnWord_Click 事件程序內。 • 接著輸入下面兩行敘述。

44. 注意 • 撰寫程式時由鍵盤鍵入lblShow後，接著鍵入小數點，此時會如下圖出現清單，清單包含該控制項的屬性、方法。若繼續鍵入B後，清單會由B開頭往下依序列出屬性和方法供選取。

45. 撰寫「btnDate_Click」事件程序 • 設lblShow標籤的背景色為咖啡色 • Now()函式可以用來取得今天的日期和時間，因此設lblShow.Text=Now()， 即是在lblShow標籤上顯示今天的日期和時間。 • 完整程式碼如下：

46. 撰寫「btnQuit_Click」事件程序 • 在事件程序內插入End結束程式執行的指令。 • 完整程式碼如下：

47. 執行程式 • 要執行程式，可以按「標準」工具列中 「開始偵錯」圖示，或按 F5 功能鍵。 • 執行中要驗證輸出結果是否符合預期。 • 若發生語法上的錯誤，會停在錯誤的程式碼上。此時只要將程式碼修正，重新再驗證，直到程式完全正確為止。

48. 範例二 • 下面這個範例我們使用主控台應用程式並繼承.NET的System.Windows.Forms.Form類別來實作視窗應用程式。

49. 範例演練： FirstForm.sln • 建立一個MyForm類別繼承System.Windows.Forms. Form類別，在MyForm類別中加入 [確定] 鈕，並建立該鈕的Click事件，使按下 [確定] 鈕之後會顯示右圖的對話方塊。

50. 新增主控台專案新增「主控台應用程式」專案，其名稱為FirstForm.sln。新增主控台專案新增「主控台應用程式」專案，其名稱為FirstForm.sln。 • 加入參考 • 依圖操作檢視所參考的類別