Windows 窗体设计器(Windows Forms Designer)入门

Visual Studio 2010

更新：2010 年 9 月

Windows 窗体设计器提供多个用于生成 Windows 窗体应用程序的工具。本演练阐释如何使用设计器提供的各种工具生成应用程序。本演练涉及以下任务：

创建一个 Windows 窗体项目。
使用对齐线排列控件。
使用智能标记完成设计器任务。
设置控件的边距。
使用 TableLayoutPanel 控件排列控件。
使用 SplitContainer 控件对控件的布局进行分区。
使用“文档大纲”窗口浏览您的布局。
通过显示的大小和位置信息来定位控件。
使用“属性”窗口设置属性值。

完成以上步骤后，您就会得到一个使用 Windows 窗体设计器中提供的多个布局功能组装起来的自定义控件。此控件实现的是一个简单计算器的用户界面 (UI)。下面的屏幕快照显示该计算器控件的常规布局。

计算器用户界面

系统必备

若要完成本演练，您需要：

足够的权限，以便能够在安装 Visual Studio 的计算机上创建并运行 Windows 窗体应用程序项目。

注意
显示的对话框和菜单命令可能会与“帮助”中的描述不同，具体取决于您现用的设置或版本。若要更改设置，请在“工具”菜单上选择“导入和导出设置”。有关更多信息，请参见使用设置。

创建自定义控件项目

第一步是创建 DemoCalculator 窗体项目。

创建自定义控件项目

在“文件”菜单上，指向“新建”，然后单击“项目”以打开“新建项目”对话框。
从“Windows”类别中的 Visual Basic 或 Visual C# 项目列表中，选择“Windows 窗体控件库”项目模板。
在“名称”框中键入 DemoCalculatorLib，然后单击“确定”。
在解决方案资源管理器中，右击“UserControl1.vb”或“UserControl1.cs”，再单击“重命名”。
将文件名更改为 DemoCalculator.vb 或 DemoCalculator.cs。当系统询问是否重命名对代码元素“UserControl1”的所有引用时，单击“是”按钮。

Windows 窗体设计器当前显示 DemoCalculator 控件的设计器图面。在此视图中，从工具箱选择控件和组件，然后将所选控件和组件放置在设计器图面上，便可以通过图形方式设计控件的外观。有关自定义控件的更多信息，请参见各种自定义控件。

设计控件布局

DemoCalculator 控件包含多个 Windows 窗体控件。在此过程中，将使用 Windows 窗体设计器的一些快速应用程序开发 (RAD) 功能排列控件。

设计控件布局

在 Windows 窗体设计器中，单击右下角的尺寸控点并将其向右下方拖动，可以增大 DemoCalculator 控件的尺寸。在 Visual Studio 的右下角找到控件的大小和位置信息。在调整控件大小时注意该控件的大小信息，将该控件的宽度设置为 500，高度设置为 400。

在工具箱中，单击“容器”节点以打开该节点。选择 SplitContainer 控件并将该控件拖动到设计器图面上。

将 SplitContainer 放置在 DemoCalculator 控件的设计器图面上。

注意
SplitContainer 控件会调整自身大小以适应 DemoCalculator 控件的大小。检查“属性”窗口以查看 SplitContainer 控件的属性设置。找到 Dock 属性。该属性的值为 Fill，表示 SplitContainer 控件的大小始终按照DemoCalculator 控件的边界来调整。调整 DemoCalculator 控件的大小以确认此行为。

在“属性”窗口中，将 Dock 属性的值更改为 None。

SplitContainer 控件将缩小到其默认大小。该控件的大小不再符合 DemoCalculator 控件的大小。
单击 SplitContainer 控件右上角的智能标记标志符号 ()。单击“在父容器中停靠”，将 Dock 属性设置为 Fill。

SplitContainer 控件将停靠至 DemoCalculator 控件的边界。

注意

有些控件提供了智能标记以便于设计。有关更多信息，请参见演练：使用 Windows 窗体控件上的智能标记执行常规任务。
单击面板之间的竖框线并将其拖动至右侧，从而使左面板占据大部分空间。

SplitContainer 使用分隔面板的可移动框线将 DemoCalculator 控件分成两个面板。左侧的面板包含计算器按钮和显示器，右侧面板显示用户执行的算术运算的记录。
在“属性”窗口中，将 BorderStyle 属性的值更改为 Fixed3D。
在工具箱中，单击“公共控件”节点以打开该节点。选择 ListView 控件并将其拖动至 SplitContainer 控件的右面板。
单击 ListView 控件的智能标记标志符号。在智能标记面板中，将 View 设置更改为 Details。
在智能标记面板中，单击“编辑列”。

“ColumnHeader 集合编辑器”对话框打开。
在“ColumnHeader 集合编辑器”对话框中，单击“添加”按钮向 ListView 控件添加一列。将列的 Text 属性值更改为“历史记录”。单击“确定”创建该列。
在智能标记面板中，单击“在父容器中停靠”，然后单击智能标记标志符号以关闭智能标记面板。
在工具箱的“容器”节点中，将 TableLayoutPanel 控件拖入 SplitContainer 控件的左面板。

