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

score 10 · Accepted Answer · answered Mar 16 '18 at 14:57

10

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}"/>

answered Mar 16 '18 at 14:57

Csharpest

1,258
14
32

1

Both *VerticalTextAlignment="Center"* and *VerticalAlignment="Center"* do not change anything – DirtyNative Mar 16 '18 at 14:59
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 – Csharpest Mar 16 '18 at 15:02
Sure, multiple times before posting the question – DirtyNative Mar 16 '18 at 15:06
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 – DirtyNative Mar 16 '18 at 15:08
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. – Csharpest Mar 16 '18 at 15:32
1

This is not an image, it is a Font called FontAwesome – DirtyNative Mar 16 '18 at 15:59
alright, didnt know about that one, it doesnt seem awesome enough to layout properly :P – Csharpest Mar 16 '18 at 17:47
Running as a UWP-App the Labels content is centered as expected – DirtyNative Mar 19 '18 at 07:42
Glad to hear, so on which platforms does it not work on? – Csharpest Mar 19 '18 at 08:26
Both MacOS and iOS – DirtyNative Mar 21 '18 at 07:35
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 – Csharpest Mar 21 '18 at 07:56
Good^^ just make sure its consistent over different devices, it might break in another way if you're unlucky :P – Csharpest Mar 22 '18 at 09:07

Xamarin.Forms - Label not centered

Edit 1

Edit 2

1 Answers1