演练：创建可根据数据输入需要调整大小的 Windows 窗体

项目
08/12/2011

能够正确调整大小的窗体可以提高您的用户界面的易用性。

此演练演示了如何创建当用户调整窗体大小时按比例调整的布局。您将使用 TableLayoutPanel 控件实现一个接收联系人信息的数据输入窗体。

本演练涉及以下任务：

创建项目
创建布局面板
设置布局网格
创建“姓名”字段
创建“地址”字段
创建“电话号码”字段
创建“备注”字段

完成这些操作后，窗体应如下所示：

带 TableLayoutPanel 的基本数据输入窗体

若要复制此主题中的完整代码列表，请参见如何：创建用于数据输入的大小可调的 Windows 窗体。

提示

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

系统必备

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

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

创建项目

第一步是创建应用程序项目。使用此项目生成显示数据输入窗体的应用程序。

创建项目

创建名为 DemoDataEntryLayout 的 Windows 应用程序项目。有关更多信息，请参见如何：创建新的 Windows 窗体应用程序项目。

创建布局面板

下一步是创建包含可调整大小的布局的布局面板。

创建布局面板

在**“窗体设计器”**中选择窗体。
从**“工具箱”**中将一个 TableLayoutPanel 控件拖到窗体上。
在**“属性”**窗口中，将 TableLayoutPanel 控件的 Dock 属性的值更改为 Fill。
将 ColumnCount 属性的值更改为 4，并将 RowCount 属性的值更改为 6。

设置布局网格

下一步是指定布局网格。设置 ColumnStyles 和 RowStyles 集合中的属性以确定当窗体的尺寸改变时列和行如何调整大小。

设置布局网格

单击 TableLayoutPanel 控件的智能标记符号 () 并选择**“编辑行和列”以打开“列和行样式”**对话框。有关更多信息，请参见如何：在 TableLayoutPanel 控件中编辑行和列。
从**“显示”下拉框中选择“列”**。
选择第一列并将其 SizeType 属性的值更改为 Percent。将**“百分比”**NumericUpDown 控件的值设置为 25。此列将容纳 Label 控件。
选择第二列。将其 SizeType 属性的值更改为 Percent。将**“百分比”**NumericUpDown 控件的值设置为 50。此列将容纳数据输入字段的 TextBox 控件。
选择第三列。将其 SizeType 属性的值更改为 Percent。将**“百分比”**NumericUpDown 控件的值设置为 25。此列将容纳 Label 控件。
选择第四列。将其 SizeType 属性的值更改为 Percent。将**“百分比”**NumericUpDown 控件的值设置为 50。此列将容纳数据输入字段的 TextBox 控件。
从**“显示”下拉框中选择“行”**。
对于前面五行，将 SizeType 属性的值设置为 Absolute，并将**“绝对”** NumericUpDown 控件的值设置为 28。对于第六行，将 SizeType 属性的值设置为 Percent，并将**“百分比”** NumericUpDown 控件的值设置为 80。
单击**“确定”**接受更改。

用控件填充该布局

现在可以使用控件填充布局了。此数据输入窗体是用于联系人信息的，所以它有“名”字段、“姓”字段、“地址”字段、“电话号码”字段和“备注”字段。下面的列表显示了创建这些控件的顺序：

“姓名”字段
“地址”字段
“电话号码”字段
“备注”字段

创建“姓名”字段

姓名输入字段置于 TableLayoutPanel 控件的第一行。它们由 Label 控件和 TextBox 控件（用于输入名）以及 Label 控件和 TextBox 控件（用于输入姓）组成。

创建“姓名”字段

将一个 Label 控件从**“工具箱”**拖到 TableLayoutPanel 控件中的第一个单元格中。
在**“属性”**窗口中，将 Label 控件的 Anchor 属性的值设置为 Right。
将 AutoSize 属性的值设置为 true。
将 Text 属性的值设置为“名”。
将一个 TextBox 控件从**“工具箱”**拖到第一行的第二单元格中，位于 Label 控件旁边。
将 TextBox 控件的 Anchor 属性的值设置为 Left、Right。
将一个 Label 控件从**“工具箱”**拖到第一行的第三个单元格中。将 Label 控件的 Anchor 属性的值设置为 Right。将 AutoSize 属性的值设置为 true。将 Text 属性的值设置为“姓”。
将一个 TextBox 控件从**“工具箱”**拖到第一行的第四个单元格中。将 TextBox 控件的 Anchor 属性的值设置为 Left、Right。