TableLayoutPanel 控件显示在设计器图面上，并且该控件的智能标记面板打开。 TableLayoutPanel 控件在一个网格内排列其子控件。有关更多信息，请参见演练：使用 TableLayoutPanel 在 Windows 窗体上排列控件。TableLayoutPanel 控件将包含 DemoCalculator 控件的显示器和按钮。
单击智能标记面板上的“编辑行和列”。

“列和行样式”对话框打开。
单击“添加”按钮，直到五列均显示出来。选择全部五列，然后单击“大小类型”框中的“百分比”选项按钮。将“百分比”值设置为 20。此操作将每一列设置为同一宽度。
在“显示”下拉框中单击“行”。
单击“添加”按钮，直到五行均显示出来。选择全部五行，然后单击“大小类型”框中的“百分比”选项按钮。将“百分比”值设置为 20。此操作将每一行设置为同一高度。
单击“确定”接受所做的更改，然后单击智能标记标志符号以关闭智能标记面板。
在“属性”窗口中，将 Dock 属性的值更改为 Fill。

注意
有些控件提供了智能标记以便于设计。有关更多信息，请参见演练：使用 Windows 窗体控件上的智能标记执行常规任务。

填充控件

至此，您已设置了控件的布局，现在可以用按钮和显示器填充 DemoCalculator 控件。

填充控件

在工具箱中，双击 TextBox 控件图标。

TextBox 控件将放置在 TableLayoutPanel 控件的第一个单元格中。
在“属性”窗口中，将 TextBox 控件的 ColumnSpan 属性值更改为 5。

TextBox 控件移动到其所在行的中间位置。
将 TextBox 控件的 Anchor 属性的值更改为 Left、Right。

TextBox 控件水平扩展以跨越所有五列。
将 TextBox 控件的 TextAlign 属性的值更改为 Right。
在“属性”窗口中，展开 Font 属性节点。将 Size 设置为 14，并将 TextBox 控件的 Bold 设置为 true。
选择 TableLayoutPanel 控件。
在工具箱中，双击 Button 图标。

Button 控件将放置在 TableLayoutPanel 控件的下一个打开的单元格中。
在工具箱中，双击 Button 图标四次以填充 TableLayoutPanel 控件的第二行。
按住 Shift 键，同时单击各个 Button 控件，将所有五个控件都选中。按 Ctrl+C 将 Button 控件复制到剪贴板。
按 Ctrl+V 三次将 Button 控件的副本粘贴到 TableLayoutPanel 控件的其余行。
按住 Shift 键，同时单击各个 Button 控件，将所有 20 个控件都选中。
在“属性”窗口中，将 Dock 属性的值更改为 Fill。

所有 Button 控件都将停靠，以填充其所在的单元格。
在“属性”窗口中，展开 Margin 属性节点。将 All 的值设置为 5。

所有 Button 控件都将缩小，以增加其相互之间的边距。
选择“button10”和“button20”，然后按 Delete 键将其从布局中删除。
选择“button5”和“button15”，然后将这两个按钮的 RowSpan 属性的值更改为 2。这两个按钮将成为 DemoCalculator 控件的“清除”和“=”按钮。

使用“文档大纲”窗口定位控件

使用多个控件填充了您的控件或窗体后，您可以发现，通过“文档大纲”窗口浏览您的布局更容易找到自己的控件或窗体。

使用“文档大纲”窗口定位

在“视图”菜单上指向“其他窗口”，然后单击“文档大纲”。

