教學課程：建立數學測驗 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應用程式專案。

  1. 開啟 Visual Studio。

  2. 在 [開始] 視窗中，選取 [建立新專案]。

    顯示 Visual Studio 開始視窗中 [建立新專案] 選項的螢幕擷取畫面。

  3. 在 [建立新專案] 視窗中，搜尋Windows Forms。 然後從[專案類型]清單中選取 [桌面]。

  4. 選取 C# 或 Visual Basic 的Windows Forms 應用程式 (.NET Framework) 範本，然後選取 [下一步]。

    顯示 [建立新專案] 對話方塊的螢幕擷取畫面。系統會呼叫搜尋方塊、專案類型清單和兩個範本。

    注意

    如果您沒有看到Windows Forms應用程式 (.NET Framework) 範本，您可以從 [建立新專案] 視窗安裝它。 在 [找不到您要尋找的專案？] 訊息中，選取 [安裝更多工具和功能]。

    此螢幕擷取畫面顯示 [建立新專案] 對話方塊中[找不到您要尋找的專案] 訊息中的 [安裝更多工具和功能] 連結。

    接下來，在 [Visual Studio 安裝程式] 中，選取[.NET 桌面開發]。

    顯示Visual Studio 安裝程式中 dot NET 桌面開發工作負載的螢幕擷取畫面。

    在Visual Studio 安裝程式中選取[修改]。 系統可能會提示您儲存您的工作。 接下來，選取 [繼續 ] 以安裝工作負載。

  5. 在 [ 設定新專案 ] 視窗中，將專案命名為 MathQuiz，然後選取 [ 建立]。

  1. 開啟 Visual Studio。

  2. 在 [開始] 視窗中，選取 [建立新專案]。

    顯示 Visual Studio 開始視窗中 [建立新專案] 選項的螢幕擷取畫面。

  3. 在 [建立新專案] 視窗中，搜尋Windows Forms。 然後從[專案類型]清單中選取 [桌面]。

  4. 選取 C# 或 Visual Basic 的Windows Forms 應用程式 (.NET Framework) 範本，然後選取 [下一步]。

    顯示 [建立新專案] 對話方塊的螢幕擷取畫面。系統會呼叫搜尋方塊、專案類型清單和兩個範本。

    注意

    如果您沒有看到Windows Forms應用程式 (.NET Framework) 範本，您可以從 [建立新專案] 視窗安裝它。 在 [找不到您要尋找的專案？] 訊息中，選取 [安裝更多工具和功能]。

    此螢幕擷取畫面顯示 [建立新專案] 對話方塊中[找不到您要尋找的專案] 訊息中的 [安裝更多工具和功能] 連結。

    接下來，在 [Visual Studio 安裝程式] 中，選取[.NET 桌面開發]。

    顯示Visual Studio 安裝程式中 dot NET 桌面開發工作負載的螢幕擷取畫面。

    在Visual Studio 安裝程式中選取[修改]。 系統可能會提示您儲存您的工作。 接下來，選取 [繼續 ] 以安裝工作負載。

  5. 在 [ 設定新專案 ] 視窗中，將專案命名為 MathQuiz，然後選取 [ 建立]。

Visual Studio 會為您的應用程式建立解決方案。 解決方案是應用程式所需的所有專案和檔案的容器。

設定表單內容

選取範本並命名檔案之後，Visual Studio 會為您開啟表單。 本節說明如何變更某些表單內容。

  1. 在您的專案中，選取[Windows Forms Designer]。 設計工具索引標籤標示為 C# 的Form1.cs [Design]或 Visual Basic 的Form1.vb [設計]。

  2. 選取表單 Form1。

  3. [ 屬性] 視窗現在會顯示表單的屬性。 此視窗通常位於 Visual Studio 的右下角。 如果您沒有看到[屬性]，請選取 [檢視>屬性視窗]。

  4. 在 [屬性] 視窗中尋找Text屬性。 根據清單排序的方式，您可能需要向下捲動。 針對[文字]值輸入[數學測驗] 值，然後選取Enter。

    您的表單現在在其標題列中有文字「數學測驗」。

    注意

    您可以依類別或依字母順序顯示內容。 使用 [ 屬性 ] 視窗上的按鈕來來回切換。

  5. 將表單的大小變更為寬度 500 像素乘以高度 400 像素。

    您可以拖曳其邊緣或拖曳控點來調整表單大小，直到正確的大小顯示為 [屬性] 視窗中的 [大小] 值為止。 拖曳控點是表單右下角的小型白色方形。 您也可以變更 Size 屬性的值來調整表單 的大小 。

  6. 將 [FormBorderStyle] 屬性的值變更為 [Fixed3D]，並將 [MaximizeBox] 屬性設定為 [False]。

    這些值可防止受測者調整表單的大小。

