layout - 如何在一个基线上对齐 TextBlock 和 TextBox 文本

Question

我正在尝试为一组带有标签的控件找出一个不错的布局。例如，如果我在文本框左侧有一个标签，则标签和文本框的基线不在同一垂直位置。通常的解决方法是将两个控件垂直居中，但如果您有多行文本框控件，这看起来不太好。

我有几个组合。

我希望相对面板能够提供对齐基线的选项，就像它与 android 相对布局面板一样。不幸的是它没有。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <RelativePanel>
    <TextBlock Text="Name:" Name="t1"></TextBlock>
    <TextBox Text="Content" RelativePanel.RightOf="t1" ></TextBox>
  </RelativePanel>
</Grid>

网格也无济于事。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Column="0" Text="{x:Bind Label}" Style="{ThemeResource BaseTextBlockStyle}"/>
    <TextBox Grid.Column="1" Text="Content" HorizontalAlignment="Stretch"></TextBox>
  </Grid>
</Grid>

显然，水平堆栈面板也没有魔法。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <StackPanel Orientation="Horizontal">
    <TextBlock Grid.Column="0" Text="{x:Bind Label}" Style="{ThemeResource BaseTextBlockStyle}"/>
    <TextBox Grid.Column="1" Text="Content" VerticalAlignment="Top"></TextBox>
  </StackPanel>
</Grid>

垂直堆栈面板可以避免这个问题，但我更喜欢控件左侧的标签。

  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel Orientation="Vertical">
      <TextBlock Grid.Column="0" Text="{x:Bind Label}" Style="{ThemeResource BaseTextBlockStyle}"/>
      <TextBox Grid.Column="1" Text="Content" ></TextBox>
    </StackPanel>
  </Grid>

您是否有任何想法如何对齐基线，这对于许多输入控件和标签来说是/或者可能是一个不错的布局想法？

Answer 1

我快速浏览了文档，我认为 UWP 中没有任何等同于 Android 基线对齐的内容。文本控件不会公开它们的基线位置供面板使用，因为它高度依赖于控件的模板(可以完全改变，不像在 Android 中， View 的视觉外观有点困难 -编码)。

无论如何，通过检查文本框的可视化树，我发现最里面的 TextBoxView(实际显示和处理 TextBox 控件的文本输入的控件)以与 TextBlock 相同的方式呈现文本(意味着填充等等)相同的)。所以只要我们可以将 TextBlock 的上边缘与 TextBoxView 对齐，那么两个控件的文本将处于相同的垂直位置。当然，两个控件的字体和字体大小需要相同(默认情况下)。

TextBoxView 被其父 ScrollContentPresenter 下推 3px(有效像素)，文本框边框下推 2px。所以你只需要为 TextBlock 添加 5px 的上边距，两个控件的文本就会对齐。



仅供引用，这是基于我正在使用的 SDK 版本 14393 提供的默认 TextBox 模板。 Microsoft 可以使用新的 SDK 版本更改这些样式。

查看 Android 文档，View 类有一个方法 getBaseline ;在 UWP 中，UIElement(或 FrameworkElement)没有这样的等价物。搜索可视化树并尝试确定您看到的第一个文本元素的基线可能不适用于所有情况(某些元素具有多个文本元素)。

如果你有很多这些左标签元素，一些建议:

在正确的位置创建一个带有标签和文本框的 UserControl。这样你就只能在代码的一个地方硬编码边距，如果你需要改变它，你只需要改变一段代码。

TextBox 控件(与许多其他控件一样)具有 Header 属性，您可以在其中指定将立即显示在文本框上方的文本。您可以更改模板，使标题位于文本框的左侧。

似乎推荐的方法是使用 Header 属性并将标签放在顶部。大多数 UWP 应用都这样做(在 Groove 中编辑歌曲信息、Edge 的设置面板等)。这可能是因为在移动设备上显示时，没有太多的水平空间。