通过

对齐、边距、填充

在 XAML 应用中，大多数用户界面 （UI） 元素继承自 FrameworkElement 类。 每个 FrameworkElement 都有影响布局行为的维度、对齐、边距和填充属性。 以下指南概述了如何使用这些布局属性来确保应用的 UI 在任何上下文中清晰易用。

尺寸（高度、宽度）

正确调整大小可确保所有内容清晰易读。 用户无需滚动或缩放即可解密主要内容。

显示尺寸的图

  • 高度 和 宽度 指定元素的大小。 默认值在数学上 NaN （不是数字）。 可以设置 以有效像素为单位的固定值，也可以使用 “自动 ”或 “比例大小 调整”来处理流体行为。

  • 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 是属性的默认值，元素填充父容器中提供的所有空间。 实数高度和宽度取消拉伸值，它将改为充当中心值。 某些控件（例如 Button）在默认样式中会覆盖默认的 Stretch 值。

  • HorizontalContentAlignment 和 VerticalContentAlignment 指定子元素在容器中的位置方式。

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

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

边距和填充

边距和填充属性可以防止 UI 显得过于混乱或太稀疏，并且它们还可以更方便地使用某些输入设备（如笔和触控）。 下面是显示容器及其内容的边距和填充的插图。

xaml 边距和填充图

页边距

边距 控制元素周围的空空间量。 Margin 不会向 ActualHeight 和 ActualWidth 添加像素，并且不被视为用于命中测试和溯源输入事件的元素的一部分。

  • 边距值可以是统一的或不同的。 通过Margin="20"，元素的上下左右四个方向会应用统一的 20 像素边距。 使用 Margin="0,10,5,25"时，这些值将应用于左、上、右和下（按此顺序）。
  • 边距是累加的。 如果两个元素都指定一个统一的边距为 10 像素，并且是任何方向的相邻对等方，则它们之间的距离为 20 像素。
  • 允许负边距。 但是，使用负边距通常会导致剪裁或过度绘制相关对象，因此负边距通常不常用。
  • 边距值是最后被约束的，因此在使用边距时要小心，因为容器可能会裁剪或限制元素。 Margin 值可能是元素未出现呈现的原因;应用 Margin 后，元素的维度可以限制为 0。

填充

填充 控制元素的内部边框与其子内容或元素之间的空间量。 正的内边距值会减少元素的内容区域。

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

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

Example

让我们看看 Margin 和 Padding 对实际控件的影响。 下面是网格内的 TextBox，默认边距和填充值为 0。

边距和填充均为 0 的 TextBox

下面是与 TextBox 上的边距和填充值相同的 TextBox 和网格，如此 XAML 中所示。

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

具有正边距和填充值的 TextBox

样式资源

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

一般建议

  • 仅将度量值应用于某些关键元素，并为其他元素使用流畅布局行为。 这为窗口宽度更改时提供 响应式 UI 。
  • 如果使用度量值， 则所有维度、边距和填充应以 4 epx 为增量。 当 XAML 使用 有效像素和缩放 使应用在所有设备和屏幕大小上都清晰可见时，它将 UI 元素缩放为 4 的倍数。 使用以 4 为增量的值可对齐整个像素，从而获得最佳渲染效果。
  • 对于小窗口宽度（小于 640 像素），我们建议使用 12 个 epx 装订线，对于较大的窗口宽度，建议使用 24 个 epx 装订线。

建议的排水沟

  • Last updated on