对齐、边距和填充

  • 项目

在 XAML 应用中，大部分用户界面 (UI) 元素继承自 FrameworkElement 类。 每个 FrameworkElement 都有尺寸、对齐、边距和填充属性，这些属性将影响布局行为。 以下指南概要介绍了如何使用这些布局属性，以确保应用的 UI 在任何上下文中均清晰可辨且易于使用。

尺寸（高度、宽度）

适当的大小调整将确保所有内容都清晰可辨。 用户应该不必进行滚动或缩放即可看清主要内容。

显示尺寸的图示

  • Height 和 Width 指定元素的大小。 默认值是数学意义上的 NaN（非数字）。 可以使用固定的值（以有效像素为单位测量），或者可以针对流行为使用 Auto 或成比例调整大小。

  • ActualHeight 和 ActualWidth 是只读属性，用于提供元素在运行时的大小。 如果流布局放大或缩小，则值会在 SizeChanged 事件中发生更改。 请注意，RenderTransform 不会更改 ActualHeight 和 ActualWidth 的值。

  • MinWidth/MaxWidth 和 MinHeight/MaxHeight 指定用于限定元素在流大小调整过程中的大小。

  • FontSize 和其他文本属性控制文本元素的布局大小。 尽管文本元素没有明确声明尺寸，但它们具有计算得到的 ActualWidth 和 ActualHeight。

对齐方式

通过对齐，可以让 UI 看起来整洁、有序和均衡，此外还可以建立视觉层次和关系。

显示对齐的图示

  • HorizontalAlignment 和 VerticalAlignment 指定应如何将一个元素放置在其父容器中。

    • HorizontalAlignment 的值是 Left、Center、Right 和 Stretch。
    • VerticalAlignment 的值是 Top、Center、Bottom 和 Stretch。

  • Stretch 是这两个属性的默认值，元素将填充父容器提供给它们的全部空间。 为 Height 和 Width 设定实际的数值之后，Stretch 值将被取消并改为充当 Center 值。 某些控件（如 Button）会在其默认样式中替换默认的 Stretch 值。

  • HorizontalContentAlignment 和 VerticalContentAlignment 指定如何将子元素放置在一个容器中。

  • 对齐方式可能会影响布局面板中的剪切。 例如，在使用 HorizontalAlignment="Left" 时，如果内容大于 ActualWidth，则会剪切元素的右侧。

  • 文本元素使用 TextAlignment 属性。 一般情况下，我们建议使用向左对齐（默认值）。 有关设置文本样式的详细信息，请参阅版式。

边距和填充

边距和填充属性可以防止 UI 看起来过于杂乱或稀疏，而且还可方便使用某些输入，例如手写笔和触摸。 下面是显示一个容器及其内容的边距和填充的图示。

xaml 边距和填充图示

Margin

Margin 控制元素周围的空白空间量。 对于点击测试和源输入事件，Margin 不会向 ActualHeight 和 ActualWidth 添加像素，也不会被视为元素的一部分。

  • Margin 值可以是统一的，也可以是不同的。 在使用 Margin="20" 时，将对元素的左侧、顶部、右侧和底部应用 20 像素的统一边距。 在使用 Margin="0,10,5,25" 时，将左侧、顶部、右侧和底部（按此顺序）分别应用不同的值。

  • 边距可累加。 如果两个元素都指定 10 像素的统一边距，而且它们在任何方向上均为相邻对等，则两个元素间的距离为 20 像素。

  • 允许负边距。 但是，使用负边距经常导致剪裁，或导致对等的过度绘制，所以使用负边距不是常见的技术。

  • Margin 值将在最后受到限制，由于容器可以剪裁或限制元素，因此在使用边距时要谨慎。 Margin 值可能会造成元素无法呈现；在应用边距后，元素的尺寸可以限制为 0。

填充

Padding 控制元素的内部边框与其子内容或子元素之间的空间量。 正 Padding 值会降低该元素的内容区域。

与 Margin 不同，Padding 不是 FrameworkElement 的属性。 有几个类定义了自己的 Padding 属性：

在每一种情况下，元素还具有 Margin 属性。 如果同时应用了 Margin 和 Padding，它们可以累加：外部容器和任何内部内容之间的明显距离将是边距加填充。

示例

让我们看一下 Margin 和 Padding 在真实控件上的效果。 下面介绍了 Grid 内的 TextBox，且 Margin 和 Padding 的默认值为 0。

边距和填充为 0 的文本框

下面介绍了 TextBox 和 Grid 与 TextBox 上的 Margin 和 Padding 值相同，如此 XAML 中所示。

<Grid BorderBrush="Blue" BorderThickness="4" Width="200">
    <TextBox Text="This is text in a TextBox." Margin="20" Padding="16,24"/>
</Grid>

边距和填充为正值的文本框

样式资源

你无需在控件上单独设置每个属性值。 通常更高效的做法是将属性值分组到 Style 资源，并将 Style 应用到控件。 当你需要将相同的属性值应用于许多控件时更是如此。 有关使用样式的详细信息，请参阅 XAML 样式。

一般建议

  • 仅将测量值应用于某些主要元素，并对其他元素使用流布局行为。 当窗口宽度发生更改，这将提供响应式 UI。

  • 如果你确实要使用测量值，则所有尺寸、边距和填充的增量都应为 4 epx。 XAML 使用有效像素和缩放，以 4 的倍数为单位缩放 UI 元素，使应用在所有设备和屏幕上清晰可辨。 通过使用以 4 为增量的值，可以对齐整个像素，从而获得最佳呈现。

  • 对于较小的窗口宽度（小于 640 像素），我们建议使用 12 epx 装订线，而对于较大的窗口宽度，我们建议使用 24 epx 装订线。

建议的装订线