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

此演练演示了如何创建当用户调整窗体大小时按比例调整的布局。 您将使用 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. stm32的ADC外设地址设置算法

    摘自:https://wenku.baidu.com/view/e3ce2a215901020207409c15.html### /////////////////////////////////// ...

  2. Chrome 临时目录

    mklink /J "C:\Users\%USERNAME%\AppData\Local\Google\Chrome\User Data\Default\Cache" " ...

  3. event.relatedTarget、event.fromElement、event.toElement

    在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target来访问,相关元素通过event.relatedTarget属性来访问.event.relatedTarg ...

  4. [Javascript] Create scrollable DOM elements with Greensock

    In this lesson, we will look at Greensock's Draggable API. We will implement a scrollable <div> ...

  5. [tmux] Handle history in tmux sessions

    In this lesson, we'll look at how to manage your history between tmux sessions, and ensure that your ...

  6. [Compose] 14. Build curried functions

    We see what it means to curry a function, then walk through several examples of curried functions an ...

  7. Django会话cookie&session

    任务描述:实现登录和退出 1.项目结构 2.源代码 urls.py from django.conf.urls import url from django.contrib import admin ...

  8. [Vue] Use Vue.js Watchers to Respond to Async Updates

    Use watchers to keep an eye on your data. Watchers are methods that are invoked when the specified a ...

  9. 【t055】成绩统计

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 华南师大附中月考二已经结束,级长想知道最高分是谁.但是现在级长很忙,没有时间统计成绩,于是他找到了你, ...

  10. 【hdu 2594】Simpsons’ Hidden Talents

    Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...