演练：Windows 窗体设计器入门
更新：2010 年 9 月
Windows 窗体设计器提供多个用于生成 Windows 窗体应用程序的工具。 本演练阐释如何使用设计器提供的各种工具生成应用程序。 本演练涉及以下任务：
创建一个 Windows 窗体项目。
使用对齐线排列控件。
使用智能标记完成设计器任务。
设置控件的边距。
使用 TableLayoutPanel 控件排列控件。
使用 SplitContainer 控件对控件的布局进行分区。
使用**“文档大纲”**窗口浏览您的布局。
通过显示的大小和位置信息来定位控件。
使用“属性”窗口设置属性值。
完成以上步骤后，您就会得到一个使用 Windows 窗体设计器中提供的多个布局功能组装起来的自定义控件。 此控件实现的是一个简单计算器的用户界面 (UI)。 下面的屏幕快照显示该计算器控件的常规布局。
计算器用户界面
.gif "指导教程“计算器”的用户界面")
系统必备
若要完成本演练，您需要：
- 足够的权限，以便能够在安装 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 控件的大小以确认此行为。
-
SplitContainer 控件将缩小到其默认大小。 该控件的大小不再符合 DemoCalculator 控件的大小。
单击 SplitContainer 控件右上角的智能标记标志符号 (
.gif "智能标记标志符号")
)。 单击**“在父容器中停靠”**，将 Dock 属性设置为 Fill。SplitContainer 控件将停靠至 DemoCalculator 控件的边界。
提示
有些控件提供了智能标记以便于设计。 有关更多信息，请参见 演练：使用 Windows 窗体控件上的智能标记执行常规任务。
单击面板之间的竖框线并将其拖动至右侧，从而使左面板占据大部分空间。
SplitContainer 使用分隔面板的可移动框线将 DemoCalculator 控件分成两个面板。 左侧的面板包含计算器按钮和显示器，右侧面板显示用户执行的算术运算的记录。
在“属性”窗口中，将 BorderStyle 属性的值更改为 Fixed3D。
在工具箱中，单击**“公共控件”**节点以打开该节点。 选择 ListView 控件并将其拖动至 SplitContainer 控件的右面板。
在智能标记面板中，单击**“编辑列”**。
**“ColumnHeader 集合编辑器”**对话框打开。
在**“ColumnHeader 集合编辑器”对话框中，单击“添加”按钮向 ListView 控件添加一列。 将列的 Text 属性值更改为“历史记录”。 单击“确定”**创建该列。
在智能标记面板中，单击**“在父容器中停靠”**，然后单击智能标记标志符号以关闭智能标记面板。
在工具箱的**“容器”**节点中，将 TableLayoutPanel 控件拖入 SplitContainer 控件的左面板。
TableLayoutPanel 控件显示在设计器图面上，并且该控件的智能标记面板打开。 TableLayoutPanel 控件在一个网格内排列其子控件。 有关更多信息，请参见 演练：使用 TableLayoutPanel 在 Windows 窗体上排列控件。 TableLayoutPanel 控件将包含 DemoCalculator 控件的显示器和按钮。
单击智能标记面板上的**“编辑行和列”**。
**“列和行样式”**对话框打开。
单击**“添加”按钮，直到五列均显示出来。 选择全部五列，然后单击“大小类型”框中的“百分比”选项按钮。 将“百分比”**值设置为 20。 此操作将每一列设置为同一宽度。
在**“显示”下拉框中单击“行”**。
单击**“添加”按钮，直到五行均显示出来。 选择全部五行，然后单击“大小类型”框中的“百分比”选项按钮。 将“百分比”**值设置为 20。 此操作将每一行设置为同一高度。
单击**“确定”**接受所做的更改，然后单击智能标记标志符号以关闭智能标记面板。
填充控件
至此，您已设置了控件的布局，现在可以用按钮和显示器填充 DemoCalculator 控件。
填充控件
在工具箱中，双击 TextBox 控件图标。
TextBox 控件将放置在 TableLayoutPanel 控件的第一个单元格中。
在“属性”窗口中，将 TextBox 控件的 ColumnSpan 属性值更改为 5。
TextBox 控件移动到其所在行的中间位置。
将 TextBox 控件的 Anchor 属性的值更改为 Left、Right。
TextBox 控件水平扩展以跨越所有五列。
在“属性”窗口中，展开 Font 属性节点。 将 Size 设置为 14，并将 TextBox 控件的 Bold 设置为 true。
选择 TableLayoutPanel 控件。
在工具箱中，双击 Button 图标。
Button 控件将放置在 TableLayoutPanel 控件的下一个打开的单元格中。
在工具箱中，双击 Button 图标四次以填充 TableLayoutPanel 控件的第二行。
按住 Shift 键，同时单击各个 Button 控件，将所有五个控件都选中。 按 Ctrl+C 将 Button 控件复制到剪贴板。
按 Ctrl+V 三次将 Button 控件的副本粘贴到 TableLayoutPanel 控件的其余行。
按住 Shift 键，同时单击各个 Button 控件，将所有 20 个控件都选中。
-
所有 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)。
实现事件处理程序
测试控件
由于 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 控件，然后单击**“属性”**。
选择窗体，然后展开 Padding 属性节点。 将值**“全部”**更改为 20。
DemoCalculator 控件将根据窗体的新 Padding 值相应缩小。
通过将各个尺寸控点拖动到不同位置来调整窗体大小。 观察 DemoCalculator 控件的大小是如何相应调整的。
后续步骤
本演练已演示了如何构造简单计算器的用户界面。 您可能希望通过以下方式扩展其功能：
实现计算器逻辑。 这种方式似乎很简单，但与计算器的状态转换关联的复杂性也很有意思。
将计算器应用程序打包以进行部署。 有关更多信息，请参见如何：使用发布向导发布 ClickOnce 应用程序。
请参见
任务
演练：使用 TableLayoutPanel 在 Windows 窗体上排列控件
概念
其他资源
修订记录
日期 |
修订记录 |
原因 |
|---|---|---|
2010 年 9 月 |
增加了对 Visual Basic 的支持。 |
客户反馈 |