教學課程：建立數學測驗 WinForms 應用程式
在此系列的四個教學課程中，您將建置數學測驗。 測驗包含四個隨機的數學問題，讓受測者嘗試在指定的時間內回答。
Visual Studio 整合式開發環境 (IDE) 提供建立應用程式所需的工具。 若要深入了解此 IDE，請參閱歡迎使用 Visual Studio IDE。
在這第一個教學課程中，您將了解如何：
- 建立使用 Windows Forms 的 Visual Studio 專案。
- 將標籤、按鈕和其他控制項新增至表單。
- 設定控制項的屬性。
- 儲存並執行您的專案。
必要條件
您需要 Visual Studio 才能完成本教學課程。 如需免費版本，請造訪 Visual Studio 下載頁面。
建立您的 Windows Forms 專案
建立數學測驗時，第一個步驟是建立 Windows Forms 應用程式專案。
開啟 Visual Studio。
在 [開始] 視窗中，選取 [建立新專案]。
在 [建立新專案] 視窗中，搜尋 Windows Forms。 然後，從 [專案類型] 清單中選取 [桌面]。
選取 C# 或 Visual Basic 的 Windows Forms 應用程式 (.NET Framework) 範本，然後選取 [下一步]。
注意
若未看到 [Windows Forms 應用程式 (.NET Framework)] 範本，可以從 [建立新專案] 視窗安裝。 在 [找不到你要尋找的項目嗎?] 訊息中，選取 [安裝更多工具和功能]。
然後，在 Visual Studio 安裝程式中選取 [.NET 桌面開發]。
在 Visual Studio 安裝程式中選取 [修改]。 系統可能會提示您儲存工作。 接下來，選取 [繼續] 以安裝工作負載。
在 [設定新專案] 視窗中，將專案命名為 MathQuiz，然後選取 [建立]。
開啟 Visual Studio。
在 [開始] 視窗中，選取 [建立新專案]。
在 [建立新專案] 視窗中，搜尋 Windows Forms。 然後，從 [專案類型] 清單中選取 [桌面]。
選取 C# 或 Visual Basic 的 Windows Forms 應用程式 (.NET Framework) 範本，然後選取 [下一步]。
注意
若未看到 [Windows Forms 應用程式 (.NET Framework)] 範本，可以從 [建立新專案] 視窗安裝。 在 [找不到你要尋找的項目嗎?] 訊息中，選取 [安裝更多工具和功能]。
然後，在 Visual Studio 安裝程式中選取 [.NET 桌面開發]。
在 Visual Studio 安裝程式中選取 [修改]。 系統可能會提示您儲存工作。 接下來，選取 [繼續] 以安裝工作負載。
在 [設定新專案] 視窗中，將專案命名為 MathQuiz，然後選取 [建立]。
Visual Studio 會為您的應用程式建立解決方案。 解決方案是您的應用程式需要的所有專案和檔案的容器。
設定表單屬性
在您選取範本並且為檔案命名後，Visual Studio 會為您開啟表單。 本節說明如何變更某些表單屬性。
在您的專案中，選取 [Windows Forms 設計工具]。 設計工具索引標籤會標示為 Form1.cs [Design] (C#) 或 Form1.vb [Design] (Visual Basic)。
選取表單 Form1。
[屬性] 視窗此時會顯示表單的屬性。 此視窗通常位於 Visual Studio 的右下角。 若未看到 [屬性]，請選取 [檢視]>[屬性視窗]。
在 [屬性] 視窗中尋找 [文字] 屬性。 根據清單排序的方式，您可能需要向下捲動。 針對 [文字] 值輸入數學測驗，然後選取 Enter 鍵。
您的表單此時在其標題列中會有「數學測驗」文字。
注意
您可以依類別或依字母順序顯示屬性。 使用 [屬性] 視窗上的按鈕來回切換。
將表單的大小變更為寬度 500 像素乘以高度 400 像素。
您可藉由拖曳邊緣或拖曳控點來調整表單大小，直到 [屬性] 視窗中的 [大小] 值顯示為適當大小為止。 拖曳控點是表單右下角的白色小方塊。 您也可藉由變更 [大小] 屬性的值來調整表單的大小。
將 [FormBorderStyle] 屬性的值變更為 [Fixed3D]，並將 [MaximizeBox] 屬性設定為 [False]。
這些值可防止受測者調整表單的大小。
建立剩餘時間方塊
數學測驗的右上角包含一個方塊。 該方塊會顯示測驗的剩餘秒數。 本節說明如何為該方塊使用標籤。 您將在此系列稍後的教學課程中新增倒數計時器的程式碼。
在 Visual Studio IDE 左側，選取 [工具箱] 索引標籤。若未看到工具箱，請從功能表列中選取 [檢視]>[工具箱]，或按 Ctrl+Alt+X。
選取 [工具箱] 中的 Label 控制項，並將其拖曳到表單上。
在 [屬性] 方塊中，設定標籤的下列屬性：
- 將 (Name) 設定為 timeLabel。
- 將 AutoSize 變更為 False，就可以調整方塊的大小。
- 將 BorderStyle 變更為 FixedSingle，以繪製方塊周圍的線條。
- 將 [大小] 設定為 200, 30。
- 選取 [文字] 屬性，然後選取退格鍵以清除 [文字] 值。
- 選取 [字型] 屬性旁的加號 (+)，然後將 [大小] 設定為 15.75。
將標籤移至表單右上角。 出現藍色分隔線時，請將其用來定位表單上的控制項。
從 [工具箱] 新增另一個 Label 控制項，然後將其字型大小設定為 15.75。
將此標籤的 [文字] 屬性設定為 [剩餘時間]。
移動標籤，使其排列在 [timeLabel] 標籤左側。
新增加法問題的控制項
測驗的第一個部分是加法問題。 本節說明如何使用標籤來顯示該問題。
從 [工具箱] 將標籤控制項新增至表單。
在 [屬性] 方塊中，設定標籤的下列屬性：
- 將 [文字] 設定為 ? (問號)。
- 將 AutoSize 設定為 False。
- 將 [大小] 設定為 60, 50。
- 將字型大小設定為 [18]。
- 將 TextAlign 設定為 MiddleCenter。
- 將 [位置] 設定為 50, 75，決定控制項在表單上的位置。
- 將 (Name) 設定為 plusLeftLabel。
在表單中，選取您所建立的 plusLeftLabel 標籤。 選取 [編輯]>[複製] 或按 Ctrl+C，以複製標籤。
選取 [編輯]>[貼上] 或按 Ctrl+V 三次，以將標籤貼到表單中三次。
排列這三個新標籤，讓它們在 [plusLeftLabel] 標籤右邊排成一列。
將第二個標籤的 [文字] 屬性設定為 + (加號)。
將第三個標籤的 (Name) 屬性設定為 plusRightLabel。
將第四個標籤的 [文字] 屬性設定為 = (等號)。
從 [工具箱] 將 NumericUpDown 控制項新增至表單。 您稍後將進一步了解這類控制項。
在 [屬性] 方塊中，設定 NumericUpDown 控制項的下列屬性：
- 將字型大小設定為 [18]。
- 將寬度設定為 100。
- 將 (Name) 設定為 sum。
將 NumericUpDown 控制項對齊加法問題的 Label 控制項。
新增減法、乘法和除法問題的控制項
接下來，將標籤新增至其餘數學問題的表單。
複製您為加法問題建立的四個標籤控制項和 NumericUpDown 控制項。 將其貼到表單中。
移動新的控制項，使其排列在加法控制項下方。
在 [屬性] 方塊中，設定新控制項的下列屬性：
- 將第一個問號標籤的 (Name) 設定為 minusLeftLabel。
- 將第二個標籤的 [文字] 設定為 - (減號)。
- 將第二個問號標籤的 (Name) 設定為 minusRightLabel。
- 將 NumericUpDown 控制項的 (Name) 設定為 difference。
複製加法控制項，並將其貼到表單中兩次。
對於第三個資料列：
- 將第一個問號標籤的 (Name) 設定為 timesLeftLabel。
- 將第二個標籤的 [文字] 設定為 × (乘號)。 您可以從本教學課程中複製乘號，並將其貼到表單上。
- 將第二個問號標籤的 (Name) 設定為 timesRightLabel。
- 將 NumericUpDown 控制項的 (Name) 設定為 product。
對於第四個資料列：
- 將第一個問號標籤的 (Name) 設定為 dividedLeftLabel。
- 將第二個標籤的 [文字] 設定為 ÷ (除號)。 您可以從本教學課程中複製除號，並將其貼到表單上。
- 將第二個問號標籤的 (Name) 設定為 dividedRightLabel。
- 將 NumericUpDown 控制項的 (Name) 設定為 quotient。
新增開始按鈕及設定定位點索引順序
本節說明如何新增 [開始] 按鈕。 您也會指定控制項的定位順序。 此順序將決定受測者如何使用 Tab 鍵從一個控制項移至下一個控制項。
從 [工具箱] 將 Button 控制項新增至表單。
在 [屬性] 方塊中，設定按鈕的下列屬性：
- 將 (Name) 設定為 startButton。
- 將 [文字] 設定為 [開始測驗]。
- 將字型大小設定為 [14]。
- 將 AutoSize 設定為 True，使按鈕自動調整大小以容納文字。
- 將 TabIndex 設定為 0。 此值會使 [開始] 按鈕成為第一個獲得焦點的控制項。
將按鈕放在表單底部的中央。
在 [屬性] 方塊中，設定每個 NumericUpDown 控制項的 TabIndex 屬性：
- 將 sum NumericUpDown 控制項的 TabIndex 設定為 1。
- 將 difference NumericUpDown 控制項的 TabIndex 設定為 2。
- 將 product NumericUpDown 控制項的 TabIndex 設定為 3。
- 將 quotient NumericUpDown 控制項的 TabIndex 設定為 4。
執行您的應用程式
數學問題尚無法在您的測驗中使用。 但您仍可執行應用程式，以檢查 TabIndex 值是否如預期般運作。
使用下列其中一種方法儲存您的應用程式：
- 選取 Ctrl+Shift+S。
- 在功能表列上，選取 [檔案]>[全部儲存]。
- 在工具列上，選取 [全部儲存] 按鈕。
使用下列其中一種方法執行您的應用程式：
- 選取 F5。
- 在功能表列上，依序選取 [偵錯]>[開始偵錯]。
- 在工具列上，選取 [開始] 按鈕。
選取 Tab 鍵數次，以查看焦點依序在各個控制項間移動的情形。
下一步
前往下一個教學課程，為您的數學測驗隨機新增數學問題和事件處理常式。