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

Question

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

    
        MyLabe         


        

Answer 1

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>

Answer 2

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.

Answer 3

What do you think?

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

Answer 4

This question is not as trivial as it looks and the accepted answers lacks details. If you try custom heights with the controls, you will see issues.

First, this is the correct implementation as answered by User7116.

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

The tricky part is that there two level of vertical alignments here so understand how the alignments works.

When we specify alignment for a control, we are telling it how to position itself in the parent container (See documentation). So when we specify VerticalAlignment="Center"> to the TextBox we are telling it that this TextBox should appear vertically centered in parent stackpanel.

Now the actual text inside that TextBox could also use vertical alignment within that TextBox! This is the 2nd level and actually quite tricky and is answered here.

If you experiment with setting the Label's height above to say 50 as well, you will see they will not align again. This is because Label is now taking larger area and its text inside that area is not vertical aligned so it doesn't look aligned again.

The code for above is:

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

Luckily when control height is default (like label control), it's just tall enough to contain the text so the inside alignment doesn't matter. But it comes into play if someone is setting custom heights for these controls and its better to understand how this works.

Answer 5

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>