視窗應用程式 5 5.1 Windows Form 應用程式專案 5.2 物件導向程式設計觀念 5.3 第一個 Windows Form 應用程式 5.4 表單檔的組成 5.5 認識整合開發環境 5.6 控制項的操作 5.7 習題
5.1 Windows Form 應用程式專案 Windows Form 是以.NET Framework 為基礎的一個平台, 主要用來開發視窗應用程式 (Windows Application) 由於它提供一個具有物件導向且可延伸的類別程式庫, 使我們能迅速開發出各種視窗應用程式, 而且它還可作為多層分散式方案 (Multi-Tier Distribution Solution) 中本機 (Local Host) 使用者的介面 當您新增一個表單到 Windows Form 應用程式專案時, 該表單便直接繼承 System.Windows.Forms. Form 類別, 當然您也可以由先前已經設計好的表單來進行繼承, 接著再新增或修改自己需要的功能 前面章節介紹如何在 Console 下撰寫主控台應用程式, 雖然我們也可以在主控台應用程式下使用一行行的命令來設計 Windows Form 表單的輸出入介面, 但這對於初學者較不易學習 對於一個程式初學者, 若能在 Windows Form 應用程式 專案模式下, 進入 Visual Studio 2012 或 Visual Studio Express 2012 for Windows Desktop 的整合開發環境 (IDE) 下, 在程式編輯階段, 利用工具箱所提供的工具, 在表單上拉出需要的控制項物件, 不用寫程式便很輕易地在表單上面製作出含有標籤 按鈕 文字方塊 等控制項物件的輸出入介面, 程式設計者只要專注編寫程式流程的核心, 不但節省設計輸出入介面的時間而且很容易維護, 符合所看即所得 (What you see is what you get) 的精神 至於在傳統的 主控台應用程式 下撰寫程式, 在程式編輯階段得費時撰寫輸出入介面的程式碼, 執行階段才能看到輸出入介面的結果是否正確? 若輸出入格式不符合需求, 又得再回編輯階段修改一直到符合需求為止 表單是使用者和電腦溝通的輸出入介面 表單大都以矩形的方式呈現, 譬如標準的視窗 對話方塊 多重文件視窗等都是表單的一種 輸出入介面的建立是將表單當做一個容器 (Container), 透過工具箱所提供的工具在表單上面建立需要的控制項 (Control) 或稱物件 (Object) 因應程式的需求當然允許兩個以上表單同時出現, 除了可以輪流顯示外, 也可以相互重疊 本章以 Form( 表單 ) Label( 標籤 ) TextBox( 文字方塊 ) 和 Button( 按鈕 ) 控制項物件建立簡單的輸出入介面為例, 透過這些物件來熟悉控制項物件的屬性 事件 方法的設定以及如何撰寫相關程式碼 其它更多控制項物件的屬性 方法及更進階的設定, 將於本書第 9-14 章陸續說明 5-2
Chapter 5 視窗應用程式 5.2 物件導向程式設計觀念 物件導向程式設計就是將真實世界的狀態, 以接近電腦世界的方式表現出來 每一個物件都擁有自己的屬性 方法 事件 一. 物件 (Object) 真實世界任何具體或抽象的東西都可視為一個物件 譬如一本書 一條狗 一部車子都可視為一個物件 而小物件還可以再組成一個大物件, 例如 : 車子是一個大物件, 它是由四個輪子 四個車門 方向盤 等其它小物件所組成的 若以電腦世界來說一個按鈕 文字方塊 功能表的選項 視窗 等都可視為一個物件, 如下圖的小算盤程式可視為一個大物件, 它是由數個按鈕 一個文字方塊 功能表及數個功能表項目的小物件所組成的 二. 屬性 (Property) 屬性是用來表示一個物件所擁有的外觀 狀態或特質 例如 : 小明 ( 物件 ) 的身高 ( 屬性 ) 是 170 公分 ( 屬性值 ), 小華的衣服 ( 物件 ) 顏色 ( 屬性 ) 是紅色 ( 屬性值 ) 改以上圖小算盤來說按鈕是物件, 按鈕上面文字的顏色 (ForeColor 屬性 ) 是紅色 ( 屬性值 ), 按鈕上的文字 (Text 屬性 ) 是 M+( 屬性值 ) 三. 方法 (Method) 方法用來表示一個物件所表現的行為 ( 動作 ), 例如 : 人 ( 物件 ) 會跑步 ( 方法 ), 鳥 ( 物件 ) 會飛 ( 方法 ) 物件與物件之間可以透過方法來達到互動, 例如 : 車子 ( 物件 ) 撞到 ( 方法 ) 小明 ( 物件 ) 下面以 C# 程式設計來表示物件 屬性及方法 5-3
TextBox txt = new TextBox(); // 建立 TextBox 類別的 txt 文字方塊物件 txt.text = " 王小明 "; // 使用 Text 屬性在 txt 文字方塊物件上顯示 " 王小明 " txt.clear(); // 使用 Clear 方法將 txt 文字方塊物件上的文字清除 四. 事件 (Event) 當在某個物件上接收訊息而產生一種反應, 此種反應即稱為事件 例如 : 在按鈕上按下滑鼠鍵, 按鈕接收到按下的訊息而發生按下的 Click 事件, 接著即會執行該按鈕的 Click 事件處理函式, 因此您可以將處理按鈕被按下的相關程式碼撰寫在按鈕的 Click 事件處理函式內 為熟悉如何在整合開發環境下, 設計一個 Windows Form 應用程式 現階段以一個簡例由設計輸出入介面開始 學習如何設定物件相關的屬性 靈活使用物件所提供的方法 如何編寫事件處理函式以及程式如何執行做概括地介紹 5.3 第一個 Windows Form 應用程式 一般在整合開發環境下, 撰寫視窗應用程式 (Windows Form 應用程式專案 ) 時, 可採用下列四個步驟來撰寫 : 1. 設計表單輸出入介面由問題中得知欲輸入哪些資料 欲產生哪些結果以及執行中應出現哪些提示訊息, 確定出應使用工具箱中的哪些工具, 再將需要的工具放入表單中, 建立使用者輸出入介面 (User Interface) 出來 2. 設定各控制項 ( 物件 ) 的屬性針對表單上各控制項的屬性值加以設定 3. 撰寫程式碼編輯表單上哪些控制項需要的事件處理函式 4. 測試與除錯檢查每個流程, 觀看結果是否符合預期? 若不符合, 必須進行除錯工作, 由於執行時編譯階段未發生錯誤, 而錯誤可能發生在程式邏輯方面? 5-4
Chapter 5 視窗應用程式 :WindowsFormsFirst.sln 按照上面四個步驟設計一個 Hello 的視窗應用程式 表單上的輸出入介面是使用整合開發環境中工具箱內的標籤 (Label) 工具 文字方塊 (TextBox) 工具和按鈕 (Button) 工具來設計的 執行結果 1. 當在文字方塊內鍵入姓名 " 王小明 " 後, 按鈕, 會在另一個標籤控制項上顯示 "Hello, 王小明 " 訊息 2. 按鈕後, 會關閉表單結束 Hello 應用程式回到整合開發環境 操作步驟 請按照下列步驟, 實作一個 Hello 的 Windows Form 應用程式 : 一. 設計表單輸出入介面 Step 01 請執行開始功能表的 / 所有程式 /Microsoft Visual Studio 2012 Express / VS Express for Desktop 進入 Visual Studio Express 2012 for Windows Desktop 整合開發環境 Step 02 在整合開發環境下執行功能表的 檔案 (F)/ 新增專案 (P) 指令開啟 新增專案 對話方塊, 請依下圖步驟選取 Visual C# 和 Windows Form 應用程式 專案, 並將專案名稱設為 WindowsFormsFirst 專案儲存在 D:\cs2012\ch05 資料夾下 5-5
2 1 3 專案名稱由預設 WindowsApplication1 更名為 WindowsFormsFirst 4 專案儲存位置變更為 D:\cs2012\ch05\ 資料夾 5 Step 03 在上圖按鈕進入下圖 Windows Form 應用程式專案的整合開 發環境 此為第一次進入的畫面 1 2 在上圖左邊界先點選 工具箱 和圖示將工具箱固定, 出現下圖整合開發環境, 下圖中分三個窗格, 其中最左邊的窗格為 工具箱 ; 中間窗格為 表單設計 視窗 ; 最右邊的窗格為 方案總管 5-6
Chapter 5 視窗應用程式 表單設計視窗 方案總管 工具箱 屬性視窗 若沒有出現上述三個窗格可依照下面步驟來開啟 1. 開啟工具箱窗格 : 執行功能表的 檢視 (V)/ 工具箱 (X) 指令開啟工具箱 2. 開啟方案總管窗格 : 執行功能表的 檢視 (V)/ 方案總管 (P) 指令開啟 方案總管 視窗, 該視窗會顯示目前專案下所有檔案資訊 3. 開啟表單設計窗格 : 在方案總管窗格的 Form1.cs ( 預設表單檔為 Form1.cs) 快按滑鼠左鍵兩下, 即可以開啟表單設計窗格 Step 04 先選取工具箱的工具, 然後移動滑鼠到表單設計窗格 ( 簡稱表單 ) 適當位置, 壓滑鼠左鍵拖曳建立一個物件名稱為 label1 的標籤控制項 5-7
1 拖曳 2 Step 05 重複上一步驟, 使用工具箱的 以及工具, 在表單上放置兩個 Label 標籤 一個 TextBox 文字方塊以及兩個 Button 按鈕控制項 完成後表單物件內各控制項物件 ( 簡稱控制項 ) 的 Name 屬性的預設值如下圖所示 每個表單和控制項都有一個 Name( 物件名稱 ) 屬性, 用來在程式中識別各個物件, 因此表單和控制項的 Name 屬性不能同名 : label1 textbox1 label2 button1 button2 二. 設計各控制項的屬性 Step 01 將表單物件的 Name 屬性維持預設值 Form1,Text 屬性更名 Hello 程式,Text 標題屬性用來設定在控制項上所顯示的文字 1. 執行功能表的 檢視 (V)/ 屬性視窗 (W) 指令開啟下圖 屬性 視窗 2. 先在表單空白處按一下變成作用表單, 屬性視窗表單的物件名稱 Name 屬性 為 Form1 5-8
Chapter 5 視窗應用程式 1 選取 Form1 表單 2 預設為 Form1 3. 拖曳屬性視窗的垂直捲軸, 點選 Form1 表單的 Text 屬性, 將其屬性值由 預設的 "Form1" 更名為 "Hello 程式 ", 結果如下圖表單上方的標題列顯示 "Hello 程式 " Step 02 比照上一步驟方式將 label1 標籤控制項的 Text 屬性設為 " 姓名 " 1. 在 Form1 表單上點選 label1 標籤控制項成為作用控制項, 此時 label1 控制項 的 Name 屬性為 label1 預設值, 由於程式中用不到此控制項維持不修改 5-9
選取 label1 標籤 1 維持預設值 2. 如下圖操作方式將 label1 控制項的 Text 屬性由預設的 label1 設為 " 姓 名 " 3. 依下圖步驟, 先選取 label1 控制項, 接著在屬性視窗選取 Font 屬性的 鈕, 透過 字型 對話方塊, 將 label1 控制項的字型大小設為 12 1 選取 label1 標籤 2 3 5-10
Chapter 5 視窗應用程式 5 4 字型大小調整為 12 Step 03 重複 Step2 步驟, 將表單和所有表單上面控制項的字型都設為 12, 只要直接設定表單的 Font 屬性, 便可全部更改 其他屬性設定請依下圖 分別設定 Name=label1 Text=" 姓名 " Name=lblShow Text="label2" Name=btnOk Text=" 確定 " Name=txtName Name=btnExit Text=" 結束 " 5-11
三. 撰寫程式碼 Step 01 方式 1 程式執行 lblshow 標籤控制項在表單上面會顯示 label2 為 Text 屬性的預設值, 若希望程式開始執行馬上將 lblshow 標籤控制項上面顯示的文字清為空白, 必須將其程式碼寫在 Form1_Load 事件處理函式 ( 即表單的載入事件 ) 中 由於程式開始執行會先自動執行 Form1_Load 事件, 便可將 lblshow 標籤控制項清成空白 有下面兩種方式來編寫 Form1_Load 事件函式 : 選取某控制項並快按滑鼠左鍵兩下進入預設的事件處理函式 1. 在 Form1 表單空白處快按滑鼠左鍵兩下, 馬上進入 Form1 表單的 Form1_ Load 事件處理函式內 如下圖 : 由此處撰寫相關程式 2. 請在 Form1_Load 事件處理函式中撰寫 lblshow., 此時會出現清單 ( 智 慧感知 IntelliSense 支援 ) 讓您選擇要使用的 lblshow 控制項的屬性或方法, 接著請將程式碼撰寫為 lblshow.text = "" 如下圖 : 5-12
Chapter 5 視窗應用程式 3. lblshow.text = ""; 敘述是將 lblshow 標籤控制項上面的文字清成空白 當 Form1 表單載入時會觸發該表單的 Load 事件, 即執行 Form1_Load 事件 處理函式中的程式碼, 將 lblshow 標籤控制項清成空白 方式 2 透過屬性視窗的事件項目清單來選取要撰寫控制項的事件處理函式 1. 開啟屬性視窗並按物件清單下拉鈕選取 Form1 表單, 接著點選事 件檢視鈕切換到事件清單畫面, 拖曳垂直捲軸待出現 Load 事件處快按滑鼠 左鍵兩下, 進入程式編碼視窗的 Form1_Load 事件函式內進行程式碼編寫 5-13
2 1 選取 Form1 表單 3 在 Load 事件快滑鼠左鍵兩下 2. 同方式 1 的步驟 2, 在 Form1_Load 事件處理函式內撰寫 lblshow.text = ""; 敘述 Step 02 在按鈕編寫 btnok 的 Click 事件 1. 在上快按滑鼠左鍵兩下進入 btnok_click 事件處理函式內 在此事件處理函式內撰寫下面敘述 2. 當然也可使用 Step1 的方式 2 進入 btnok_click 事件處理函式內 說明 lblshow.text = "Hello, " + txtname.text ; 將 "Hello" 和 txtname 文字方塊上所輸入的文字合併後再指定給 lblshow.text 屬性 5-14
Chapter 5 視窗應用程式 lblshow.backcolor = Color.Yellow; 將 lblshow 的背景色設為黃色 Step 03 重複 Step2, 在 鈕上撰寫 btnexit 的 Click 事件函式 在 鈕上快按兩下進入 btnexit_click 事件, 插入 Application.Exit(); 敘述, 用來結束程式的執行返回整合開發環境 完整程式碼如下 : FileName:Form1.cs 01 namespace WindowsFormsFirst 02 { 03 public partial class Form1 : Form 04 { 05 public Form1() 06 { 07 InitializeComponent(); 08 } 09 // 表單載入時執行 10 private void Form1_Load(object sender, EventArgs e) 11 { 12 lblshow.text = ""; 13 } 14 // 按下 [ 確定 ] 鈕執行 15 private void btnok_click(object sender, EventArgs e) 16 { 17 lblshow.text = "Hello, " + txtname.text; 18 lblshow.backcolor = Color.Yellow; 19 } 20 // 按下 [ 結束 ] 鈕執行 21 private void btnexit_click(object sender, EventArgs e) 22 { 23 Application.Exit(); // 結束程式 24 } 25 } 26 } 5-15
四. 測試與除錯 Step 01 Step 02 程式撰寫完畢後, 可執行功能表的 偵錯 (D)/ 開始偵錯 (S) 編譯並執行程式, 測試執行結果是否符合預期 程式測試完畢可執行功能表的 偵錯 (D)/ 停止偵錯 (E) 或按表單的按鈕回到整合開發環境 5.4 表單檔的組成 一. 認識表單檔的組成 上一節簡單介紹視窗應用程式的開發後, 接著介紹視窗應用程式中表單檔的組成 以 Form1 表單物件為例, 它是由 Form1.cs 及 Form1.Designer.cs 所組成,Form1.cs 所存放的是表單會使用的事件處理函式, 而 Form1.Designer.cs 是用來存放表單輸出入介面的相關程式碼 如下圖, 在方案總管視窗可以看到 Form1 表單物件的 Form1.cs 及 Form1.Disigner.cs 兩個檔案 您可開啟如下圖所示 WindowsFormsFirst.sln 專案中的 Form1.Designer.cs 檔, 結果發現該檔中會有很多與輸出入介面的相關程式碼 例如 : 上一節透過工具箱及屬性視窗所建立的 label1 標籤 lblshow 標籤 txtname 文字方塊 btnok 按鈕 btnexit 按鈕控制項以及委派控制項事件所要執行的事件處理函式 等相關程式碼皆撰寫於此處, 此時便可了解工具箱及屬性視窗所設計的輸出入介面的相關程式碼皆於是置於.Designer.cs 檔中 5-16
Chapter 5 視窗應用程式 若未出現此畫面此行最前面的請按展開鈕 建立 label1 lblshow txtname btnok btnexit 的程式碼 設定 label1 字型 位置 等相關屬性的程式碼 這也就是說不用透過工具箱, 便可在表單上建立如標籤 文字方塊或按鈕 等控制項物件, 此時就必須了解物件導向程式設計才可達成, 因此建議您詳細閱讀本書第六 七章, 在第七章最後一個例子會使用主控台及類別繼承的方式建立一個簡單的視窗應用程式 但實際開發視窗應用程式時, 還是要善加利用整合開發環境的工具箱來設計表單的輸出入介面才是最佳的選擇 二. 如何刪除事件處理函式 由於 Form1.Designer.cs 檔存放的是建立控制項 設定控制項屬性以及委派控制項事件觸發時所要執行的事件處理函式 等相關程式碼, 因此若要刪除 Form1.cs 檔內的事件處理函式, 其步驟就是先刪除 Form1.Desiger.cs 委派控制項事件的相關敘述, 接著再刪除 Form1.cs 所對應的事件處理函式就可以了 譬如 : 欲刪除上面範例處理函式, 其操作步驟如下 : 按鈕的 Click 事件所執行的 btnexit_click 事件 Step 01 先選取按鈕, 點選事件檢視鈕切換到事件清單畫面, 拖曳垂直軸在 Click 事件上壓滑鼠右鍵, 由出現塊選清單中選取功能將 btnexit_click 事件移除, 此時 btnexitt_click 被清除變成空白 5-17
1 選取 btnexit 鈕 2 3 壓滑鼠右鍵 4 Step 02 切換到 Form1.cs 檢視所有事件程式碼視窗, 將 btnexit_click 事件處理函 式所有程式碼刪掉就可以了 1 2 反白刪除 btnexit_click 事件處理函式 注意 若跳過 Step1 直接刪除 Step2 的 btnexit_click 事件處理函式, 當切換到表單設計標籤頁時會出現下圖錯誤清單 此時只要趕快切回程式設計標籤頁, 按復原鈕還原即可 因此正確的做法一定要先透過屬性視窗移除該控制項被觸發事件時所要執行的事件處理函式, 接著再移除 Form1.cs 檔內對應事件處理函式的相關程式碼, 操作時要特別注意 5-18
Chapter 5 視窗應用程式 5.5 認識整合開發環境 5.5.1 整合開發環境介紹 一. 標題欄 配置工具列 標準工具列 功能表列 1. 標題列上 WindowsFormsFirst - Microsoft Visual Studio Express 2012 for Windows Desktop, 其中 WindowsFormsFirst 為目前編輯的專案名稱 2. 在標題欄左側 Microsoft Visual Studio 視窗圖示, 主要功用在滑鼠不能正常操作時, 可以按 <Alt> + < 空白鍵 > 拉出功能表, 再透過鍵盤上下鍵來選取命令 譬如 : 調整視窗或離開 Visual Studio 時使用 5-19
二. 工具列 在標題欄正下方的功能表提供完整的操作指令外, 緊接在功能表正下方的 工具列 是將功能表中常用的指令以圖示來表示, 只要在該圖示上按一下, 就如同在功能表中選取該指令, 如此可以省掉兩次按鍵的時間 Visual Studio 整合開發環境提供的多組工具列, 這些工具列皆可透過功能表的 檢視 (V)/ 工具列 (T) 指令來開啟或關閉需要的工具列 若不知道工具列上某個工具的名稱, 只要移動滑鼠到該工具圖示鈕上停一會兒, 會出現該圖示鈕的提示名稱 向後 / 向前瀏覽圖示鈕用來切換剛才操作步驟 三. 標準工具列 有些工具列最左邊界會出現一個垂直的裁接記號, 移動滑鼠到該處出現游標, 壓滑鼠左鍵不放上下拖曳會和有裁接記號的工具列互換位置, 也可拖曳到有裁接記號的工具列上兩者會合併成一列 若找不到標準工具列, 可執行功能表的 檢視 (V)/ 工具列 (T)/ 標準 指令, 便可開啟下圖的標準工具列 : 功能說明 圖示對應於功能表指令功能 [ 檔案 (F)/ 新增專案 (P)] 建立一個新的方案或專案 [ 檔案 (F)/ 開啟檔案 (O)] 開啟一個舊專案 [ 檔案 (F)/ 儲存 Form1.cs(S)] 儲存目前設計中的專案 [ 檔案 (F)/ 全部儲存 (L)] 儲存目前方案中的所有檔案 [ 編輯 (E)/ 復原 (U)] 取消上一次的編輯動作 [ 編輯 (E)/ 取消復原 (R)] 將上一次的復原指令取消 [ 檢視 (V)/ 向後巡覽 (B)] 回到之前所編輯文件的位置 5-20
5.7 習題 一. 選擇題 1. 當表單載入時會觸發什麼事件? (1) Click (2) Load (3) TextChanged (4) DoubleClick 2. 按下按鈕時會觸發什麼事件? (1) Click (2) Load (3) TextChanged (4) DoubleClick 3. 請問專案檔的副檔名為何? (1).vb (2).cs (3).csproj (4).sln 4. 請問方案檔的副檔名為何? (1).vb (2).cs (3).csproj (4).sln 5. Form1 表單物件內控制項建立 控制項屬性設定 等程式碼會存放在下列哪個檔案中? (1) Form1.resx (2) Form1.cs (3) Form1.sln (4) Form1.Designer.cs 6. Form1 表單物件內的事件處理函式會存放在下列哪個檔案中? (1) Form1.resx (2) Form1.cs (3) Form1.sln (4) Form1.Designer.cs 7. 下列控制項何者用來在程式設計階段和執行階段輸入資料? (1) Label1 (2) Button (3) TextBox (4) RadioButton 8. 物件包含下列哪些特性? (1) 屬性 (2) 方法 (3) 事件 (4) 以上皆是 9. 控制項的哪個屬性可用來設定字型? (1) FontColor (2) Font (3) FontStyle (4) BackColor 10. 下列哪個控制項擁有類似 Excel 的工作表, 可用來顯示資料表的資料? (1) Timer (2) TabControl (3) DataTable (4) DataGridView 5-32