能够正确调整大小的窗体可以提高您的用户界面的易用性。
此演练演示了如何创建当用户调整窗体大小时按比例调整的布局。 您将使用 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 控件（用于输入姓）组成。
创建“姓名”字段
“地址”字段占用第二、三、四行。 因为街道地址可能很长，所以 Address1 和 Address2 字段跨三列。
创建“地址”字段
-
将一个 Label 控件从“工具箱”拖到第二行的第一个单元格中。
-
在“属性”窗口中，将 Label 控件的 Anchor 属性的值设置为 Right。 将 AutoSize 属性的值设置为 true。 将 Text 属性的值设置为“地址 1”。
-
将“ColumnSpan”属性的值设置为 3。 此属性由 TableLayoutPanel 控件提供。 有关所提供的属性的更多信息，请参见扩展程序提供程序概述。
-
将一个 Label 控件从“工具箱”拖到第四行的第一个单元格中。
-
将 Label 控件的 Anchor 属性的值设置为 Right。 将 AutoSize 属性的值设置为 true。 将 Text 属性的值设置为“城市”。
-
将一个 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 属性的值设置为“家庭电话”。
最后一步是完成布局网格设置。 第一列和第三列应设置为 AutoSize。 由于已在这些列中放置了控件，因此在设计时这些列可见。
设置布局网格
-
选择 TableLayoutPanel 控件并单击其智能标记标志符号 (
)。 选择“编辑行和列”打开“列和行样式”对话框。 有关更多信息，请参见 如何：在 TableLayoutPanel 控件中编辑行和列。 -
从“显示”下拉框中选择“列”。
-
单击“确定”接受更改。
至此，可以运行应用程序以检查窗体的动态布局。
检查窗体的布局
-
生成并运行该项目。 当窗体出现时，增大和缩小该窗体。
| 控件将按比例调整大小以填充可用空间。 |
注意，您可以创建实现动态布局的窗体，使窗体适于本地化。 有关更多信息，请参见演练：创建可根据本地化需要调整比例的布局。
