创建可按比例调整的布局的 Windows 窗体

 

 

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

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

本演练涉及以下任务：

  • 创建项目

  • 创建布局面板

  • 设置布局网格

  • 创建“姓名”字段

  • 创建“地址”字段

  • 创建“电话号码”字段

  • 创建“备注”字段

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

带 TableLayoutPanel 的基本数据输入窗体

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

注意注意

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

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

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

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

创建项目

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

创建布局面板

  1. 在“窗体设计器”中选择窗体。

  2. 从“工具箱”中将一个 TableLayoutPanel 控件拖到窗体上。

  3. 在“属性”窗口中，将 TableLayoutPanel 控件的 Dock 属性的值更改为 Fill。

  4. 将 ColumnCount 属性的值更改为 4，并将 RowCount 属性的值更改为 6。

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

设置布局网格

  1. 单击 TableLayoutPanel 控件的智能标记符号 (智能标记标志符号) 并选择“编辑行和列”以打开“列和行样式”对话框。 有关更多信息，请参见 如何：在 TableLayoutPanel 控件中编辑行和列。

  2. 从“显示”下拉框中选择“列”。

  3. 选择第一列并将其 SizeType 属性的值更改为 Percent。 将“百分比”NumericUpDown 控件的值设置为 25。 此列将容纳 Label 控件。

  4. 选择第二列。 将其 SizeType 属性的值更改为 Percent。 将“百分比”NumericUpDown 控件的值设置为 50。 此列将容纳数据输入字段的 TextBox 控件。

  5. 选择第三列。 将其 SizeType 属性的值更改为 Percent。 将“百分比”NumericUpDown 控件的值设置为 25。 此列将容纳 Label 控件。

  6. 选择第四列。 将其 SizeType 属性的值更改为 Percent。 将“百分比”NumericUpDown 控件的值设置为 50。 此列将容纳数据输入字段的 TextBox 控件。

  7. 从“显示”下拉框中选择“行”。

  8. 对于前面五行，将 SizeType 属性的值设置为 Absolute，并将“绝对”NumericUpDown 控件的值设置为 28。 对于第六行，将 SizeType 属性的值设置为 Percent，并将“百分比”NumericUpDown 控件的值设置为 80。

  9. 单击“确定”接受更改。

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

  1. “姓名”字段

  2. “地址”字段

  3. “电话号码”字段

  4. “备注”字段

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

创建“姓名”字段

  1. 将一个 Label 控件从“工具箱”拖到 TableLayoutPanel 控件中的第一个单元格中。

  2. 在“属性”窗口中，将 Label 控件的 Anchor 属性的值设置为 Right。

  3. 将 AutoSize 属性的值设置为 true。

  4. 将 Text 属性的值设置为“名”。

  5. 将一个 TextBox 控件从“工具箱”拖到第一行的第二单元格中，位于 Label 控件旁边。

  6. 将 TextBox 控件的 Anchor 属性的值设置为 Left、Right。

  7. 将一个 Label 控件从“工具箱”拖到第一行的第三个单元格中。 将 Label 控件的 Anchor 属性的值设置为 Right。 将 AutoSize 属性的值设置为 true。 将 Text 属性的值设置为“姓”。

  8. 将一个 TextBox 控件从“工具箱”拖到第一行的第四个单元格中。 将 TextBox 控件的 Anchor 属性的值设置为 Left、Right。

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

创建“地址”字段

  1. 将一个 Label 控件从“工具箱”拖到第二行的第一个单元格中。

  2. 在“属性”窗口中，将 Label 控件的 Anchor 属性的值设置为 Right。 将 AutoSize 属性的值设置为 true。 将 Text 属性的值设置为“地址 1”。

  3. 将一个 TextBox 控件从“工具箱”拖到第二行的第二单元格中，位于 Label 控件旁边。

  4. 将 TextBox 控件的 Anchor 属性的值设置为 Left、Right。

  5. 将“ColumnSpan”属性的值设置为 3。 此属性由 TableLayoutPanel 控件提供。 有关所提供的属性的更多信息，请参见扩展程序提供程序概述。

  6. 对第三行重复步骤 1 到 5。 将 Label 控件的 Text 属性的值设置为“地址 2”。

  7. 将一个 Label 控件从“工具箱”拖到第四行的第一个单元格中。

  8. 将 Label 控件的 Anchor 属性的值设置为 Right。 将 AutoSize 属性的值设置为 true。 将 Text 属性的值设置为“城市”。

  9. 将一个 TextBox 控件从“工具箱”拖到第四行的第二单元格中，位于 Label 控件旁边。

  10. 将 TextBox 控件的 Anchor 属性的值设置为 Left、Right。

  11. 将一个 Label 控件从“工具箱”拖到第四行的第三个单元格中。

  12. 将 Label 控件的 Anchor 属性的值设置为 Right。 将 AutoSize 属性的值设置为 true。 将 Text 属性的值设置为“州/省”。

  13. 将一个 ComboBox 控件从“工具箱”拖到第四行的第四个单元格中。

  14. 将 ComboBox 控件的 Anchor 属性的值设置为 Left。 将 FormattingEnabled 属性的值设置为 true。

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

创建“电话号码”字段

  1. 将一个 Label 控件从“工具箱”拖到第五行的第一个单元格中。

  2. 在“属性”窗口中，将 Label 控件的 Anchor 属性的值设置为 Right。 将 AutoSize 属性的值设置为 true。 将 Text 属性的值设置为“工作电话”。

  3. 将一个 MaskedTextBox 控件从“工具箱”拖到第五行的第二个单元格中。

  4. 将 MaskedTextBox 控件的 Anchor 属性的值设置为 Left。

  5. 单击 MaskedTextBox 控件上的智能标记 (智能标记标志符号) 以打开 Mask 编辑器。

  6. 在“输入掩码”对话框中选择“电话号码”掩码。 单击“确定”。

  7. 对“家庭电话号码”字段重复步骤 1 到 5。 将 Text 属性的值设置为“家庭电话”。

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

创建“备注”字段

  1. 将一个 Label 控件从“工具箱”拖到第六行的第一个单元格中。

  2. 在“属性”窗口中，将 Label 控件的 Anchor 属性的值设置为 Top、Right。 将 AutoSize 属性的值设置为 true。 将 Text 属性的值设置为“备注”。

  3. 将一个 RichTextBox 控件从“工具箱”拖到第六行的第二个单元格中。

  4. 将“ColumnSpan”属性的值设置为 3。

  5. 将 RichTextBox 控件的 Dock 属性的值设置为 Fill。

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

设置布局网格

  1. 选择 TableLayoutPanel 控件并单击其智能标记标志符号 (智能标记标志符号)。 选择“编辑行和列”打开“列和行样式”对话框。 有关更多信息，请参见 如何：在 TableLayoutPanel 控件中编辑行和列。

  2. 从“显示”下拉框中选择“列”。

  3. 选择第一列和第三列并将 SizeType 属性的值更改为 AutoSize。

  4. 单击“确定”接受更改。

至此，可以运行应用程序以检查窗体的动态布局。

检查窗体的布局

  • 生成并运行该项目。 当窗体出现时，增大和缩小该窗体。

注意 注意

控件将按比例调整大小以填充可用空间。

注意，您可以创建实现动态布局的窗体，使窗体适于本地化。 有关更多信息，请参见演练：创建可根据本地化需要调整比例的布局。

posted @ 2012-07-30 17:39  方倍工作室  阅读(1107)  评论(0)  编辑  收藏  举报