Label in Xamarin.Forms application does not align the text correctly on WinPhone

Question

In a litte Test Application I have the following ContentPage:

public class LoginPage:ContentPage
{
    public LoginPage()
    {
        Label l = Device.OnPlatform<Label>(
        new Label
        {
            HeightRequest = 150,
            XAlign = TextAlignment.Center,
            YAlign = TextAlignment.Center,
        },
        new Label
        {
            HeightRequest = 120,
            XAlign = TextAlignment.Center,
            YAlign = TextAlignment.Center,
        },
        new Label
        {
            HeightRequest = 500,
            XAlign = TextAlignment.Center,
            YAlign = TextAlignment.End,
        });
        l.Text = "App Login";
        l.FontSize = 30;

        StackLayout sl = new StackLayout()
        {
            BackgroundColor = Color.FromHex("559db7ec"),
            HorizontalOptions = LayoutOptions.Fill,
            VerticalOptions = LayoutOptions.Fill,
            Children = 
            {
                new StackLayout
                {
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.Center,
                    Children = 
                    {
                        l,
                        //new Label{ Text = "MaintMobile", FontSize = 30, HeightRequest = 120, XAlign = TextAlignment.Center, YAlign = TextAlignment.Center },
                        new Label{ Text = "Please login", FontSize = 15, HeightRequest = 90, XAlign = TextAlignment.Center, YAlign = TextAlignment.Center },
                        new Entry{ Placeholder = "Username", WidthRequest = 300 },
                        new Entry{ Placeholder = "Password", IsPassword =  true  },
                        new Button{ Text = "Login" }
                    }
                }
            }
        };

        Content = sl;
    }
}

This is the MainPage of the App. While this is doing fine on Android, the YAlign seems to be not working on WinPhone. All the time the Text of the Label is stuck to the top of the Device regardless of what i set it to align to.
Could this be a Bug, or am I doing something wrong?
This was tested on a Lumia 630 and 930

Answer 1

If it works on one platform and not the other I would say its a bug.

You are probably finding that the Label height isn't being considered in that layout setup on Windows and hence always looks like it is at the top but what is really happening is the label height isn't what you expect.

What I would recommend is setting the VerticalOptions to Start or Centered, rather than Text Alignment. The Label will expand as needed.

As another way to look at layouts, I normally recommend this approach for laying out something centered, like the login page. The Grid is the fastest to compute in terms of UI for Xamarin Forms.

<?xml version="1.0" encoding="utf-8" ?>
<local:BasePage xmlns="http://xamarin.com/schemas/2014/forms"
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          xmlns:local="clr-namespace:Mobile.View"
          x:Class="Mobile.View.LoginPage">
  <Grid>
    <Image Style="{StaticResource BackgroundImageStyle}" />
    <ContentView Style="{StaticResource OverlayStyle}" />
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="350" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <Image Source="Logo.png" Grid.Row="0" VerticalOptions="End" HorizontalOptions="Center" />
      <StackLayout Grid.Row="1" VerticalOptions="CenterAndExpand">
        <Entry StyleId="EmailEntry" Text="{Binding Model.Email}" Placeholder="Email (is demo)" />
        <Entry StyleId="PasswordEntry" Text="{Binding Model.Password}" IsPassword="True" Placeholder="Password (is demo)" />
        <Button Command="{Binding LoginCommand}" StyleId="LoginButton" Text="Login" IsEnabled="{Binding IsBusy, Converter={StaticResource NotConverter}}" />
      </StackLayout>
    </Grid>
  </Grid>
</local:BasePage>

Sorry its in XAML, I work with XAML for views, but you can see I use a Grid, with 3 rows and the top and bottom ones are *, while the middle has a defined height.

I normally recommend that type of layout for anything you want centered as StackLayouts or RelativeLayouts can be tricky. The calculations that go into rendering them also lead to bugs and poor UI performance.