WPF. How align two labels has different size on baseline in xaml

Question

I have problem with align two labels who has different size and are neighbors. I have to show variable as big size and units as small. But because of the different position of the font baseline, the texts are not located on the same line. Look at my xaml:

<StackPanel VerticalAlignment="Bottom" Orientation="Horizontal">
        <Label Content="5" FontSize="70" FontWeight="DemiBold" Foreground="White" Padding="0" Margin="0" BorderBrush="White" BorderThickness="1" />
        <Label Content="s" FontSize="14" Foreground="White" Padding="0" Margin="0" BorderBrush="White" BorderThickness="1" VerticalAlignment="Bottom" />
    </StackPanel>

I see solution of this problem: I can pick up margin or padding, but it is not good decision. In addition, I can not remove the upper gap of a larger text. May be exist more elegant way to deside this problem. Please, show me this, if somebody know, or tell, that is isn't possible, and I will pick up margin or padding. I was looking for a solution for a long time. The most similar here: WPF: Aligning the base line of a Label and its TextBox But my elements has different size and this way is bad for me.

Thanks for any help!

score 5 · Accepted Answer · answered Mar 27 '17 at 15:57

5

If you are not required to use Labels, you can achieve baseline alignment by using Runs inside a TextBlock.

<TextBlock VerticalAlignment="Bottom">
    <Run Text="5" FontSize="70" FontWeight="DemiBold" Foreground="White"  />
    <Run Text="s" FontSize="14" Foreground="White"  />
</TextBlock>

answered Mar 27 '17 at 15:57

filhit

2,084
1
21
34

Thank you very much, filhit! Your soltion helped me! – Julia Mar 29 '17 at 08:13

score 0 · Answer 2 · answered Mar 27 '17 at 15:15

You should use that margins:

<StackPanel VerticalAlignment="Bottom" Orientation="Horizontal">
                <Label Content="5" FontSize="70" FontWeight="DemiBold" Foreground="White" Padding="0" Margin="0" BorderBrush="White" BorderThickness="1" />
                <Label Content="s" FontSize="14" Foreground="White" Padding="0" Margin="0 0 0 12" BorderBrush="White" BorderThickness="1" VerticalAlignment="Bottom" />
            </StackPanel>

WPF. How align two labels has different size on baseline in xaml

2 Answers2