Xamarin Forms vertically align labels of different font sizes to the same baseline

Question

I have two labels side by side in a horizontally oriented stack layout. The labels have different font sizes. I would like to make the baseline (bottom edge) of each label text the same regardless of the font size. However the default behaviour of xamarin forms is not to do that. The following code

    <StackLayout Orientation="Horizontal" >
            <Label  FontSize="12" Text="A Noble Spirit"></Label>
            <Label  FontSize="18" Text="Embiggens The Smallest Man"></Label>
    </StackLayout>

Results in the following view running on android.

I've tried many different combinations of setting the vertical text alignment and the vertical options attributes on the labels. The best I've been able to come up with (and what I think should work) is adding vertical options = end to them both. This improves things a bit but there's still a mismatch, so that the bigger label's text (embiggens) starts higher up than the smaller label - like so:

    <StackLayout Orientation="Horizontal" >
            <Label VerticalOptions="End" FontSize="12" Text="A Noble Spirit"></Label>
            <Label VerticalOptions="End" FontSize="18" Text="Embiggens The Smallest Man"></Label>
    </StackLayout>

As you can see, somewhat of an improvement, but still not aligned. This is driving me up the wall a bit. I'm starting to think it may be a bug in Xamarin Forms for android. (I'll add to this question later when I can get an example running on iOS to see if it's android specific.).

I CAN hack it to sort of work by adding top margin to the smaller label that is equal to the difference in font size, which is gross and I don't want to introduce that technical debt and upkeep into my system. But here it is to show it. Hoping not to have to resort to this...

    <StackLayout Orientation="Horizontal" >
            <Label FontSize="12" Margin="0,6,0,0" Text="A Noble Spirit"></Label>
            <Label FontSize="18" Text="Embiggens The Smallest Man"></Label>
    </StackLayout>

Lucas Zhang - MSFT Lucas Zhang - MSFT · Accepted Answer · 2019-11-18T13:41:20

Cause: If you set the background color of two labels ,you can see that because label has a default "Padding" . The value depends on its height .

Solution:

You can put two different strings in the same Label. It has the property called FormattedText ,which allows you to set the formatted text for the Label .

<StackLayout Orientation="Horizontal"  VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
        <Label FormattedText="{Binding FormattedTextContent}" x:Name="label" ></Label>
        <Label FormattedText="{Binding FormattedTextContent}" x:Name="label2" ></Label>
</StackLayout>

in code behind

FormattedTextContent = new FormattedString();
var fs = new FormattedString();
fs.Spans.Add(new Span { Text = "A Noble Spirit " , FontSize = 12, TextColor = Color.Black });
fs.Spans.Add(new Span { Text = "  ", FontSize = 18 });
label.FormattedText = fs;

var fs1 = new FormattedString();

fs.Spans.Add(new Span { Text = "  ", FontSize = 12 });
fs.Spans.Add(new Span { Text = "Embiggens The Smallest Man", TextColor = Color.Black, FontSize = 18 });
label2.FormattedText = fs1;

Of course you can use MVVM because it is a bindable property .

Xamarin Forms vertically align labels of different font sizes to the same baseline

1 Answers