how to properly scale entrys and button to phones in xamarin forms

Question

I have a problem that my entrys and buttons are being cut off in Xamarin forms cross platform android and ios and was wondering how to properly code them to scale correctly. code below

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         x:Class="Kula.MainPage"
       >
<Grid Padding="0" ColumnSpacing="0" RowSpacing="0" >
    <Grid.RowDefinitions>            
        <RowDefinition Height=".30*"/>
        <RowDefinition Height=".15*"/>
        <RowDefinition Height=".40*"/>
        <RowDefinition Height=".15*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="0">
        <Frame HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Padding="10"      BackgroundColor="#82D5FF" CornerRadius="10">
            <Label
             Text=" Kula " 
             FontSize="65"
             TextColor="White"
             HorizontalOptions="Center"
             VerticalOptions="CenterAndExpand"



        />

        </Frame>

    </StackLayout>
    <BoxView
      BackgroundColor="white" Grid.Column="0" Grid.Row="1"           
        />
    <AbsoluteLayout BackgroundColor="White" Grid.Column="0" Grid.Row="2">
        <Frame Padding="10"
               BackgroundColor="#82D5FF" 
               HasShadow="False"
               CornerRadius="10"
               AbsoluteLayout.LayoutBounds=".5,.5,.75,.73" 
               AbsoluteLayout.LayoutFlags="All">
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height=".26*"/>
                    <RowDefinition Height=".26*"/>
                    <RowDefinition Height=".26*"/>
                    <RowDefinition Height=".22*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <Entry Grid.Row="0" Grid.Column="0" x:Name="Rusername" Placeholder="Username" FontSize="Medium" PlaceholderColor="#606060" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" />
                <Entry Grid.Row="1" Grid.Column="0" x:Name="Remail" Placeholder="Email" FontSize="Medium" PlaceholderColor="#606060" HorizontalOptions="FillAndExpand"  VerticalOptions="CenterAndExpand"/>
                <Entry Grid.Row="2" Grid.Column="0" x:Name="Rpassword" IsPassword="True" FontSize="Medium" Placeholder="Password" PlaceholderColor="#606060" HorizontalOptions="FillAndExpand"  VerticalOptions="CenterAndExpand"/>
                <Grid Grid.Row="3" Grid.Column="0" ColumnSpacing="0" RowSpacing="0" VerticalOptions="FillAndExpand" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="1*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width=".5*"/>
                        <ColumnDefinition Width=".5*"/>
                    </Grid.ColumnDefinitions>
                    <Button x:Name="GTLogin" 
                            BorderRadius="0" 
                            BorderWidth="0"
                            BorderColor="#FFF80D"
                            Grid.Row="0" 
                            Grid.Column="0" 
                            Text="Go To Login" 
                            BackgroundColor="#E4FF00" 
                            Clicked="GTLogin_Clicked"


                    />
                    <Button x:Name="registerUser" 
                            BorderRadius="0" 
                            BorderWidth="0"
                            BorderColor="#C0C0C0" 
                            Grid.Row="0"
                            Grid.Column="1" 
                            Text="Register"
                            BackgroundColor="#FF1000" 
                            Clicked="registerUser_Clicked"

                   />
                </Grid>
            </Grid>
        </Frame>
    </AbsoluteLayout>
    <BoxView
      BackgroundColor="White" Grid.Column="0" Grid.Row="3"           
        />
</Grid>
</ContentPage>

I thought by using grid percentages it would correctly scale the entrys and buttons but it did I will attach views from designer and emulator. Any help would be much appreciated.designer emulator

Lucas Zhang Lucas Zhang · Accepted Answer · 2019-11-17T02:12:35

You can improve the code as following

<StackLayout BackgroundColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" Grid.Column="0" Grid.Row="2">
     <Frame Padding="10" Margin="40,0,40,0" BackgroundColor="#82D5FF"  HasShadow="False" CornerRadius="10">

      //...
     </Frame>
</StackLayout>

how to properly scale entrys and button to phones in xamarin forms

1 Answers