建立剩餘時間方塊

數學測驗包含右上角的方塊。 該方塊會顯示測驗中保留的秒數。 本節說明如何使用該方塊的標籤。 您將在本系列稍後的教學課程中新增倒數計時器的程式碼。

  1. 在 Visual Studio IDE 的左側，選取 [工具箱] 索引標籤。如果您沒有看到工具箱，請從功能表列或Ctrl+Alt+X選取 [檢視>工具箱]。

  2. 選取 [ Label工具箱] 中的控制項，然後將它拖曳到表單上。

  3. 在 [ 屬性] 方塊中，設定標籤的下列屬性：

    • 將 (Name) 設定為 timeLabel。
    • 將 AutoSize 變更為 False ，以便調整方塊的大小。
    • 將 BorderStyle 變更為 FixedSingle ，以在方塊周圍繪製線條。
    • 將 Size 設定為 200，30。
    • 選取 Text 屬性，然後選取 Backspace 鍵以清除 [文字] 值。
    • 選取Font屬性旁邊的加號 (+) ，然後將[大小] 設定為15.75。

  4. 將標籤移至表單右上角。 出現藍色空白字元時，請使用它們來放置表單上的控制項。

  5. 從 [工具箱] 新增另一個 Label 控制項，然後將其字型大小設定為 15.75。

  6. 將此標籤的 Text 屬性設定為 Time Left。

  7. 移動標籤，使其列在 timeLabel 標籤的左邊。

    顯示 [剩餘時間] 標籤和剩餘時間標籤的螢幕擷取畫面。控制項會在表單右上角彼此對齊。

新增新增問題的控制項

測驗的第一個部分是加法問題。 本節說明如何使用標籤來顯示該問題。

  1. 將 [工具箱 ] 中的標籤控制項新增至表單。

  2. 在 [ 屬性 ] 方塊中，設定標籤的下列屬性：

    • 將 [文字 ] 設定為 ？ (問號) 。
    • 將 AutoSize 設定為 False。
    • 將 [大小 ] 設定為 60，50。
    • 將字型大小設定為 [18]。
    • 將 TextAlign 設定為 MiddleCenter。
    • 將 [位置 ] 設定為 50，75 以將控制項置於表單上。
    • 將 (Name) 設定為 plusLeftLabel。

  3. 在表單中，選取您所建立的 plusLeftLabel 標籤。 選取 [編輯> 複製] 或[Ctrl+C] 來複製標籤。

  4. 選取 [編輯>貼上] 或[Ctrl+V] 三次，將標籤貼到表單三次。

  5. 排列這三個新標籤，讓它們在 [plusLeftLabel] 標籤右邊排成一列。

  6. 將第二個標籤的 Text 屬性設定為 + (加號) 。

  7. 將第三個標籤的 (Name) 屬性設定為 plusRightLabel。

  8. 將第四個標籤的 Text 屬性設定為 = (等號) 。

  9. NumericUpDown將控制項從[工具箱] 新增至表單。 您稍後將進一步了解這類控制項。

  10. 在 [ 屬性 ] 方塊中，設定 NumericUpDown 控制項的下列屬性：

    • 將字型大小設定為 [18]。
    • 將寬度設定為 100。
    • 將 (名稱) 設定為 加總。

  11. 將 NumericUpDown 控制項對齊加法問題的 Label 控制項。

    顯示數學測驗第一列的螢幕擷取畫面。標籤是可見的，而具有方向鍵的控制項會顯示零。

