代码之家 › 专栏 › 技术社区 › Heinzi

对齐标签的基线和文本框

baseline alignment layout wpf

Heinzi · 技术社区 · 15 年前

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

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

如您所见,MyLabel和MyText的基线没有对齐,这看起来很难看。当然,我可以开始玩的利润率,直到他们匹配,但由于这是如此普遍的要求,我相信WPF提供了一个更容易和更优雅的解决方案,我只是还没有找到。。。

4 回复 | 直到 8 年前

Dan Puzey 15 年前

我认为,这种行为是由于 TextBox 默认为垂直对齐 Stretch

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

Heinzi 8 年前

你怎么认为?

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

user7116 15 年前

在Kaxaml中,我通过以下方式实现了这种外观:

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

Kristian 8 年前

我知道这是一个古老的答案,但对于那些寻求另一种方式的人来说,这里有一个例子,你不需要依赖固定的文本框宽度:

使用DockPanel和 .Dock .

这证明了在网格中使用时非常方便。

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

zar 5 年前

这个问题不像看上去那么琐碎,公认的答案缺乏细节。如果使用控件尝试自定义高度,您将看到问题。

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

棘手的部分是,这里有两个水平的垂直对齐,所以了解如何对齐工程。

当我们为控件指定对齐方式时,我们告诉它如何在 documentation ). 所以当我们指定 VerticalAlignment="Center"> 到 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>