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

此演练演示了如何创建当用户调整窗体大小时按比例调整的布局。 您将使用 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. Sql Server 删除所有表 脚本

    如果由于外键约束删除table失败,则先删除所有约束: --/第1步**********删除所有表的外键约束*************************/ DECLARE c1 cursor f ...

  2. stm32的APB1和APB2时钟

    要学会看官方例子,还要查找官方程序...

  3. LLRB——红黑树的现代实现

    一.本文内容 以一种简明易懂的方式介绍红黑树背后的逻辑实现2-3-4树,以及红黑树的插入.删除操作,重点在2-3-4树与红黑树的对应关系上,并理清红黑树相关操作的来龙去脉.抛弃以往复杂的实现,而分析红 ...

  4. AHB接口转APB

    AHB接口转APB 情景 有一个以AHB接口时序设计的IP,现在需将其移至APB总线上,即将使用APB接口时序驱动该IP. 基本思路 将APB的接口信号映射到AHB的接口信号 要点 APB挂接在AHB ...

  5. python 如何使用pip安装第三方软件

    1. 先将sripts加入系统的环境变量path中.如笔者的路径为: D:\Program Files\Python35\Scripts 2. 启动cmd,如安装request 过程十分简单,但是也容 ...

  6. Android 设置alpha值来制作透明与渐变效果的实例

    Android系统支持的颜色是由4个值组成的,前3个为RGB,也就是我们常说的三原色(红.绿.蓝),最后一个值是A,也就是Alpha.这4个值都在0~255之间.颜色值越小,表示该颜色越淡,颜色值越大 ...

  7. [NPM] Run a set of similar npm scripts with a wildcard

    In this lesson we will run a set of scripts that are grouped together with a wildcard using the npm- ...

  8. Jquery前端分页插件pagination使用

    插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...

  9. java三大框架实现任务调度——IRemindService

    java实现任务调度,主要分为几个步骤: 1.创建一个服务             2.创建一个任务类,将服务作为一个任务去完成(实现job接口)             3.创建一个任务类实体    ...

  10. [Typescript 2] Nullable Types - Avoiding null and undefined Bugs

    For example you have a TS app: enum PaylerPosition { Guard, Forward, Center } interface Player { nam ...