新增減法、乘法和除法問題的控制項

接下來，將標籤新增至其餘數學問題的表單。

  1. 複製您為加法問題建立的四個 Label 控制項和 NumericUpDown 控制項。 將它們貼到表單中。

  2. 將新控制項移至加法控制項下方。

  3. 在 [ 屬性 ] 方塊中，為新的控制項設定下列屬性：

    • 將第一個問號標籤) (名稱 設定為 minusLeftLabel。
    • 將第二個標籤的 Text 設定為 - (減號) 。
    • 將第二個問號標籤的 (Name) 設定為 minusRightLabel。
    • 將 NumericUpDown 控制項) (名稱 設定為 差異。

  4. 複製加法控制項，再將兩次貼到表單中。

  5. 針對第三列：

    • 將第一個問號標籤的 (Name) 設定為 timesLeftLabel。
    • 將第二個標籤的 Text 設定為 × (乘法符號) 。 您可以從本教學課程複製乘法符號，並將它貼到表單上。
    • 將第二個問號標籤的 (Name) 設定為 timesRightLabel。
    • 將 NumericUpDown 控制項 的 (Name) 設為 product。

  6. 針對第四列：

    • 將第一個問號標籤 的 (Name) 設定為 dividedLeftLabel。
    • 將第二個標籤的 Text 設定為 ÷ (除號) 。 您可以從本教學課程複製除號，並將它貼到表單上。
    • 將第二個問號標籤的 (Name) 設定為 dividedRightLabel。
    • 將 NumericUpDown 控制項) (名稱 設定為 商。

顯示具有四列問題的數學測驗螢幕擷取畫面。有方向鍵的標籤和控制項是可見的。

新增 [開始] 按鈕並設定索引標籤索引順序

本節說明如何新增 [開始] 按鈕。 您也會指定控制項的定位順序。 此順序會決定測驗取用者如何使用 Tab 鍵，從一個控制項移至下一個控制項。

  1. Button將控制項從[工具箱] 新增至表單。

  2. 在 [ 屬性 ] 方塊中，設定 [按鈕] 的下列屬性：

    • 將 (Name) 設定為 startButton。
    • 將 [文字 ] 設定為 [開始測驗]。
    • 將字型大小設定為 [14]。
    • 將 AutoSize 設定為 True，這會導致按鈕自動調整大小以符合文字。
    • 將 TabIndex 設定為 0。 這個值會讓開始按鈕成為接收焦點的第一個控制項。

  3. 將按鈕放在表單底部的中央。

    顯示具有四列問題和開始按鈕的數學測驗螢幕擷取畫面。

  4. 在 [ 屬性] 方塊中，設定每個 NumericUpDown 控制項的 TabIndex 屬性：

    • 將Sum NumericUpDown 控制項的TabIndex設定為1。
    • 將 NumericUpDown 控制項差異的TabIndex設定為2。
    • 將產品NumericUpDown 控制項的TabIndex設定為3。
    • 將商數 NumericUpDown 控制項的TabIndex設定為4。

執行您的應用程式

數學問題尚未在您的測驗上運作。 但您仍然可以執行應用程式，以檢查 TabIndex 值是否如預期般運作。

  1. 使用下列其中一種方法來儲存您的應用程式：

    • 選取Ctrl+Shift+S。
    • 在功能表列上，選取 [檔案>全部儲存]。
    • 在工具列上，選取 [ 全部儲存] 按鈕。

  2. 使用下列其中一種方法來執行您的應用程式：

    • 選取 F5。
    • 在功能表列上，選取 [偵> 錯開始偵錯]。
    • 在工具列上，選取 [ 開始] 按鈕。

  3. 選取 Tab 鍵數次，以查看焦點如何從一個控制項移到下一個控制項。

下一步

前進到下一個教學課程，將亂數學問題和事件處理常式新增至您的數學測驗。

教學課程第 2 部分：將數學問題新增至數學測驗 WinForms 應用程式