2016-01-11 33 views
0

我想將Android登錄轉換爲XAML,但是我有按鈕方向的問題。現在是垂直的,但必須是水平的。有人能給我很好的提示如何做到這一點?什麼是這個Android XML的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> 

現在看起來如此:

enter image description here

但必須看起來如此:

enter image description here

回答

1

使用此XAML.But您需要修改一些東西像按鈕圖像..

<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和其他小的變化。但佈局是一樣的。

+0

Thx給每個Button一個填充值,但Xamarin.Forms中不存在BorderBrush。現在也是TextWrapping。 – mbrc

+1

刪除BorderBrush和TextWrapping屬性 – asitis

+1

謝謝。奇蹟般有效! – mbrc

1

你可以把在最後四個按鈕StackPanel,一個d將方向設置爲水平

+0

或者把它放在網格 – senzacionale

+0

什麼比較好。如何在xaml中進行填充? – mbrc

+0

您可以通過添加Padding =「」 – TheTanic

相關問題