能够正确调整大小的窗体可以提高您的用户界面的易用性。
此演练演示了如何创建当用户调整窗体大小时按比例调整的布局。 您将使用 控件实现一个接收联系人信息的数据输入窗体。
本演练涉及以下任务：
-
创建项目
-
创建布局面板
-
设置布局网格
-
创建“姓名”字段
-
创建“地址”字段
-
创建“电话号码”字段
-
创建“备注”字段
完成这些操作后，窗体应如下所示：
若要复制此主题中的完整代码列表，请参见。
| 显示的对话框和菜单命令可能会与“帮助”中的描述不同，具体取决于您现用的设置或版本。 若要更改设置，请在“工具”菜单上选择“导入和导出设置”。 有关更多信息，请参见 。 |
注意若要完成本演练，您需要：
-
足够的权限，以便能够在安装 Visual Studio 的计算机上创建和运行 Windows 窗体应用程序项目。
第一步是创建应用程序项目。 使用此项目生成显示数据输入窗体的应用程序。
创建项目
-
创建名为 DemoDataEntryLayout 的 Windows 应用程序项目。 有关更多信息，请参见。
下一步是创建包含可调整大小的布局的布局面板。
创建布局面板
-
在“窗体设计器”中选择窗体。
-
从“工具箱”中将一个 控件拖到窗体上。
-
在“属性”窗口中，将 控件的 属性的值更改为 。
-
将 属性的值更改为 4，并将 属性的值更改为 6。
下一步是指定布局网格。 设置 和 集合中的属性以确定当窗体的尺寸改变时列和行如何调整大小。
设置布局网格
-
单击 控件的智能标记符号 (
) 并选择“编辑行和列”以打开“列和行样式”对话框。 有关更多信息，请参见 。 -
从“显示”下拉框中选择“列”。
-
选择第一列并将其 属性的值更改为 。 将“百分比” 控件的值设置为 25。 此列将容纳 控件。
-
选择第二列。 将其 属性的值更改为 。 将“百分比” 控件的值设置为 50。 此列将容纳数据输入字段的 控件。
-
选择第三列。 将其 属性的值更改为 。 将“百分比” 控件的值设置为 25。 此列将容纳 控件。
-
选择第四列。 将其 属性的值更改为 。 将“百分比” 控件的值设置为 50。 此列将容纳数据输入字段的 控件。
-
从“显示”下拉框中选择“行”。
-
对于前面五行，将 属性的值设置为 ，并将“绝对” 控件的值设置为 28。 对于第六行，将 属性的值设置为 ，并将“百分比” 控件的值设置为 80。
-
单击“确定”接受更改。
现在可以使用控件填充布局了。 此数据输入窗体是用于联系人信息的，所以它有“名”字段、“姓”字段、“地址”字段、“电话号码”字段和“备注”字段。 下面的列表显示了创建这些控件的顺序：
-
“姓名”字段
-
“地址”字段
-
“电话号码”字段
-
“备注”字段
姓名输入字段置于 控件的第一行。 它们由 控件和 控件（用于输入名）以及 控件和 控件（用于输入姓）组成。
创建“姓名”字段
-
将一个 控件从“工具箱”拖到 控件中的第一个单元格中。
-
在“属性”窗口中，将 控件的 属性的值设置为 。
-
将 属性的值设置为 true。
-
将 属性的值设置为“名”。
-
将一个 控件从“工具箱”拖到第一行的第二单元格中，位于 控件旁边。
-
将 控件的 属性的值设置为 、。
-
将一个 控件从“工具箱”拖到第一行的第三个单元格中。 将 控件的 属性的值设置为 。 将 属性的值设置为 true。 将 属性的值设置为“姓”。
-
将一个 控件从“工具箱”拖到第一行的第四个单元格中。 将 控件的 属性的值设置为 、。
“地址”字段占用第二、三、四行。 因为街道地址可能很长，所以 Address1 和 Address2 字段跨三列。
创建“地址”字段
-
将一个 控件从“工具箱”拖到第二行的第一个单元格中。
-
在“属性”窗口中，将 控件的 属性的值设置为 。 将 属性的值设置为 true。 将 属性的值设置为“地址 1”。
-
将一个 控件从“工具箱”拖到第二行的第二单元格中，位于 控件旁边。
-
将 控件的 属性的值设置为 、。
-
将“ColumnSpan”属性的值设置为 3。 此属性由 控件提供。 有关所提供的属性的更多信息，请参见。
-
对第三行重复步骤 1 到 5。 将 控件的 属性的值设置为“地址 2”。
-
将一个 控件从“工具箱”拖到第四行的第一个单元格中。
-
将 控件的 属性的值设置为 。 将 属性的值设置为 true。 将 属性的值设置为“城市”。
-
将一个 控件从“工具箱”拖到第四行的第二单元格中，位于 控件旁边。
-
将 控件的 属性的值设置为 、。
-
将一个 控件从“工具箱”拖到第四行的第三个单元格中。
-
将 控件的 属性的值设置为 。 将 属性的值设置为 true。 将 属性的值设置为“州/省”。
-
将一个 控件从“工具箱”拖到第四行的第四个单元格中。
-
将 控件的 属性的值设置为 。 将 属性的值设置为 true。
“电话号码”字段占用第五行。 若要确保用户仅输入有效电话号码，请使用 控件来实现。
创建“电话号码”字段
-
将一个 控件从“工具箱”拖到第五行的第一个单元格中。
-
在“属性”窗口中，将 控件的 属性的值设置为 。 将 属性的值设置为 true。 将 属性的值设置为“工作电话”。
-
将一个 控件从“工具箱”拖到第五行的第二个单元格中。
-
将 控件的 属性的值设置为 。
-
单击 控件上的智能标记 (
) 以打开 编辑器。 -
在“输入掩码”对话框中选择“电话号码”掩码。 单击“确定”。
-
对“家庭电话号码”字段重复步骤 1 到 5。 将 属性的值设置为“家庭电话”。
最后一个字段占用第六行。 它用于输入备注并且允许任意形式的文本输入。
创建“备注”字段
-
将一个 控件从“工具箱”拖到第六行的第一个单元格中。
-
在“属性”窗口中，将 控件的 属性的值设置为 、。 将 属性的值设置为 true。 将 属性的值设置为“备注”。
-
将一个 控件从“工具箱”拖到第六行的第二个单元格中。
-
将“ColumnSpan”属性的值设置为 3。
-
将 控件的 属性的值设置为 。
最后一步是完成布局网格设置。 第一列和第三列应设置为 。 由于已在这些列中放置了控件，因此在设计时这些列可见。
设置布局网格
-
选择 控件并单击其智能标记标志符号 (
)。 选择“编辑行和列”打开“列和行样式”对话框。 有关更多信息，请参见 。 -
从“显示”下拉框中选择“列”。
-
选择第一列和第三列并将 属性的值更改为 。
-
单击“确定”接受更改。
至此，可以运行应用程序以检查窗体的动态布局。
检查窗体的布局
-
生成并运行该项目。 当窗体出现时，增大和缩小该窗体。
| 控件将按比例调整大小以填充可用空间。 |
注意，您可以创建实现动态布局的窗体，使窗体适于本地化。 有关更多信息，请参见。