“文档大纲”窗口将显示 DemoCalculator 控件及其构成控件的树视图。像 SplitContainer 这样的容器控件在树中将其子控件显示为子节点。还可以使用“文档大纲”窗口就地对控件进行重命名。
在“文档大纲”窗口中右击“button1”，然后单击“重命名”。将其名称更改为 sevenButton。
使用“文档大纲”窗口，按以下列表将 Button 控件从设计器生成的名称更改为生产名称：
- 将 button1 更改为 sevenButton
- 将 button2 更改为 eightButton
- 将 button3 更改为 nineButton
- 将 button4 更改为 divisionButton
- 将 button5 更改为 clearButton
- 将 button6 更改为 fourButton
- 将 button7 更改为 fiveButton
- 将 button8 更改为 sixButton
- 将 button9 更改为 multiplicationButton
- 将 button11 更改为 oneButton
- 将 button12 更改为 twoButton
- 将 button13 更改为 threeButton
- 将 button14 更改为 subtractionButton
- 将 button15 更改为 equalsButton
- 将 button16 更改为 zeroButton
- 将 button17 更改为 changeSignButton
- 将 button18 更改为 decimalButton
- 将 button19 更改为 additionButton
使用“文档大纲”和“属性”窗口，按以下列表更改每个 Button 控件名称的 Text 属性值。
- 将 sevenButton 控件文本属性更改为 7
- 将 eightButton 控件文本属性更改为 8
- 将 nineButton 控件文本属性更改为 9
- 将 divisionButton 控件文本属性更改为 /
- 将 clearButton 控件文本属性更改为 Clear
- 将 fourButton 控件文本属性更改为 4
- 将 fiveButton 控件文本属性更改为 5
- 将 sixButton 控件文本属性更改为 6
- 将 multiplicationButton 控件文本属性更改为 *
- 将 oneButton 控件文本属性更改为 1
- 将 twoButton 控件文本属性更改为 2
- 将 threeButton 控件文本属性更改为 3
- 将 subtractionButton 控件文本属性更改为 -
- 将 equalsButton 控件文本属性更改为 =
- 将 zeroButton 控件文本属性更改为 0
- 将 changeSignButton 控件文本属性更改为 +/-
- 将 decimalButton 控件文本属性更改为 .
- 将 additionButton 控件文本属性更改为 +
在设计器图面上，按住 Shift 键，同时单击各个 Button 控件，将所有这些控件都选中。
在“属性”窗口中，展开 Font 属性节点。将 Size 设置为 14，并将所有 Button 控件的 Bold 设置为 true。

这将完成 DemoCalculator 控件的设计。剩下的工作是提供计算器逻辑。

实现事件处理程序

DemoCalculator 控件上的按钮含有事件处理程序，这些程序可用于实现大部分计算器逻辑。使用 Windows 窗体设计器，可以通过一次双击为所有按钮实现所有事件处理程序的存根 (stub)。

实现事件处理程序

在设计器图面上，按住 Shift 键，同时单击各个 Button 控件，将所有这些控件都选中。
双击其中的一个 Button 控件。

代码编辑器打开并定位到由设计器生成的事件处理程序。

测试控件

由于 DemoCalculator 控件是从 UserControl 类继承的，因此，可以使用“UserControl 测试容器”测试该控件的行为。有关更多信息，请参见如何：测试 UserControl 的运行时行为。

测试控件

按 F5 键在“UserControl 测试容器”中生成并运行 DemoCalculator 控件。
单击 SplitContainer 面板之间的框线并左右拖动。 TableLayoutPanel 及其所有子控件将调整自身大小以适应可用空间。
测试控件后，单击“关闭”。

在窗体上使用该控件

DemoCalculator 控件可以在其他复合控件或在某个窗体上使用。下面的过程介绍如何使用该控件。

创建项目

第一步是创建应用程序项目。您将使用此项目生成显示自定义控件的应用程序。

创建项目

在“文件”菜单上，指向“添加”，然后单击“新建项目”打开“新建项目”对话框。
从 Visual Basic 或 Visual C# 项目列表中，选择“Windows 窗体应用程序”项目模板。
在“名称”框中键入 DemoCalculatorTest，然后单击“确定”。
在解决方案资源管理器中，右击“DemoCalculatorTest”项目，然后单击“添加引用”以打开“添加引用”对话框。
单击“项目”选项卡，然后双击 DemoCalculatorLib 项目以添加对测试项目的引用。
在解决方案资源管理器中，右击 DemoCalculatorTest，然后单击“设为启动项目”。
在 Windows 窗体设计器中，将窗体的大小增加至 700 x 500 左右。

在窗体布局中使用您的控件

要在应用程序中使用 DemoCalculator 控件，需要将该控件放置在一个窗体上。

在窗体布局中使用您的控件

在工具箱中，展开“DemoCalculatorLib 组件”节点。
从工具箱中将 DemoCalculator 控件拖到窗体上。将控件移动到窗体的左上角。当控件接近窗体边框时，将显示对齐线。这些对齐线指示窗体的 Padding 属性和控件的 Margin 属性的距离。将该控件放置在对齐线指示的位置。

有关更多信息，请参见演练：使用对齐线在 Windows 窗体上排列控件。
将 Button 控件从工具箱拖放到窗体上。
在 DemoCalculator 控件周围移动 Button 控件，并观察对齐线出现的位置。使用此功能来对齐控件既精确又容易。完成后删除 Button 控件。
右击 DemoCalculator 控件，然后单击“属性”。
将 Dock 属性的值更改为 Fill。
选择窗体，然后展开 Padding 属性节点。将值“全部”更改为 20。

DemoCalculator 控件将根据窗体的新 Padding 值相应缩小。
通过将各个尺寸控点拖动到不同位置来调整窗体大小。观察 DemoCalculator 控件的大小是如何相应调整的。

后续步骤

本演练已演示了如何构造简单计算器的用户界面。您可能希望通过以下方式扩展其功能：

实现计算器逻辑。这种方式似乎很简单，但与计算器的状态转换关联的复杂性也很有意思。
将计算器应用程序打包以进行部署。有关更多信息，请参见如何：使用发布向导发布 ClickOnce 应用程序。