演练:使用捕捉线排列 Windows 表单上的控件

在窗体上精确地放置控件对于许多应用程序而言是高优先级。 Windows 窗体设计器提供了许多布局工具来完成此作。 最重要的一项功能是 SnapLine.

对齐线可准确显示将控件与其他控件对齐的位置。 它们还会向你显示控件之间的边距建议距离,如 Windows 用户界面指南所指定。

自动对齐线使控件易于对齐,以便获得清晰、专业的外观、行为、感观和体验。

创建项目

  1. 在 Visual Studio 中,创建一个名为“SnaplineExample”的基于 Windows 的应用程序项目。

  2. 在窗体设计器中选择窗体。

空格和对齐控件

对齐线提供了一种准确直观的方法来对齐窗体上的控件。 在将所选控件或控件移动到与另一个控件或控件集对齐的位置附近时,将显示它们。 将所选项目移动到其他控件时,它会自动“吸附”到建议的位置。

通过对齐线排列控件

  1. Button 控件从“工具箱”拖到窗体上

  2. Button 控件移动到窗体的右下角。 请注意,当Button控件靠近窗体的下边框和右边框时会出现的对齐线。 这些捕捉线显示控件边框与窗体边框之间的推荐距离。

  3. Button 控件移到窗体的边框周围,并记下对齐线的显示位置。 完成后,将 Button 控件移动到窗体中心附近。

  4. 将另一个 Button 控件从 工具箱 拖到你的窗体上。

  5. 将第二个Button控件移动,直到它几乎与第一个控件齐平。 请注意两个按钮文本基线中显示的对齐线,以及您正在移动的控件自动对齐到与另一个控件水平位置的情况。

  6. 移动第二 Button 个控件,直到它直接放置在第一个控件上方。 请注意两个按钮左边缘和右边缘出现的对齐线,并且注意,您正在移动的控件会自动对齐到与另一个控件完全一致的位置。

  7. 选择其中一个 Button 控件并将其移动到另一个控件附近,直到它们几乎触碰。 请注意它们之间的对齐线。 此距离是控件边框之间的建议距离。 另请注意,您移动的控件会自动对齐到该位置。

  8. 工具箱中的两个Panel控件拖到窗体上。

  9. 移动其中一个 Panel 控件,直到它与第一个控件接近平。 请注意沿着两个控件的上边缘和下边缘出现的对齐线,并注意您移动的控件可以与其他控件完全对齐的位置。

与表单和容器边距对齐

对齐线可帮助你以一致的方式将控件与窗体和容器边距对齐。

  1. 选择其中一个 Button 控件并将其移动到窗体的右边框附近,直到出现对齐线。 对齐线距右边框的距离是控件的 Margin 属性和窗体的 Padding 属性值的总和。

    注释

    如果窗体 Padding 的属性设置为 0,0,0,0,Windows 窗体设计器将为窗体的 Padding 设置一个阴影值 9,9,9,9。 若要覆盖此行为,请分配除 0,0,0,0 以外的值。

  2. 通过在“属性”窗口中展开Margin条目,将Button控件的Margin属性设置为All 0 来更改其值。 有关详细信息,请参阅 演练:使用填充、边距和 AutoSize 属性布局 Windows 窗体控件

  3. Button 控件靠近窗体的右边框,直到显示对齐线。 此距离现在由窗体 Padding 属性的值提供。

  4. GroupBox 控件从“工具箱”拖到窗体上

  5. 将控件GroupBoxPadding属性值更改为10,方法是在 属性窗口中展开 Padding 条目,并将 All 属性设置为 10。

  6. Button 控件从 工具箱 拖动到控件中 GroupBox

  7. Button 控件移动到靠近 GroupBox 控件的右边框处,直到出现对齐线。 将 Button 控件移动到 GroupBox 控件内,并记录对齐线的显示位置。

与分组控件对齐

可以使用对齐线对齐分组控件和控件内的 GroupBox 控件。

  1. 请在您的表单上选择两个控件。 移动所选内容并记下所选内容与其他控件之间的对齐线。

  2. GroupBox 控件从“工具箱”拖到窗体上

  3. Button 控件从 工具箱 拖动到控件中 GroupBox

  4. 选择其中一个 Button 控件,并将其移到 GroupBox 控件周围。 请注意显示在控件边缘的 GroupBox 对齐线。 请注意,出现在GroupBox控件中的Button控件边缘的对齐线。 作为容器控件的子级的控件也支持对齐线。

使用捕捉线来确定控件的位置和大小以放置控件。

  1. 工具箱中,单击 Button 控件图标。 不要将其拖到窗体上。

  2. 将鼠标指针移到窗体的设计图面上。 请注意,指针将更改为附加了控件图标的 Button 十字线。 另请注意显示为控件建议对齐位置的 Button 对齐线。

  3. 单击并按住鼠标按钮。

  4. 在窗体周围拖动鼠标指针。 请注意,一个轮廓已被绘制,用于指示控件的位置和大小。

  5. 拖动指针,直到它与窗体上的另一个控件对齐。 请注意,对齐线显示为指示对齐方式。

  6. 释放鼠标按钮。 控件在轮廓指示的位置和大小创建。

