How can I make elements arranged in a horizontal StackPanel share a common baseline for their text content?

Question

Here's a trivial example of the problem I'm having:

<StackPanel Orientation="Horizontal">
    <Label>Foo</Label>
    <TextBox>Bar</TextBox>
    <ComboBox>
        <TextBlock>Baz</TextBlock>
        <TextBlock>Bat</TextBlock>
    </ComboBox>
    <TextBlock>Plugh</TextBlock>
    <TextBlock VerticalAlignment="Bottom">XYZZY</TextBlock>
</StackPanel>

Every one of those elements except the TextBox and ComboBox vertically position the text they contain differently, and it looks plain ugly.

I can line the text in these elements up by specifying a Margin for each. That works, except that the margin is in pixels, and not relative to the resolution of the display or the font size or any of the other things that are going to be variable.

I'm not even sure how I'd calculate the correct bottom margin for a control at runtime.

What's the best way to do this?

Answer 1

This is tricky as ComboBox and TextBlock have different internal margins. In such circumstances, I always left everything to have VerticalAlignment as Center that does not look very great but yes quite acceptable.

Alternative is you create your own CustomControl derived from ComboBox and initialize its margin in constructor and reuse it everywhere.