37

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

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

这会产生以下结果：

结果

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

4

5 回答 5

40

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

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

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

于 2010-06-14T17:20:57.560 回答
25

你怎么看？

替代文字

<StackPanel Orientation="Horizontal">
        <Label Margin="3" VerticalContentAlignment="Center">MyLabel</Label>
        <TextBox Margin="3" VerticalContentAlignment="Center" Width="100">MyText</TextBox>
 </StackPanel>
于 2010-06-14T17:19:46.343 回答
5

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

<StackPanel Orientation="Horizontal">
  <Label Margin="3" VerticalAlignment="Center">MyLabel</Label>
  <TextBox Margin="3" Width="100" VerticalAlignment="Center">MyText</TextBox>
</StackPanel>
于 2010-06-14T17:21:51.093 回答
4

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

代替 StackPanel，使用 DockPanel 和.Dock.

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

结果

于 2018-01-31T14:31:19.787 回答
1

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

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

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

棘手的部分是这里有两级垂直对齐，所以要了解对齐是如何工作的。

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

现在该 TextBox 内的实际文本也可以在该 TextBox内使用垂直对齐！这是第 2 级，实际上非常棘手，在这里得到了回答。

如果您尝试将上方标签的高度也设置为 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>

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

于 2020-06-17T21:18:31.910 回答