教程:创建数学测验 WinForms 应用
在此系列四个教程中,你将生成一个数学测验。 测验包含四个随机数学问题,测验者尝试在指定时间内回答。
Visual Studio 集成开发环境(IDE)提供了创建应用所需的工具。 若要了解有关此 IDE 的详细信息,请参阅 欢迎使用 Visual Studio IDE。
在第一个教程中,你将了解如何:
- 创建使用 Windows 窗体的 Visual Studio 项目。
- 向窗体添加标签、按钮和其他控件。
- 设置控件的属性。
- 保存并运行项目。
先决条件
需要 Visual Studio 才能完成本教程。 访问 Visual Studio 下载页面 获取免费版本。
注意
本教程需要 Windows 窗体应用 (.NET Framework) 项目模板。 在安装过程中,选择 .NET 桌面开发 工作负载:
如果已安装 Visual Studio 并需要添加它,请在菜单中选择 工具>获取工具和功能,或在 创建新项目 窗口中,选择 安装更多工具和功能 链接。
创建 Windows 窗体项目
创建数学测验时,第一步是创建 Windows 窗体应用项目。
打开 Visual Studio。
在开始窗口中,选择 创建新项目。
在“创建新项目”窗口中,搜索“Windows 窗体”。 然后从 项目类型 列表中选择 桌面。
针对 C# 或 Visual Basic,选择“Windows 窗体应用 (.NET Framework)”模板,然后选择“下一步”。
在 配置新项目 窗口中,将项目命名为 MathQuiz,然后选择 “创建”。
打开 Visual Studio。
在开始窗口中,选择 创建新项目。
在“创建新项目”窗口中,搜索“Windows 窗体”。 然后从 项目类型 列表中选择 桌面。
针对 C# 或 Visual Basic,选择“Windows 窗体应用 (.NET Framework)”模板,然后选择“下一步”。
在 配置新项目 窗口中,命名项目为 MathQuiz,然后选择 创建。
Visual Studio 为应用创建解决方案。 解决方案是应用所需的所有项目和文件的容器。
设置窗体属性
选择模板并命名文件后,Visual Studio 会为你打开一个表单。 本部分介绍如何更改某些窗体属性。
在项目中,选择“Windows 窗体设计器”。 设计器选项卡标记为 Form1.cs [设计] 用于 C# 或 Form1.vb [设计] 用于 Visual Basic。
选择窗体“Form1”。
属性 窗口现在显示表单的属性。 此窗口通常位于 Visual Studio 的右下角。 如果未看到 属性,请选择 视图>属性窗口。
在属性窗口中找到“文本”属性。 根据列表的排序方式,可能需要向下滚动。 对于“文本”值输入“数学测验”,然后选择 Enter。
窗体的标题栏中现在包含文本“数学测验”。
注意
可以按类别或按字母顺序显示属性。 使用 属性 窗口中的按钮来回切换。
将窗体的大小更改为 500 像素宽 400 像素。
可以通过拖动窗体的边缘或手柄来调整窗体的大小,直到尺寸以 大小 值的形式显示在 属性 窗口中。 拖动图柄是窗体右下角的一个白色小正方形。 还可以通过更改 Size 属性的值来调整窗体的大小。
将 FormBorderStyle 属性的值更改为 Fixed3D,并将 MaximizeBox 属性设置为 False。
这些值可防止测验者调整表单的大小。
创建剩余时间框
数学测验的右上角包含一个框。 该框显示测验中保留的秒数。 本部分演示如何对该框使用标签。 在本系列的后续教程中添加倒计时计时器的代码。
在 Visual Studio IDE 的左侧,选择 工具箱 选项卡。如果未看到工具箱,请在菜单栏中选择 视图>工具箱,或使用快捷键 Ctrl+Alt+X。
选择 工具箱中的 Label 控件,然后将其拖到窗体上。
在 属性 框中,设置标签的以下属性:
- 将 (名称) 设置为 timeLabel。
- 将 自动调整大小 更改为 False,以便调整框的大小。
- 将 BorderStyle 更改为 FixedSingle,以在框周围绘制线条。
- 将 大小 设置为 200, 30。
- 选择 Text 属性,然后选择 Backspace 键以删除 Text 值。
- 选择“文本”属性旁边的加号 (+),然后将“大小”设置为“15.75”。
将标签移动到窗体的右上角。 出现蓝色分隔线时,使用它们将控件定位在窗体上。
从 工具箱中添加另一个 标签 控件,然后将其字号设置为 15.75。
将此标签的 Text 属性设置为 时间剩余。
移动标签,使其在 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。
- 在 MaximumSize下,将宽度设置为 100。
- 将“(Name)”设置为 sum。
将 NumericUpDown 控件与用于加法问题的 标签 控件对齐。
添加减法、乘法和除法问题的控件
接下来,将标签添加到剩余数学问题的窗体中。
复制为加法问题创建的四个 标签 控件和 NumericUpDown 控件。 将它们粘贴到表格中。
移动新控件以在加法控件下方排列。
在 属性 框中,为新控件设置以下属性:
- 将第一个问号标签的 (名称) 设置为 minusLeftLabel。
- 将第二个标签的 文本 设置为 -(减号)。
- 将第二个问号标签的“(Name)”设置为“minusRightLabel”。
- 将“NumericUpDown”控件的“(Name)”设置为“difference”。
复制加法控件,再将它们粘贴到窗体中两次。
对于第三行:
- 将第一个问号标签的“(Name)”设置为“timesLeftLabel”。
- 将第二个标签 文本 设置为 ×(乘法符号)。 可以从本教程复制乘法符号并将其粘贴到窗体上。
- 将第二个问号标签的 (名称) 设置为 timesRightLabel。
- 将“NumericUpDown”控件的“(Name)”设置为“product”。
对于第四行:
- 将第一个问号标签的 (名称) 设置为 dividedLeftLabel。
- 将第二个标签的“文本”设置为 ÷(除号)。 可以从本教程复制分区符号并将其粘贴到窗体上。
- 将第二个问号标签的“(Name)”设置为“dividedRightLabel”。
- 将“NumericUpDown”控件的“(Name)”设置为“quotient”。
添加“开始”按钮并设置“tab-index”顺序
本部分介绍如何添加“开始”按钮。 还需指定控件的 tab 键顺序。 此排序确定测验参与者如何使用 Tab键 从一个控件移动到下一个控件。
将 Button 控件从 工具箱 添加到窗体。
在 属性 框中,设置按钮的以下属性:
- 将“(Name)”设置为“startButton”。
- 将 文本 设置为 开始测验。
- 将字号设置为 14。
- 将 自动调整大小 设置为 True,这会导致按钮自动调整大小以适应文本。
- 将“TabIndex”设置为“0”。 此值使开始按钮成为接收焦点的第一个控件。
将此按钮置于窗体底部附近的中心位置。
在“属性”框中,设置每个 NumericUpDown 控件的“TabIndex”属性:
- 将 sum 控件的 TabIndex 设置为 1。
- 将“difference”控件的“TabIndex”设置为“2”。
- 将 产品 控件的 TabIndex 设置为 3。
- 将“quotient”控件的“TabIndex”设置为“4”。
运行应用
数学题尚不适用于你的测验。 但你仍然可以运行应用来检查 TabIndex 值是否按预期运行。
使用以下方法之一保存应用:
- 选择 Ctrl+Shift+S。
- 在菜单栏中,选择“文件”>“保存全部”。
- 在工具栏上,选择 保存所有 按钮。
使用以下方法之一运行应用:
- 选择 F5。
- 在菜单栏上,依次选择“调试”>“开始调试”。
- 在工具栏上,选择 开始 按钮。
按几次“Tab” 键,以查看焦点如何从一个控件移动到下一个控件。
下一步
转到下一教程,向数学测验添加随机数学问题和事件处理程序。