Question

在litte测试应用程序中，我有以下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;
    }
}

这是应用程序的主页。虽然这在Android上运行良好，但YAlign似乎不适用于WinPhone。无论我将其设置为对齐，都始终将标签的文本粘贴到设备的顶部这可能是一个Bug，还是我做错了什么？这是在Lumia 630和930上测试的

Answer 1

如果它在一个平台而不是另一个平台上工作，我会说它是一个错误。

您可能发现在Windows上的布局设置中没有考虑标签高度，因此总是看起来它位于顶部，但实际发生的是标签高度不是您所期望的。

我建议将VerticalOptions设置为Start或Centered，而不是Text Alignment。标签将根据需要进行扩展。

作为查看布局的另一种方式，我通常建议使用此方法来布置居中的内容，例如登录页面。对于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>

很抱歉，在XAML中，我使用XAML查看视图，但是你可以看到我使用了一个Grid，有3行，顶部和底部是*，而中间有一个定义的高度。

我通常建议您将所需的任何内容布局为StackLayouts或RelativeLayouts，这可能很棘手。渲染它们的计算也会导致错误和不良的UI性能。

Xamarin.Forms应用程序中的标签未在WinPhone上正确对齐文本

1 个答案: