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

此演练演示了如何创建当用户调整窗体大小时按比例调整的布局。 您将使用 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 属性的值设置为 LeftRight

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

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

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

创建“地址”字段

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

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

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

  4. 将 TextBox 控件的 Anchor 属性的值设置为 LeftRight

  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 属性的值设置为 LeftRight

  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 属性的值设置为 TopRight。 将 AutoSize 属性的值设置为 true。 将 Text 属性的值设置为“备注”。

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

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

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

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

设置布局网格

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

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

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

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

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

检查窗体的布局

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

 注意

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

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

创建可按比例调整的布局的 Windows 窗体的更多相关文章

  1. Revit API创建一个拷贝房间内对象布局命令

    本课程演示创建一个拷贝房间内对象布局命令,完整演示步骤和代码.这个命令把选中房间内的对象复制到其它选中的一个或多个房间中,而且保持与源房间一致的相对位置.通过本讲座使听众知道创建一个二次开发程序很简单 ...

  2. 【转载】Windows 10系统默认将画面显示比例调整至125%或150%,最高分辨率已经达到3840×2160(4K)这一级别。

    高分屏打开软件界面模糊?不会设置太浪费 2017-08-31 19:37 抹又重彩 现在有好多朋友都喜欢并买了高分屏笔记本电脑.高分屏笔记本就是配有高分辨率屏幕的笔记本.为了给用户带来更好的视觉体验, ...

  3. Windows窗体应用布局详解

    上回我们已经会用基本的控件创建Windows窗体应用,这才我们再来认识一些高级控件并使用ADO.NET技术连接数据库来创建功能更坚强大的窗体应用! 菜单栏控件MenuStrip .NET中提供了一个M ...

  4. 使用 Windows 窗体 TextBox 控件创建密码文本框

    密码框是一种 Windows 窗体文本框,它在用户键入字符串时显示占位符. 创建密码文本框 将 TextBox 控件的 PasswordChar 属性设置为某个特定字符. PasswordChar 属 ...

  5. PS网页设计教程XXX——在PS中创建一个漫画书主题网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  6. SharePoint Online 创建门户网站系列之首页布局

    前 言 SharePoint Online中创建首页布局,一般都是首先将美工提供的效果图,切图成为Html + Css + Script的形式,然后,将所有资源文件传到SharePoint Onlin ...

  7. Android:创建耐磨应用 - 定义自己的布局

    创建自己的自定义布局(Creating Custom Layouts) 本文介绍如何创建自己的自定义通知和使用可穿戴UI库来创建自己的自定义布局同时你还需要知道耐磨设计标准(Wear Design P ...

  8. js判断浏览器的类型,动态调整div布局

    最近写页面用bootstrap和amazeUi然后发现自己写的部分和两个框架做重合时,页面大小变化后有的元素变得很乱,很乱无奈只好用js判断 window.onscroll = function sc ...

  9. 拖动调整div布局大小

    一.需求 实现类似windows软件的那种,拖动调整两个div的大小 二.结果示例: 三.示例代码: https://github.com/CinYung/jQuery.divResizer.git

随机推荐

  1. iOS数据存储简要笔记

    1.  数据存储常用的方式 (1)XML 属性列表(plist)归档 (2)preference(偏好设置) (3)NSKeyedArchiver归档(NSCoding) (4)  SQLite3   ...

  2. bootstrap+fileinput插件实现可预览上传照片功能

    实际项目中运用: 功能:实现上传图片,更改上传图片,移除图片的功能 <!DOCTYPE html> <html> <head> <meta charset=& ...

  3. hadoop配置文件的加载机制 分类: A1_HADOOP 2015-01-21 11:29 839人阅读 评论(0) 收藏

    hadoop通过Configuration类来保存配置信息 1.通过Configuration.addResource()来加载配置文件 2.通过Configuration.get***()来获取配置 ...

  4. js获取图片的尺寸

    $("<img/>").attr("src", "http://www.example.com/images/bag001.jpg&quo ...

  5. (八)RabbitMQ消息队列-通过Topic主题模式分发消息

    原文:(八)RabbitMQ消息队列-通过Topic主题模式分发消息 前两章我们讲了RabbitMQ的direct模式和fanout模式,本章介绍topic主题模式的应用.如果对direct模式下通过 ...

  6. Java链接Redis时出现 “ERR Client sent AUTH, but no password is set” 异常的原因及解决办法

    Java链接Redis时出现 "ERR Client sent AUTH, but no password is set" 异常的原因及解决办法 [错误提示] redis.clie ...

  7. iOS开发:父子控制器简介:

    #import "ViewController.h" #import "ScoietyViewController.h" #import "HotVi ...

  8. 修改QList中的item(使用下标([index])才可以获得可修改的item的引用)

    QList算是最常用的集合了,今儿偶然间需要修改QList中的值,结果郁闷了.QList中提供了replace函数来替换item,但不是修改.而at().value()操作均返回的是const的ite ...

  9. jquery获取选中select的文本,值等

    jquery获取select选择的文本与值获取select :获取select 选中的 text :    $("#ddlregtype").find("option:s ...

  10. rabbitMQ服务安装

    1.rabbitMQ简介 1.1.rabbitMQ的优点(适用范围)1. 基于erlang语言开发具有高可用高并发的优点,适合集群服务器.2. 健壮.稳定.易用.跨平台.支持多种语言.文档齐全.3. ...