Vertical alignment of Label with FormattedString not centering

stevehurcombe commented 5 years ago

Description

Steps to Reproduce

This XAML produces the header as seen in shot 1. The word Brian is centered vertically and horizontally.

    <NavigationPage.TitleView>
        <StackLayout 
            Orientation="Horizontal" 
            VerticalOptions="CenterAndExpand" 
            HorizontalOptions="FillAndExpand">
            <Label 
                HorizontalTextAlignment="Center"
                VerticalOptions="Center" 
                VerticalTextAlignment="Center"
                HorizontalOptions="FillAndExpand"
                Margin="0,0,50,0"
                FontAttributes="Bold" FontSize="22" TextColor="Black" Text="Brian">
            </Label>

            <Button     
                BackgroundColor="Transparent"
                Text="&#xe147;" 
                WidthRequest="50"
                VerticalOptions="Center" 
                HorizontalOptions="End" 
                FontSize="28" 
                Clicked="Button_AddGoal">
                <Button.FontFamily>
                    <OnPlatform x:TypeArguments="x:String">
                        <On Platform="iOS">MaterialIcons-Regular</On>
                        <On Platform="Android">MaterialIcons-Regular.ttf#Material Icons</On>
                        <On Platform="UWP">Assets/MaterialIcons-Regular.ttf#Material Icons</On>
                    </OnPlatform>
                </Button.FontFamily>
            </Button>
        </StackLayout>
    </NavigationPage.TitleView>

However in this version, where I've added some FormattedString formatting, the vertical position is too low. See shot 2. The Acqua background is there to illustrate the size and position of the Label only:

    <NavigationPage.TitleView>
        <StackLayout 
            Orientation="Horizontal" 
            VerticalOptions="CenterAndExpand" 
            HorizontalOptions="FillAndExpand">
            <Label 
                BackgroundColor="Aqua"
                HorizontalTextAlignment="Center"
                VerticalOptions="Center" 
                VerticalTextAlignment="Center"
                HorizontalOptions="FillAndExpand"
                Margin="0,0,50,0">
                <Label.FormattedText>
                    <FormattedString >
                        <Span FontAttributes="Bold" FontSize="22" TextColor="Black" Text="Brian"/>
                        <Span FontAttributes="Bold" FontSize="40" TextColor="#6200EE" Text="."/>
                    </FormattedString>
                </Label.FormattedText>
            </Label>

            <Button     
                BackgroundColor="Transparent"
                Text="&#xe147;" 
                WidthRequest="50"
                VerticalOptions="Center" 
                HorizontalOptions="End" 
                FontSize="28" 
                Clicked="Button_AddGoal">
                <Button.FontFamily>
                    <OnPlatform x:TypeArguments="x:String">
                        <On Platform="iOS">MaterialIcons-Regular</On>
                        <On Platform="Android">MaterialIcons-Regular.ttf#Material Icons</On>
                        <On Platform="UWP">Assets/MaterialIcons-Regular.ttf#Material Icons</On>
                    </OnPlatform>
                </Button.FontFamily>
            </Button>
        </StackLayout>
    </NavigationPage.TitleView>

Expected Behavior

The text should be vertically centered.

Actual Behavior

The label appears to be at the end instead.

Basic Information

Version with issue: 3.4.0.925479-pre1
Last known good version: N/A
IDE: Visual Studio 2017 15.8.8
Android: 8.1

stevehurcombe commented 5 years ago

screenshot 1 screenshot 2

pauldipietro commented 5 years ago

Checked against 3.4 and does appear to behave as described.

adrianknight89 commented 5 years ago

I was just going to submit this issue... Looks like using different font sizes messes things up. There should be properties to vertically/horizontally align span text within its own region.

YuriyDurov commented 4 years ago

Just bumped into this issue. Vertical align to start (to top) also does not work, not just center. It only aligns to the bottom - no matter which vertical text alignment option you choose.