WPF：对齐标签的基线及其文本框

Posted 2023-02-23

【中文标题】WPF：对齐标签的基线及其文本框

【英文标题】：WPF: Aligning the base line of a Label and its TextBox

【发布时间】：2011-03-03 15:03:23

【问题描述】：

假设我在标签旁边有一个简单的文本框：

<StackPanel>
    <StackPanel Orientation="Horizontal">
        <Label Margin="3">MyLabel</Label>
        <TextBox Margin="3" Width="100">MyText</TextBox>
    </StackPanel>
    ...
</StackPanel>

这会产生以下结果：

如您所见，MyLabel 和 MyText 的基线没有对齐，看起来很难看。当然，我可以开始玩弄边距，直到它们匹配，但由于这是一个如此普遍的要求，我确信 WPF 提供了一个更简单、更优雅的解决方案，我只是还没有找到......

【参考方案1】：

这个问题并不像看起来那么简单，而且接受的答案缺乏细节。如果您尝试使用控件自定义高度，您会发现问题。

首先，这是 User7116 回答的正确实现。

<StackPanel Orientation="Horizontal">
  <Label Margin="3" VerticalAlignment="Center">MyLabel</Label>
  <TextBox Margin="3" Width="100" VerticalAlignment="Center">MyText</TextBox>
</StackPanel> 

棘手的部分是这里有两个级别的垂直对齐，因此请了解对齐的工作原理。

当我们为控件指定对齐方式时，我们是在告诉它如何在 parent 容器中定位自身（参见documentation）。因此，当我们将 VerticalAlignment="Center"> 指定给 TextBox 时，我们告诉它这个 TextBox 应该在父 stackpanel 中垂直居中显示。

现在，TextBox 中的实际文本也可以使用垂直对齐方式within 该 TextBox！这是第 2 级，实际上非常棘手，并已回答 here。

如果您尝试将上方标签的高度也设置为 50，您会发现它们不会再次对齐。这是因为 Label 现在占用了更大的区域，并且该区域内的文本未垂直对齐，因此看起来不再对齐。

上面的代码是：

    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
        <Label Margin="3" VerticalAlignment="Center" Height="50">MyLabel</Label>
         <TextBox Margin="3" VerticalAlignment="Center" Width="50" Height="50">MyText</TextBox>
    </StackPanel>

幸运的是，当控件高度为默认值时（如标签控件），它的高度足以容纳文本，因此内部对齐无关紧要。但如果有人为这些控件设置自定义高度，它就会发挥作用，并且最好了解它是如何工作的。

【参考方案2】：

我知道这是一个旧答案，但对于那些寻求另一种方式的人来说，这是一个示例，您不需要依赖固定的文本框宽度：

使用 DockPanel 和 .Dock 代替 StackPanel。

这在 Grid 中使用时非常方便。

<DockPanel Grid.Column="2" Grid.Row="2">
     <Label Content="SomeTitle:" DockPanel.Dock="Left"></Label>
     <TextBox x:Name="SomeValueTextBox" VerticalAlignment="Center" DockPanel.Dock="Right"></TextBox>
</DockPanel>

【参考方案3】：

你怎么看？

<StackPanel Orientation="Horizontal">
        <Label Margin="3" VerticalContentAlignment="Center">MyLabel</Label>
        <TextBox Margin="3" VerticalContentAlignment="Center" Width="100">MyText</TextBox>
 </StackPanel>

【讨论】：

+1，看起来不错，谢谢。不过，我已经接受 Dan 的回答是正确的，因为他的解决方案将 TextBox 的框保持在“自然”高度而不是拉伸它。

【参考方案4】：

我在 Kaxaml 中实现了这种外观：

<StackPanel Orientation="Horizontal">
  <Label Margin="3" VerticalAlignment="Center">MyLabel</Label>
  <TextBox Margin="3" Width="100" VerticalAlignment="Center">MyText</TextBox>
</StackPanel>

【参考方案5】：

我认为，这种行为是由于TextBox 默认为Stretch 的垂直对齐方式造成的，这会导致它填充可用空间并在文本下方有额外的几个像素。如果你改用这个：

<StackPanel>
    <StackPanel Orientation="Horizontal">
        <Label >MyLabel</Label>
        <TextBox VerticalAlignment="Center" Width="100">MyText</TextBox>
    </StackPanel>
</StackPanel>

...您应该会看到更清晰的结果。