Forum Xamarin.Forms

Grid rows overlap on Android but not on iOS

I am using a Grid Layout to make a registration form. I have a Grid which contains two rows. The first row is an image, the second row is another Grid and has the problem that on Android the entries (which are in a StackLayout) overlap the button, but this doesn't make sense because the grid should never overlap its other rows. Indeed, it works on iOS. Screenshots:

XAML:

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition
        Height="Auto" />
    <RowDefinition
        Height="*" />
  </Grid.RowDefinitions>
  <Image
      Source="blue_background.png"
      Aspect="Fill"
      Grid.Row="0"
      Grid.Column="0" />
  <Image
      Source="icon.png"
      Grid.Row="0"
      Grid.Column="0"
      VerticalOptions="Center" />
  <Grid
      Padding="10"
      Grid.Row="1"
      Grid.Column="0">
    <Grid.RowDefinitions>
      <RowDefinition
          Height="*" />
      <RowDefinition
          Height="2*" />
      <RowDefinition
          Height="*" />
      <RowDefinition
          Height="Auto" />
    </Grid.RowDefinitions>
    <Label
        Text="Unisciti a Youni!"
        FontSize="Large"
        FontAttributes="Bold"
        HorizontalTextAlignment="Center"
        TextColor="#174668"
        Grid.Row="0"
        Grid.Column="0"
        VerticalOptions="Center" />
    <StackLayout
        Grid.Row="1"
        Grid.Column="0"
        Spacing="0"
        VerticalOptions="Fill">
      <Entry
          Text="{Binding RegName}"
          Placeholder="Nome"
          VerticalOptions="FillAndExpand" />
      <Entry
          Text="{Binding RegSurname}"
          Placeholder="Cognome"
          VerticalOptions="FillAndExpand" />
      <Entry
          Text="{Binding RegEmail}"
          Placeholder="Email"
          Keyboard="Email"
          VerticalOptions="FillAndExpand" />
      <Entry
          Text="{Binding RegPassword}"
          Placeholder="Password"
          IsPassword="true"
          VerticalOptions="FillAndExpand" />
      <Entry
          Text="{Binding RegPasswordConfirm}"
          Placeholder="Conferma password"
          IsPassword="true"
          VerticalOptions="FillAndExpand" />
    </StackLayout>
    <Button
        Command="{Binding RegisterCommand}"
        Text="  Registrati  "
        TextColor="White"
        BackgroundColor="#3A8FDA"
        Grid.Row="2"
        Grid.Column="0"
        HorizontalOptions="Center"
        VerticalOptions="Center" />
    <StackLayout
        Orientation="Horizontal"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Grid.Row="3"
        Grid.Column="0">
      <StackLayout.Spacing>
        <OnPlatform
            x:TypeArguments="x:Double">
          <On
              Platform="Android"
              Value="-10" />
          <On
              Platform="iOS"
              Value="3" />
        </OnPlatform>
      </StackLayout.Spacing>
      <Label
          Text="Sei già registrato?"
          FontSize="Small"
          VerticalTextAlignment="Center"
          HorizontalTextAlignment="Center" />
      <Button
          x:Name="LoginSwitchButton"
          Pressed="LoginSwitch_Handle_Pressed"
          Released="LoginSwitch_Handle_Released"
          Command="{Binding LoginSwitchCommand}"
          Text="Passa al login"
          FontSize="Small"
          TextColor="#45BFEE"
          BackgroundColor="Transparent" />
    </StackLayout>
  </Grid>
</Grid>

A workaround is using a ScrollView, but it is not what I wanted. I want the entire UI on the screen, I don't want the user to scroll down to show the rest of it.

Sign In or Register to comment.