Search code examples
wpflayoutalignmentbaseline

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


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:

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


Solution

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