创建“地址”字段

“地址”字段占用第二、三、四行。因为街道地址可能很长，所以 Address1 和 Address2 字段跨三列。

创建“地址”字段

将一个 Label 控件从**“工具箱”**拖到第二行的第一个单元格中。
在**“属性”**窗口中，将 Label 控件的 Anchor 属性的值设置为 Right。将 AutoSize 属性的值设置为 true。将 Text 属性的值设置为“地址 1”。
将一个 TextBox 控件从**“工具箱”**拖到第二行的第二单元格中，位于 Label 控件旁边。
将 TextBox 控件的 Anchor 属性的值设置为 Left、Right。
将**“ColumnSpan”**属性的值设置为 3。此属性由 TableLayoutPanel 控件提供。有关所提供的属性的更多信息，请参见扩展程序提供程序概述。
对第三行重复步骤 1 到 5。将 Label 控件的 Text 属性的值设置为“地址 2”。
将一个 Label 控件从**“工具箱”**拖到第四行的第一个单元格中。
将 Label 控件的 Anchor 属性的值设置为 Right。将 AutoSize 属性的值设置为 true。将 Text 属性的值设置为“城市”。
将一个 TextBox 控件从**“工具箱”**拖到第四行的第二单元格中，位于 Label 控件旁边。
将 TextBox 控件的 Anchor 属性的值设置为 Left、Right。
将一个 Label 控件从**“工具箱”**拖到第四行的第三个单元格中。
将 Label 控件的 Anchor 属性的值设置为 Right。将 AutoSize 属性的值设置为 true。将 Text 属性的值设置为“州/省”。
将一个 ComboBox 控件从**“工具箱”**拖到第四行的第四个单元格中。
将 ComboBox 控件的 Anchor 属性的值设置为 Left。将 FormattingEnabled 属性的值设置为 true。

创建“电话号码”字段

“电话号码”字段占用第五行。若要确保用户仅输入有效电话号码，请使用 MaskedTextBox 控件来实现。

创建“电话号码”字段

将一个 Label 控件从**“工具箱”**拖到第五行的第一个单元格中。
在**“属性”**窗口中，将 Label 控件的 Anchor 属性的值设置为 Right。将 AutoSize 属性的值设置为 true。将 Text 属性的值设置为“工作电话”。
将一个 MaskedTextBox 控件从**“工具箱”**拖到第五行的第二个单元格中。
将 MaskedTextBox 控件的 Anchor 属性的值设置为 Left。
单击 MaskedTextBox 控件上的智能标记 () 以打开 Mask 编辑器。
在**“输入掩码”对话框中选择“电话号码”掩码。单击“确定”**。
对“家庭电话号码”字段重复步骤 1 到 5。将 Text 属性的值设置为“家庭电话”。

创建“备注”字段

最后一个字段占用第六行。它用于输入备注并且允许任意形式的文本输入。

创建“备注”字段

将一个 Label 控件从**“工具箱”**拖到第六行的第一个单元格中。
在**“属性”**窗口中，将 Label 控件的 Anchor 属性的值设置为 Top、Right。将 AutoSize 属性的值设置为 true。将 Text 属性的值设置为“备注”。
将一个 RichTextBox 控件从**“工具箱”**拖到第六行的第二个单元格中。
将**“ColumnSpan”**属性的值设置为 3。
将 RichTextBox 控件的 Dock 属性的值设置为 Fill。

完成布局网格设置

最后一步是完成布局网格设置。第一列和第三列应设置为 AutoSize。由于已在这些列中放置了控件，因此在设计时这些列可见。

设置布局网格

选择 TableLayoutPanel 控件并单击其智能标记标志符号 ()。选择**“编辑行和列”打开“列和行样式”**对话框。有关更多信息，请参见如何：在 TableLayoutPanel 控件中编辑行和列。
从**“显示”下拉框中选择“列”**。
选择第一列和第三列并将 SizeType 属性的值更改为 AutoSize。
单击**“确定”**接受更改。