本文内容
- 创建项目
- 使用对齐线调整间距并对齐控件
- 与窗体和容器的边缘对齐
- 对齐一组控件
- 通过勾画控件轮廓来使用对齐线放置控件
- 在从工具箱中拖动控件时使用对齐线
- 使用对齐线调整控件大小
- 使标签与控件文本对齐
- 配合键盘导航来使用对齐线
- 对齐线和布局面板
- 禁用对齐线
- 后续步骤
对许多应用程序而言,在窗体上精确地放置控件是一项需要优先考虑的任务。 “Windows 窗体设计器”提供了很多用于完成此任务的工具。 在这些工具中,最重要的一个就是 SnapLine 功能。
对齐线为您精确地指示使控件相互对齐的位置。 它们还会根据 Windows 用户界面指南的规定,显示出建议在控件边缘之间留出的距离。
使用对齐线,您可以方便轻松地对齐控件,获得简洁、专业的外观和效果(视觉体验)。
本演练涉及以下任务:
-
创建 Windows 窗体项目
-
使用对齐线调整间距并对齐控件
-
与窗体和容器的边缘对齐
-
对齐一组控件
-
通过勾画控件轮廓来使用对齐线放置控件
-
在从工具箱中拖动控件时使用对齐线
-
使用对齐线调整控件大小
-
使标签与控件文本对齐
-
配合键盘导航来使用对齐线
-
对齐线和布局面板
-
禁用对齐线
完成上述任务之后,您将对对齐线所发挥的布局作用有所了解。
提示
显示的对话框和菜单命令可能会与“帮助”中的描述不同,具体取决于您现用的设置或版本。 若要更改设置,请在“工具”菜单上选择“导入和导出设置”。
1、创建项目
第一步是创建项目并设置窗体。
创建项目
-
创建一个名为“SnaplineExample”的基于 Windows 的应用程序项目。
-
在“窗体设计器”中选择窗体。
2、使用对齐线调整间距并对齐控件
对齐线为在窗体上对齐控件创造了一种准确而直观的方式。 当您在一个需要与一个(或一组)控件对齐的位置附近移动另一个(或一组)选定控件时,对齐线就会出现。 当您将选定控件移过其他控件时,选定控件就会“贴合”到建议的位置。
使用对齐线排列控件
-
从**“工具箱”**中将一个 Button 控件拖到窗体上。
-
将 Button 控件移动到窗体的右下角。 当 Button 控件接近窗体的底部和右边框时,请注意随之出现的对齐线。 这些对齐线会显示控件边框和窗体边框之间的推荐距离。
-
从**“工具箱”**中将另一个 Button 控件拖到窗体上。
-
移动第二个 Button 控件,使之差不多与第一个控件平齐。 请留意出现在两个按钮的文本基线处的对齐线,您会发现所移动的控件会贴合到与另一个控件完全平齐的位置。
-
移动第二个 Button 控件,使之位于第一个控件的正上方。 请留意出现在两个按钮左右两边的对齐线,您会发现所移动的控件会贴合到与另一个控件完全对齐的位置。
-
选择 Button 控件之一并将其移近另一个,直到两个控件几乎接触为止。 留意它们之间的对齐线。 此距离就是控件边框之间的推荐距离。 另外,还请注意您所移动的控件会按此位置对齐。
-
从**“工具箱”**中将两个 Panel 控件拖到窗体上。
-
移动一个 Panel 控件,使之差不多与第一个控件平齐。 请留意出现在两个控件上下两边的对齐线,您会发现所移动的控件会贴合到与另一个控件完全平齐的位置。
3、与窗体和容器的边缘对齐
对齐线会帮助您以统一的风格将控件与窗体和容器的边缘对齐。
将控件沿窗体和容器边缘对齐
提示
如果窗体的 Padding 属性设置为 0,0,0,0,则 Windows 窗体设计器将为窗体指定隐藏的 Padding 值 9,9,9,9。 为避免此行为,请指定一个 0,0,0,0 以外的值。
-
更改 Button 控件的 Margin 属性值,方法是在**“属性”**窗口中展开 Margin 项,将 All 属性设置为 0。
-
从**“工具箱”**中将一个 GroupBox 控件拖到窗体上。
-
更改 GroupBox 控件的 Padding 属性值,方法是在**“属性”**窗口中展开 Padding 项,将 All 属性设置为 10。
-
将 Button 控件朝靠近 GroupBox 控件右边框的方向移动,直到出现对齐线。 在 GroupBox 控件内移动 Button 控件,留意对齐线出现的位置。
4、对齐一组控件
使用对齐线,您可以对齐一组控件,以及 GroupBox 控件内部的控件。
对齐一组控件
-
从您的窗体上选择两个控件。 移动选定控件,同时留意在选定控件和其他控件之间出现的对齐线。
-
从**“工具箱”**中将一个 GroupBox 控件拖到窗体上。
-
选择一个 Button 控件,在 GroupBox 控件附近移动。 留意 GroupBox 控件边缘的对齐线。 同时留意位于 GroupBox 控件内部的 Button 控件边缘的对齐线。 容器控件的子控件也支持对齐线。
5、通过勾画控件轮廓来使用对齐线放置控件
当您第一次在窗体上放置控件时,对齐线会帮助您使控件对齐。
通过勾画控件轮廓来使用对齐线放置控件
-
在**“工具箱”**中单击 Button 控件图标。 不要将其拖到窗体上。
-
将鼠标指针移动到窗体的设计图面上方。 请留意附加了 Button 控件图标的鼠标会变为十字线。 还请注意建议 Button 控件的对齐位置的对齐线。
-
单击并按住鼠标按钮。
-
围绕窗体拖动鼠标指针。 此时会绘制出一条轮廓线,它指示控件的位置和大小。
-
拖动指针,使之与窗体上的另一个控件对齐。 此时会出现一条对齐线来指示对齐位置。
-
释放鼠标按钮。 系统会按照轮廓线指示的位置和大小创建控件。
6、在从工具箱中拖动控件时使用对齐线
当您从**“工具箱”**中将控件拖到窗体上时,对齐线会帮助您对齐控件。
在从工具箱中拖动控件时使用对齐线
-
从**“工具箱”**中将一个 Button 控件拖到窗体上,但不要释放鼠标按钮。
-
将鼠标指针移动到窗体的设计图面上方。 您会注意到指针会随即更改,以指示新的 Button 控件将在哪个位置创建。
-
围绕窗体拖动鼠标指针。 请留意建议 Button 控件的对齐位置的对齐线。 找到一个可以与其他控件对齐的位置。
-
释放鼠标按钮。 系统会按照对齐线指示的位置创建控件。
7、使用对齐线调整控件大小
对齐线会帮助您在调整控件大小的同时使控件对齐。
使用对齐线调整控件大小
-
从**“工具箱”**中将一个 Button 控件拖到窗体上。
-
调整 Button 控件的大小,方法是抓住某个角尺寸柄并拖动它。
-
拖动尺寸柄,使 Button 控件的某个边框与另一个控件对齐。 请留意此时出现的对齐线。 还请留意,尺寸柄会按照对齐线所提示的位置对齐。
-
沿不同的方向调整 Button 控件的大小,使尺寸柄与不同的控件对齐。 请注意,对齐线会在不同方向上的显示以指示对其位置。
8、使标签与控件文本对齐
某些控件会提供一条对齐线,以便其他控件与显示的文本对齐。
使标签与控件文本对齐
-
从**“工具箱”中将一个 TextBox 控件拖到窗体上。 当您将 TextBox 控件放到窗体上时,单击智能标记标志符号并选择“将文本设置为 textBox1”**选项。
-
从**“工具箱”**中将一个 Label 控件拖到窗体上。
-
将 Label 控件的 AutoSize 属性的值更改为 true。 请注意控件的边框会为了适应显示文本而进行相应的调整。
-
将 Label 控件移动到 TextBox 控件的左侧,使之与 TextBox 控件的底部边缘对齐。 留意两个控件底部边缘处的对齐线。
-
将 Label控件略微向上移动,使 Label文本与 TextBox 文本对齐。 您会发现,此时对齐线的样式有所不同,这表明正在将两个控件的文本字段对齐。
9、配合键盘导航来使用对齐线
对齐线会帮助您借助键盘的箭头键来对齐控件。
配合键盘导航来使用对齐线
-
从**“工具箱”**中将一个 Button 控件拖到窗体上。 将其置于窗体的左上角。
-
按 Ctrl+向下键。 注意,控件会沿窗体向下移动到第一个可用的水平对齐位置。
-
按 Ctrl+向下键,将控件移到窗体的底部。 注意,控件在沿窗体向下移动的过程中所占用的位置。
-
按 Ctrl+向右键。 注意,控件会沿窗体水平移动到第一个可用的垂直对齐位置。
-
按 Ctrl+向右键,将控件移到窗体的右侧。 注意,控件在沿窗体水平移动的过程中所占用的位置。
-
借助组合箭头键在窗体中移动控件。 请留意控件占用的位置以及伴随它们出现的对齐线。
-
按 Shift+任意箭头键,以一个像素为增量调整 Button 控件的大小。
-
按 Ctrl+Shift+任意箭头键,以对齐线为增量调整 Button 控件的大小。
10、对齐线和布局面板
在布局面板内,对齐线是禁用的。
选择性地禁用对齐线
-
从**“工具箱”**中将一个 TableLayoutPanel 控件拖到窗体上。
-
双击**“工具箱”**中的 Button 控件图标。 请注意,一个新的按钮控件会出现在 TableLayoutPanel 控件的第一个单元格中。
-
再次双击**“工具箱”**中的 Button 控件图标。 这样会在 TableLayoutPanel 控件中留下一个空单元格。
-
从**“工具箱”**中,将一个 Button 控件拖到 TableLayoutPanel 控件的空单元格中。 请注意此时不会出现对齐线。
-
将 Button 控件从 TableLayoutPanel 控件中拖动出来,然后在 TableLayoutPanel 控件周围移动它。 请注意此时会再次出现对齐线。
11、禁用对齐线
默认情况下,对齐线功能是打开的。 您可以选择性地禁用对齐线,也可以在设计环境中禁用它们。
选择性地禁用对齐线
-
按 Alt 键,同时在窗体上移动一个控件。
请注意此时不会出现对齐线,而且控件不会沿任何可能的对齐位置对齐。
在设计环境中禁用对齐线
-
从**“工具”菜单中,打开“选项”**对话框。 打开“Windows 窗体设计器”对话框。
-
选择**“常规”节点。 在“布局模式”区域中,将选项从“对齐线”改为“网格线对齐”**。
-
单击“确定”应用设置。
-
在窗体上选择一个控件,在其他控件周围移动它。 请注意此时不会出现对齐线。
后续步骤
对齐线为您在窗体上对齐控件提供了一种直观的方式。 建议研究的方面包括: