Xamarin.Forms - Label not centered

Question

I've got a StackView which contains 2 Labels. One is normal text, and the other one is a FontAwesome Icon.

Anyhow both Labels are not centered vertically inside the StackView. Here is the Code for them:

The Styles:

        <Style x:Key="FAIconedLabel" TargetType="Label">
            <Setter Property="TextColor" Value="White"/>
            <Setter Property="FontSize" Value="40" />
            <Setter Property="Margin" Value="0" />
        </Style>

        <Style x:Key="EmailLabel" TargetType="Label">
            <Setter Property="TextColor" Value="White"/>
            <Setter Property="FontSize" Value="20" />
        </Style>

And the Views itself

        <!-- Top Right -->
        <Grid BackgroundColor="{StaticResource LamaControlGray}"
              RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
                Property=Width,Factor=1,Constant=-400}"
              RelativeLayout.WidthConstraint="{ConstraintExpression
                Type=RelativeToParent,Property=Width,Factor=0,Constant=400}"
              RelativeLayout.HeightConstraint="{ConstraintExpression
                Type=RelativeToParent,Property=Height,Factor=0,Constant=40}" >
            <StackLayout Orientation="Horizontal" HorizontalOptions="End" VerticalOptions="FillAndExpand" BackgroundColor="Red">
                <Label x:Name="LblUserEmail" Margin="0,0,10,0" Text="{Binding UserEmail}" VerticalOptions="FillAndExpand" Style="{StaticResource EmailLabel}"/>
                <fal:FontAwesomeLabel Text="{Binding SettingsIcon}" BackgroundColor="Green" VerticalOptions="CenterAndExpand" Style="{StaticResource FAIconedLabel}" />
            </StackLayout>
        </Grid>

Do I miss something here?

Edit 1

I added a BackgroundColor to see, if the Label actually fills the StackView

Edit 2

After cleaning and rebuilding the solution, the email Label is centered now. But the Iconed one still remains at the bottom

Evincive

Answer 1

Yes you are missing something. You're not setting it to be centered vertically.

Either

<Label x:Name="LblUserEmail" Margin="0,0,10,0" Text="{Binding UserEmail}" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" Style="{StaticResource EmailLabel}"/>

or

<Label x:Name="LblUserEmail" Margin="0,0,10,0" Text="{Binding UserEmail}" VerticalOptions="CenterAndExpand" Style="{StaticResource EmailLabel}"/>

Altheaalthee

Both VerticalTextAlignment="Center" and VerticalAlignment="Center" do not change anything – Evincive

Give a background color to the label and see if it actually fills the stacklayout height and determine if it might be centered but not in the way you expected it to be – Altheaalthee

Sure, multiple times before posting the question – Evincive

I did now a Clean and Rebuild, and suddenly the Label containing the Email is centered... Strange... But the Iconed Label still does not want to be – Evincive

I guess this has to do with this fancy class. you should post the code of that one to be able to determine the cause. But for now, try changing the font size, look if the source file of the image has some padding that leads to the space. I dont understand why this label displays and image (seems missleading) and additionally has a text property, but doesnt display any text. – Altheaalthee

This is not an image, it is a Font called FontAwesome – Evincive

alright, didnt know about that one, it doesnt seem awesome enough to layout properly :P – Altheaalthee

Running as a UWP-App the Labels content is centered as expected – Evincive

Glad to hear, so on which platforms does it not work on? – Altheaalthee

Both MacOS and iOS – Evincive

I haven't found out an answer, you might have to try creating a custom renderer for labels and play around with the native text-alignments, or even add a margin/padding to it for iOS. But that sounds dirty – Altheaalthee

Good^^ just make sure its consistent over different devices, it might break in another way if you're unlucky :P – Altheaalthee