adjust and move the content of a page up slightly when the keyboard appears in an Entry control Xamarin Forms

Question

I have a registration form, when the user is entering data such as Email, below that Entry control there is a Label that appears if there is an error in the input. So my problem is that the virtual keyboard hides the Label showing input errors and I don't want that to happen.

With keyboard.jpg without keyboard.jpg

It will be that there will be some way to move the content of the form a little higher so that the Control Entry can be seen along with the Error Label

<StackLayout>
<Entry
    Keyboard="Email"
    MaxLength="30"
    Placeholder="Enter Email"
    ReturnType="Next"
    Style="{StaticResource BorderlessEntryStyle}"
    Text="{Binding Email.Value}">
    <Entry.Behaviors>
        <behaviorsValidate:EventToCommandBehavior Command="{Binding ValidateEmailCommand}" EventName="TextChanged" />
    </Entry.Behaviors>
</Entry>
<Label
    Margin="4,-4,0,0"
    FontSize="12"
    IsVisible="{Binding Email.IsValid, Converter={StaticResource InverseBoolConverter}}"
    Style="{StaticResource SimpleLabelStyle}"
    Text="{Binding Email.Errors, Converter={StaticResource FirstValidationErrorConverter}}"
    TextColor="{DynamicResource Red}"
    VerticalOptions="FillAndExpand" />
</StackLayout>

Answer 1

About adjusting elements when keyboard shows in Xamarin Forms, find one way to do this.

On android you just need to add your elements inside a Grid and use the platform specific UseWindowSoftInputModeAdjust Resize in the Application XAML.

firstly, create a new class that extend from Grid in Shared code.

 public class KeyboardView: Grid
{

}

Then adding your control inside it.

<views:KeyboardView Padding="0,60,0,0"
                     VerticalOptions="FillAndExpand">
             <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="60" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="*" />
              </Grid.RowDefinitions>
                
             <Image Source="ic_test"
                    HeightRequest="80"
                    WidthRequest="80"
                    HorizontalOptions="CenterAndExpand"
                    Grid.Row="0"/>
                
             <Label Text="Login"
                    FontAttributes="Bold"
                    TextColor="CornflowerBlue"
                    HorizontalOptions="CenterAndExpand"
                    FontSize="25"
                    VerticalOptions="Center"
                    Margin="0,20,0,0"
                    Grid.Row="1"
                    x:Name="welcomeText"/>
                
        
             <Entry Placeholder="Email"
                    Grid.Row="2"
                    Margin="20,0"                        
                    x:Name="email" 
                    ReturnType="Done"
                    Keyboard="Email"/>
    
             <Entry Placeholder="Password"
                    Margin="20,0" 
                    Grid.Row="3"
                    HeightRequest="50"
                    x:Name="password"                      
                    ReturnType="Done"
                    IsPassword="true"/>
                
            
            <Button VerticalOptions="EndAndExpand"
                    BackgroundColor="CornflowerBlue"
                    HeightRequest="60"
                    TextColor="White"
                    CornerRadius="0"
                    Grid.Row="4"
                    Text="Login"/>
        </views:KeyboardView>

Thirdly, add platform specific UseWindowSoftInputModeAdjust with Resize value on the Application XAML

<Application xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
         x:Class="KeyboardSample.App"
         xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
         android:Application.WindowSoftInputModeAdjust="Resize">

On iOS we have to create a custom renderer to do the resize. Don't test on ios device.

[assembly: ExportRenderer(typeof(KeyboardView), typeof(KeyboardViewRenderer))]
namespace KeyboardSample.iOS.Renderers
{
public class KeyboardViewRenderer : ViewRenderer 
{
    NSObject _keyboardShowObserver;
    NSObject _keyboardHideObserver;
    protected override void OnElementChanged(ElementChangedEventArgs<View> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
            RegisterForKeyboardNotifications();
        }

        if (e.OldElement != null)
        {
            UnregisterForKeyboardNotifications();
        }
    }

    void RegisterForKeyboardNotifications()
    {
        if (_keyboardShowObserver == null)
            _keyboardShowObserver = UIKeyboard.Notifications.ObserveWillShow(OnKeyboardShow);
        if (_keyboardHideObserver == null)
            _keyboardHideObserver = UIKeyboard.Notifications.ObserveWillHide(OnKeyboardHide);
    }

    void OnKeyboardShow(object sender, UIKeyboardEventArgs args)
    {

        NSValue result = (NSValue)args.Notification.UserInfo.ObjectForKey(new NSString(UIKeyboard.FrameEndUserInfoKey));
        CGSize keyboardSize = result.RectangleFValue.Size;
        if (Element != null)
        {
            Element.Margin = new Thickness(0, 0, 0, keyboardSize.Height); //push the entry up to keyboard height when keyboard is activated

        }
    }

    void OnKeyboardHide(object sender, UIKeyboardEventArgs args)
    {
        if (Element != null)
        {
            Element.Margin = new Thickness(0); //set the margins to zero when keyboard is dismissed
        }

    }


    void UnregisterForKeyboardNotifications()
    {
        if (_keyboardShowObserver != null)
        {
            _keyboardShowObserver.Dispose();
            _keyboardShowObserver = null;
        }

        if (_keyboardHideObserver != null)
        {
            _keyboardHideObserver.Dispose();
            _keyboardHideObserver = null;
        }
    }
}
 }