教學課程:建立數學測驗 WinForms 應用程式
適用于:Visual Studio
Visual Studio for Mac
Visual Studio Code
在此系列四個教學課程中,您將建置數學測驗。 測驗包含四個亂數學問題,測驗取用者會在指定的時間內嘗試回答。
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 Designer]。 設計工具索引標籤標示為 C# 的Form1.cs [Design]或 Visual Basic 的Form1.vb [設計]。
選取表單 Form1。
[ 屬性] 視窗現在會顯示表單的屬性。 此視窗通常位於 Visual Studio 的右下角。 如果您沒有看到[屬性],請選取 [檢視>屬性視窗]。
在 [屬性] 視窗中尋找Text屬性。 根據清單排序的方式,您可能需要向下捲動。 針對[文字]值輸入[數學測驗] 值,然後選取Enter。
您的表單現在在其標題列中有文字「數學測驗」。
注意
您可以依類別或依字母順序顯示內容。 使用 [ 屬性 ] 視窗上的按鈕來來回切換。
將表單的大小變更為寬度 500 像素乘以高度 400 像素。
您可以拖曳其邊緣或拖曳控點來調整表單大小,直到正確的大小顯示為 [屬性] 視窗中的 [大小] 值為止。 拖曳控點是表單右下角的小型白色方形。 您也可以變更 Size 屬性的值來調整表單 的大小 。
將 [FormBorderStyle] 屬性的值變更為 [Fixed3D],並將 [MaximizeBox] 屬性設定為 [False]。
這些值可防止受測者調整表單的大小。
建立剩餘時間方塊
數學測驗包含右上角的方塊。 該方塊會顯示測驗中保留的秒數。 本節說明如何使用該方塊的標籤。 您將在本系列稍後的教學課程中新增倒數計時器的程式碼。
在 Visual Studio IDE 的左側,選取 [工具箱] 索引標籤。如果您沒有看到工具箱,請從功能表列或Ctrl+Alt+X選取 [檢視>工具箱]。
選取 [ Label工具箱] 中的控制項,然後將它拖曳到表單上。
在 [ 屬性] 方塊中,設定標籤的下列屬性:
- 將 (Name) 設定為 timeLabel。
- 將 AutoSize 變更為 False ,以便調整方塊的大小。
- 將 BorderStyle 變更為 FixedSingle ,以在方塊周圍繪製線條。
- 將 Size 設定為 200,30。
- 選取 Text 屬性,然後選取 Backspace 鍵以清除 [文字] 值。
- 選取Font屬性旁邊的加號 (+) ,然後將[大小] 設定為15.75。
將標籤移至表單右上角。 出現藍色空白字元時,請使用它們來放置表單上的控制項。
從 [工具箱] 新增另一個 Label 控制項,然後將其字型大小設定為 15.75。
將此標籤的 Text 屬性設定為 Time Left。
移動標籤,使其列在 timeLabel 標籤的左邊。
新增新增問題的控制項
測驗的第一個部分是加法問題。 本節說明如何使用標籤來顯示該問題。
將 [工具箱 ] 中的標籤控制項新增至表單。
在 [ 屬性 ] 方塊中,設定標籤的下列屬性:
- 將 [文字 ] 設定為 ? (問號) 。
- 將 AutoSize 設定為 False。
- 將 [大小 ] 設定為 60,50。
- 將字型大小設定為 [18]。
- 將 TextAlign 設定為 MiddleCenter。
- 將 [位置 ] 設定為 50,75 以將控制項置於表單上。
- 將 (Name) 設定為 plusLeftLabel。
在表單中,選取您所建立的 plusLeftLabel 標籤。 選取 [編輯> 複製] 或[Ctrl+C] 來複製標籤。
選取 [編輯>貼上] 或[Ctrl+V] 三次,將標籤貼到表單三次。
排列這三個新標籤,讓它們在 [plusLeftLabel] 標籤右邊排成一列。
將第二個標籤的 Text 屬性設定為 + (加號) 。
將第三個標籤的 (Name) 屬性設定為 plusRightLabel。
將第四個標籤的 Text 屬性設定為 = (等號) 。
NumericUpDown將控制項從[工具箱] 新增至表單。 您稍後將進一步了解這類控制項。
在 [ 屬性 ] 方塊中,設定 NumericUpDown 控制項的下列屬性:
- 將字型大小設定為 [18]。
- 將寬度設定為 100。
- 將 (名稱) 設定為 加總。
將 NumericUpDown 控制項對齊加法問題的 Label 控制項。
新增減法、乘法和除法問題的控制項
接下來,將標籤新增至其餘數學問題的表單。
複製您為加法問題建立的四個 Label 控制項和 NumericUpDown 控制項。 將它們貼到表單中。
將新控制項移至加法控制項下方。
在 [ 屬性 ] 方塊中,為新的控制項設定下列屬性:
- 將第一個問號標籤) (名稱 設定為 minusLeftLabel。
- 將第二個標籤的 Text 設定為 - (減號) 。
- 將第二個問號標籤的 (Name) 設定為 minusRightLabel。
- 將 NumericUpDown 控制項) (名稱 設定為 差異。
複製加法控制項,再將兩次貼到表單中。
針對第三列:
- 將第一個問號標籤的 (Name) 設定為 timesLeftLabel。
- 將第二個標籤的 Text 設定為 × (乘法符號) 。 您可以從本教學課程複製乘法符號,並將它貼到表單上。
- 將第二個問號標籤的 (Name) 設定為 timesRightLabel。
- 將 NumericUpDown 控制項 的 (Name) 設為 product。
針對第四列:
- 將第一個問號標籤 的 (Name) 設定為 dividedLeftLabel。
- 將第二個標籤的 Text 設定為 ÷ (除號) 。 您可以從本教學課程複製除號,並將它貼到表單上。
- 將第二個問號標籤的 (Name) 設定為 dividedRightLabel。
- 將 NumericUpDown 控制項) (名稱 設定為 商。
新增 [開始] 按鈕並設定索引標籤索引順序
本節說明如何新增 [開始] 按鈕。 您也會指定控制項的定位順序。 此順序會決定測驗取用者如何使用 Tab 鍵,從一個控制項移至下一個控制項。
Button將控制項從[工具箱] 新增至表單。
在 [ 屬性 ] 方塊中,設定 [按鈕] 的下列屬性:
- 將 (Name) 設定為 startButton。
- 將 [文字 ] 設定為 [開始測驗]。
- 將字型大小設定為 [14]。
- 將 AutoSize 設定為 True,這會導致按鈕自動調整大小以符合文字。
- 將 TabIndex 設定為 0。 這個值會讓開始按鈕成為接收焦點的第一個控制項。
將按鈕放在表單底部的中央。
在 [ 屬性] 方塊中,設定每個 NumericUpDown 控制項的 TabIndex 屬性:
- 將Sum NumericUpDown 控制項的TabIndex設定為1。
- 將 NumericUpDown 控制項差異的TabIndex設定為2。
- 將產品NumericUpDown 控制項的TabIndex設定為3。
- 將商數 NumericUpDown 控制項的TabIndex設定為4。
執行您的應用程式
數學問題尚未在您的測驗上運作。 但您仍然可以執行應用程式,以檢查 TabIndex 值是否如預期般運作。
使用下列其中一種方法來儲存您的應用程式:
- 選取Ctrl+Shift+S。
- 在功能表列上,選取 [檔案>全部儲存]。
- 在工具列上,選取 [ 全部儲存] 按鈕。
使用下列其中一種方法來執行您的應用程式:
- 選取 F5。
- 在功能表列上,選取 [偵> 錯開始偵錯]。
- 在工具列上,選取 [ 開始] 按鈕。
選取 Tab 鍵數次,以查看焦點如何從一個控制項移到下一個控制項。
下一步
前進到下一個教學課程,將亂數學問題和事件處理常式新增至您的數學測驗。