CODEWITHSUNDEEP
c#androidxaml
mbrc
mbrc

Reputation: 3963

What is the XAML equivalent of this Android XML

I want to convert Android Login to XAML but I have problem with button orientations. Now is vertical, but must be horizontal. Can someone give me good tip how to do it?

XAMl Code:

<?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>

Now looks so:

enter image description here

but must look so:

enter image description here

Upvotes: 0

Views: 2349

Answers (2)

asitis
asitis

Reputation: 3031

Use this XAML.But you need to modify some things like button images ..

<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>

Also please note that it is windows phone xaml & you need to change textblock to Entry and other small changes. But the layout is same.

Upvotes: 1

TheTanic
TheTanic

Reputation: 1638

You can put the last four Buttons in a StackPanel, and set the Orientation to Horizontal

Upvotes: 1

Related Questions