演示:使用捕捉线排列 Windows 窗体上的控件

窗体上控件的精确排列对于许多应用程序而言至关重要。 Windows 窗体设计器提供了许多布局工具来完成此操作。 最重要的一项是 SnapLine 功能。

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

辅助对齐线使控件易于对齐,以获得清晰、专业的外观和整体表现(包括视觉和使用体验)。

创建项目

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

  2. 在 Forms Designer 中选择窗体。

间距和对齐控件

自动对齐线为您提供了一种准确而直观的方式来对齐表单上的控件。 在将所选控件或控件移动到与另一个控件或控件集对齐的位置附近时,将显示它们。 当你将所选内容移过其他控件时,它会自动吸附到建议的位置。

使用对齐线来排列控件

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

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

  3. Button 控件移动到窗体边框附近,并记下捕捉线出现的位置。 完成后,将 Button 控件移动到窗体中心附近。

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

  5. 调整第二个 Button 控件,直到它与第一个 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 项并将 All 属性设置为 0,更改 Button 控件 Margin 属性的值。 有关详细信息,请参阅 演练:使用填充、边距和 AutoSize 属性布局 Windows 窗体控件。

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

  4. GroupBox 控件从 工具箱 拖放到窗体上。

  5. 通过在 属性 窗口中展开 Padding 项并将 All 属性设置为 10,更改 GroupBox 控件 Padding 属性的值。

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

  7. Button 控件靠近 GroupBox 控件的右边框,直到显示对齐线。 在 GroupBox 控件中移动 Button 控件,并记下捕捉线的显示位置。

与分组控件对齐

可以使用自动对齐线对齐分组控件以及 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. 选择窗体上的控件,并将其移到其他控件周围。 请注意,不显示对齐线。

后续步骤

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

  • 尝试在另一个 GroupBox 控件中嵌套 GroupBox 控件。 将 Button 控件置于子 GroupBox 控件中,将另一个控件置于父 GroupBox 控件中。 移动 Button 控件,查看吸附线如何跨越容器边界。

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

另请参阅