WPF: Aligning the base line of a Label and its Tex

问题:

Let's say I have a simple TextBox next to a Label:

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

This yields the following result:

As you can see, the base lines of MyLabel and MyText are not aligned, which looks ugly. Of course, I could start playing around with the margins until they match up, but since this is such a common requirement I'm sure that WPF provides a much easier and more elegant solution, which I just haven't found yet...

回答1:

This behaviour is, I think, caused by the fact that the TextBox defaults to a vertical alignment of Stretch, which causes it to fill the available space and have the extra couple of pixels under the text. If you use this instead:

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

... you should see a cleaner result.

回答2:

What do you think?

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

回答3:

I achieved that look in Kaxaml with:

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

回答4:

I know that this is an old answer, but for here's an example for those who seek another way, where you don't need to rely on a fixed textbox width:

Instead of StackPanel, use a DockPanel and .Dock.

This proves to be very handy when used inside a 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>