从工具箱拖动控件时使用对齐线

  1. Button控件从工具箱拖到窗体上,但不释放鼠标按钮。

  2. 将鼠标指针移到窗体的设计图面上。 请注意,指针将更改以指示将创建新 Button 控件的位置。

  3. 将鼠标指针拖动到窗体周围。 请注意出现的参考线,这些线建议 Button 控件的对齐位置。 查找与其他控件对齐的位置。

  4. 释放鼠标按钮。 控件在对齐线指示的位置被创建。

使用捕捉线更改控件尺寸

  1. Button 控件从“工具箱”拖到窗体上

  2. 通过抓住并拖动一个角落的大小控点来调整Button 控件的大小。 有关详细信息,请参阅 “如何:调整 Windows 窗体上的控件大小”。

  3. 拖动大小控点,直到一个控件的边框(Button)与另一个控件对齐。 请注意,将出现对齐线。 另请注意,调整大小控点对齐到对齐线所指示的位置。

  4. 调整Button控件的大小方向,并将调整控点与不同的控件对齐。 请注意对齐线如何以各种方向显示,以指示对齐方式。

将标签与控件的文本对齐

  1. TextBox 控件从“工具箱”拖到窗体上。 将控件拖放 TextBox 到窗体上时,单击智能标记标志符号,然后选择 “将文本设置为 textBox1 ”选项。 有关详细信息,请参阅 指南:使用设计器执行常见任务

  2. Label 控件从“工具箱”拖到窗体上

  3. Label 控件 AutoSize 属性的值更改为 true。 请注意,控件的边框经过调整以适应显示文本。

  4. Label 控件移动到控件的 TextBox 左侧,使其与控件的 TextBox 下边缘对齐。 请注意沿两个控件底部边缘显示的对齐线。

  5. Label 控件稍微向上移动,直到 Label 文本和 TextBox 文本对齐。 请注意显示的样式不同的对齐线,指示两个控件的文本字段何时对齐。

将对齐线与键盘导航配合使用

  1. Button 控件从“工具箱”拖到窗体上。 将其置于表单的左上角。

  2. Ctrl+向下键。 请注意,控件将窗体向下移动到第一个可用的水平对齐位置。

  3. Ctrl+向下键 ,直到控件到达窗体底部。 请注意它在向下移动表单时占据的各个位置。

  4. Ctrl+右箭头键。 请注意,控件元素将跨窗体移动到第一个可用的垂直对齐位置。

  5. Ctrl+右箭头键,直到控件到达窗体的一侧。 请注意它在窗体中移动时占据的位置。

  6. 使用箭头键组合在窗体周围移动控件。 请注意控件占用的位置以及随附的对齐线。

  7. Shift+箭头键 按一个像素的增量调整控件的大小 Button

  8. Ctrl+Shift+箭头键 以对齐线增量调整控件的大小 Button

有选择地禁用对齐线

  1. TableLayoutPanel 控件从“工具箱”拖到窗体上

  2. 双击Button工具箱中的控件图标。 请注意,新按钮控件显示在控件的第一个单元格中 TableLayoutPanel

  3. 双击Button工具箱中的控件图标两次。 这会在 TableLayoutPanel 控件中留出一个空单元格。

  4. Button 控件从 工具箱 拖动到控件的 TableLayoutPanel 空单元格中。 请注意,没有显示对齐线。

  5. Button 控件从 TableLayoutPanel 控件中拖出,并在 TableLayoutPanel 控件周围移动。 请注意,对齐线再次出现。

禁用对齐线

Alt 键,同时在窗体周围移动控件。

没有显示对齐线,控件不会对齐到任何潜在的对齐位置。

在设计环境中禁用对齐线

  1. “工具” 菜单中,打开“ 选项 ”对话框。 选择 Windows 窗体设计器

  2. 选择 “常规 ”节点。 在 “布局模式” 部分中,将所选内容从 SnapLines 更改为 SnapToGrid

  3. 选择“确定”以应用设置。

  4. 选择窗体上的控件,并将其移到其他控件周围。 请注意,不显示对齐线。

后续步骤

对齐线提供了一种直观的方式来对齐窗体上的控件。 有关更多探索的建议包括:

  • 尝试在另一个GroupBoxGroupBox控件中嵌套控件。 将控件 Button 置于子 GroupBox 控件中,将另一个控件置于父 GroupBox 控件中。 移动 Button 控件,观察对齐线如何跨越容器边界。

  • 创建控件列 TextBox 和相应的控件列 Label 。 将控件AutoSize的属性的值Label设置为 true。 使用对齐线移动 Label 控件,以便其显示的文本与控件中的 TextBox 文本对齐。

另请参阅