In grid Layout how to scroll page when keyboard open in xamarin.forms?

Question

I am facing one issue in xamarin.forms. I am using GridView to make login page design so it can be change accordingly device height and width. I don't want scroll that page So I didn't put any ScrollView.

Xaml Design Code :-

<?xml version="1.0" encoding="utf-8" ?>
<custom:KeyboardResizingAwareContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HRMS.Login.LoginPage"
             BackgroundImage="login_bg.png"
                   xmlns:local="clr-namespace:HRMS;assembly=HRMS"
                   Title="{x:Static local:AppResources.TitleLogin}"
             xmlns:custom="clr-namespace:HRMS.Login;assembly=HRMS">
  <ContentPage.Padding>
    <OnIdiom x:TypeArguments="Thickness" Phone="60,40,60,40" Tablet="120,100,120,100" />
  </ContentPage.Padding>
  <custom:KeyboardResizingAwareContentPage.Resources>
    <ResourceDictionary>
      <Style x:Key="SubTitleStyle" TargetType="Label">
        <Setter Property="FontSize" Value="Small" />
        <Setter Property="FontAttributes" Value="Bold" />
        <Setter Property="TextColor" Value="White" />
      </Style>
    </ResourceDictionary>
  </custom:KeyboardResizingAwareContentPage.Resources>
  <custom:KeyboardResizingAwareContentPage.Content>
    <AbsoluteLayout x:Name="AbsMain">
      <Grid VerticalOptions="Center" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
        <Grid.RowDefinitions>
          <RowDefinition Height="35*"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="6*"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="6*"/>
          <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Image x:Name="ImgLogo" Source="login_logo.png" HorizontalOptions="Center" Grid.Row="0"/>
        <StackLayout Grid.Row="1">
          <StackLayout.HeightRequest>
            <OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="35" />
          </StackLayout.HeightRequest>
        </StackLayout>
        <Frame OutlineColor="#DCDCDC"
            HorizontalOptions="FillAndExpand" VerticalOptions="Center"
            HasShadow="false" Padding="1"
            Grid.Row="2"
            BackgroundColor="White"
            Margin="5,0,5,0">
          <Frame.HeightRequest>
            <OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="35" />
          </Frame.HeightRequest>
          <Frame.Content>
            <Grid>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="9*"/>
              </Grid.ColumnDefinitions>
              <Image x:Name="ImgLoginName" Grid.Column="0" Source="ico_login_name.png"
                  HorizontalOptions="StartAndExpand" VerticalOptions="Center" Margin="5,0,0,0"/>
              <StackLayout Grid.Column="1" VerticalOptions="Center">
                <Entry x:Name="TxtUsername" TextColor="#f15a23"
                       Margin="5,0,0,0"
                       PlaceholderColor="#8c8c8c"
                       BackgroundColor="White"
                       Placeholder="{x:Static local:AppResources.PHEmployeeCode}" />
              </StackLayout>
            </Grid>
          </Frame.Content>
        </Frame>
        <Frame OutlineColor="#DCDCDC"
            HorizontalOptions="FillAndExpand" VerticalOptions="Center"
            HasShadow="false" Padding="1"
            Grid.Row="3"
            BackgroundColor="White"
            Margin="5,0,5,0">
          <Frame.HeightRequest>
            <OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="35" />
          </Frame.HeightRequest>
          <Frame.Content>
            <Grid>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="9*"/>
              </Grid.ColumnDefinitions>
              <Image x:Name="ImgLoginPassword" Grid.Column="0" Source="ico_login_password.png"
                  HorizontalOptions="StartAndExpand" VerticalOptions="Center" Margin="5,0,0,0"/>
              <StackLayout Grid.Column="1" VerticalOptions="Center">
                <Entry x:Name="TxtPassword" IsPassword="True" TextColor="#f15a23"
                     PlaceholderColor="#8c8c8c"
                     Margin="5,0,0,0"
                     BackgroundColor="White"
                     Placeholder="{x:Static local:AppResources.PHPassword}" />
              </StackLayout>
            </Grid>
          </Frame.Content>
        </Frame>
        <Label x:Name="LblForgotPassword" Grid.Row="4" Margin="5,0,5,0"
                    Text="Forgot Password?" TextColor="Black" HorizontalTextAlignment="End"/>
        <Button x:Name="BtnLogin" Text="{x:Static local:AppResources.BLogin}" Clicked="LoginButton_Clicked"
                  Grid.Row="5" BackgroundColor="#f15a23" TextColor="White"
                  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
          <Button.HeightRequest>
            <OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="45" />
          </Button.HeightRequest>
        </Button>
        <Image x:Name="ImgOr" Grid.Row="6" HorizontalOptions="FillAndExpand"
               Source="or.png" />
        <Button x:Name="BtnUpdateDevicewithlogin" Text="{x:Static local:AppResources.BUpdateDevice}"
                Clicked="UpdateDeviceWithLoginButton_Clicked" Grid.Row="7"
                BackgroundColor="#f15a23" TextColor="White" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
          <Button.HeightRequest>
            <OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="45" />
          </Button.HeightRequest>
        </Button>
      </Grid>
      <ActivityIndicator x:Name="actIndicator2" Color="#f15a23" Opacity="2"
              HeightRequest="50" WidthRequest="50" VerticalOptions="Center" HorizontalOptions="Center"
              AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />

    </AbsoluteLayout>

  </custom:KeyboardResizingAwareContentPage.Content>
</custom:KeyboardResizingAwareContentPage>

I am using "KeyboardResizingAwareContentPage" page instead "ContentPage" because In ios Page is not set when keyboard is open. password field hide behind keyboard so users can not see whatever then typing. That's why I am using Render for content Page in IOs.

As Above images when I focus on username or password entry field two buttons are hide behind the keyboard. Client requirement is that at that time page should be scroll. How can I solve this problem? Is it possible through rendering? I am facing this issue in both the platform. (ios and android)

Answer 1

Even if you don't mean to scroll your page, use a ScrollView as the root of your Page, and put your grid in it.

This should fix it.