什么是此Android XML的XAML等效项

Question

我想将Android登录转换为XAML，但我的按钮方向有问题。现在是垂直的，但必须是水平的。有人能给我一些好的提示怎么做？

XAMl代码：

<?xml version="1.0" encoding="UTF-8"?>
<local:LoginPageXaml xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="Shared.LoginPage"
    BackgroundColor="{StaticResource grayLight}"
    xmlns:local="clr-namespace:Shared;assembly=Shared">
    <local:LoginPageXaml.Content>
            <StackLayout VerticalOptions="Center" Padding="30">
                <Grid HorizontalOptions="Center">
                    <Image Source="logo" Grid.Row="0" Grid.Column="0" />
                    <Button x:Name="forgetPasswordButton" Text="Forget Password" Grid.Row="0" Grid.Column="1" />
                    <Button x:Name="registerButton" Text="Register" Grid.Row="0" Grid.Column="1" />
                </Grid>
                <Entry StyleId="UserId" Text="{Binding Path=Username}" Placeholder="Username" />
                <Entry StyleId="PasswordId" Text="{Binding Path=Password}" Placeholder="Password" IsPassword="true" />

                <Button x:Name="loginButton" 
                    StyleId="loginButton"
                    Grid.Row="5" 
                    BackgroundColor="#F44336" 
                    BorderRadius="0" 
                    TextColor="White" 
                    Text="Login to Us"
                    Command="{Binding LoginCommand}" />

                <Button x:Name="loginButtonTwitter" 
                    StyleId="loginButtonTwitter"
                    Grid.Row="5" 
                    BackgroundColor="#F44336" 
                    BorderRadius="0" 
                    TextColor="White" 
                    Text="Twitter"
                    Image="icon_twitter.png"
                    Command="{Binding LoginCommandTwitter}" />

                <Button x:Name="loginButtonFacebook" 
                    StyleId="loginButtonFacebook"
                    Grid.Row="5" 
                    BackgroundColor="#F44336" 
                    BorderRadius="0" 
                    TextColor="White" 
                    Text="Facebook"
                    Image="icon_facebook.png"
                    Command="{Binding loginButtonFacebook}" />

                <Button x:Name="loginButtonGoogle" 
                    StyleId="loginButtonGoogle"
                    Grid.Row="5" 
                    BackgroundColor="#F44336" 
                    BorderRadius="0" 
                    TextColor="White" 
                    Text="Google"
                    Image="icon_google.png"
                    Command="{Binding loginButtonGoogle}" />

                <Button x:Name="loginButtonGooglePlus" 
                    StyleId="loginButtonGooglePlus"
                    Grid.Row="5" 
                    BackgroundColor="#F44336" 
                    BorderRadius="0" 
                    TextColor="White" 
                    Text="GooglePlus"
                    Image="icon_google_plus.png"
                    Command="{Binding loginButtonGooglePlus}" />
            </StackLayout>
    </local:LoginPageXaml.Content>
</local:LoginPageXaml>

现在看起来如此：

但必须如此：

Answer 1

您可以将最后四个按钮放在StackPanel中，并将方向设置为水平

Answer 2

使用此XAML。但您需要修改一些内容，例如按钮图像..

<Grid x:Name="LayoutRoot" Background="#FF213A5F">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.RowSpan="2" Margin="24,0" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" Text="Sample application" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="26.667" Foreground="Black"/>
            <TextBox Height="72" TextWrapping="Wrap" Text="TextBox"/>
            <TextBox Height="72" TextWrapping="Wrap" Text="TextBox"/>
            <Button Content="Login" Background="#FF00D88A" BorderBrush="#FF00D88A"/>
            <Grid Height="83">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button Content="f" Background="#FF0081B2" BorderBrush="#FF0081B2"/>
                <Button Content="g+" Grid.Column="1" BorderBrush="#FF0081B2" Background="#FF0081B2"/>
                <Button Content="w" Grid.Column="2" Background="#FF0081B2" BorderBrush="#FF0081B2"/>
                <Button Content="o" Grid.Column="3" BorderBrush="#FF0081B2" Background="#FF0081B2"/>
            </Grid>
            <HyperlinkButton Content="Don't have account"/>
        </StackPanel>
</Grid>

另请注意，它是windows phone xaml＆amp;您需要将文本块更改为Entry和其他小更改。但布局是一样的。