教學課程:建立數學測驗 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 鍵數次,以查看焦點如何從一個控制項移到下一個控制項。

下一步

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