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

Question

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

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

这会产生以下结果：

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

Answer 1

我认为，这种行为是由于

TextBox

默认为

Stretch

的垂直对齐方式造成的，这导致它填充可用空间并在文本下方有额外的几个像素。如果你用这个代替：

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

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

Answer 2

你觉得怎么样？

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

Answer 3

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

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

Answer 4

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

使用 DockPanel 和

.Dock

代替 StackPanel。

这在网格内使用时被证明非常方便。

<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>

Answer 5

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

首先，这是 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

中垂直居中显示。

现在该文本框内的实际文本也可以使用垂直对齐方式在该文本框内！这是第二级，实际上相当棘手，答案见here。

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

上面的代码是：

    <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>

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

Answer 6

以下是您可以执行此操作的方法：

     <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="2">
      <Label FontSize="20" Margin="3" FontWeight="Bold">Username :</Label>
      <TextBox Width="200" Margin="3" Height="40" Name="txtUsername" />
  </StackPanel>
  <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="2">
      <Label FontSize="20" Margin="3" FontWeight="Bold">Password :</Label>
      <TextBox Width="200" Margin="3" Height="40" Name="txtPasswrod" />
  </StackPanel>