演练:使用对齐线在 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 条目并将 All 属性设置为 0,可更改 Button 控件的 Margin 属性值。 有关详细信息,请参阅演练:使用 Padding、Margins 和 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+箭头键,以 1 个像素为增量调整 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 控件中的文本对齐。

另请参阅