WPF：对齐Label的基线和TextBox

Question

假设我在Label旁边有一个简单的TextBox：

<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

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

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的中心。

现在，该TextBox中的实际文本也可以在该TextBox中使用 内的垂直对齐！这是第二级，实际上很棘手，得到了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>

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