How to prevent background image being squeezed when the keyboard opens?

Question

I'm using Xamarin.Forms and is targeting iOS and Android.

Default view

Keyboard opened and the background image squeezed

Background image squeezed as well in landscape mode

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XilnexOTM.Views.LoginPage"
             BackgroundImage="bg1.png" >
    <ScrollView>
        <StackLayout Orientation="Vertical">
            <Label Text="PICTURE"  />
            <Label Text="PIC 2" />

            <Entry Placeholder="Username" />
            <Entry Placeholder="Password" IsPassword="true"/>

            <Button x:Name="btn_Login"
                    Text="Login"
                    BackgroundColor="#FF0000"/>

        </StackLayout>
    </ScrollView>
</ContentPage>

---

Is there any possible way by applying the concept in CSS to Xamarin.Forms ?

xx {
 background-size: cover;
 background-position: right bottom;
}

Answer 1

With ContentPage.BackgroundImage you can't control aspect ratio. Instead use Image combined with AbsoluteLayout (and set Aspect property of Image):

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XilnexOTM.Views.LoginPage">

    <AbsoluteLayout VerticalOptions="FillAndExpand"
                    HorizontalOptions="FillAndExpand">

        <Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
            Source="bg1.png" Aspect="AspectFill"/>

        <ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1">
            <StackLayout Orientation="Vertical">
                <Label Text="PICTURE"  />
                <Label Text="PIC 2" />

                <Entry Placeholder="Username" />
                <Entry Placeholder="Password" IsPassword="true"/>

                <Button x:Name="btn_Login"
                        Text="Login"
                        BackgroundColor="#FF0000"/>
            </StackLayout>
        </ScrollView>                   

    </AbsoluteLayout>             
</ContentPage>

Answer 2

Inside your MainActivity you can use AdjustPan or AdjustResize:

[Activity(WindowSoftInputMode = SoftInput.AdjustPan)]
public class MyActivity : Activity
{
   .....
}

Answer 3

I prefer doing by code, here is my solution:

I always have my Device Screen like this in my App.xaml:

    public static double ScreenWidth { get; set; }
    public static double ScreenHeight { get; set; }

Then in my Android Main Activity:

        Passapp.App.ScreenWidth = (double)(Resources.DisplayMetrics.WidthPixels / Resources.DisplayMetrics.Density);
        Passapp.App.ScreenHeight = (double)(Resources.DisplayMetrics.HeightPixels / Resources.DisplayMetrics.Density);

And in my iOS AppDelegate:

App.ScreenWidth = UIScreen.MainScreen.Bounds.Width;
        App.ScreenHeight = UIScreen.MainScreen.Bounds.Height;

So when You have your Screen Width and Height you can do this in whatever page you have:

public partial class MyPage : ContentPage
{

    public MyPage()
    {
        InitializeComponent();

        NavigationPage.SetHasNavigationBar(this, false);

        var layout = new AbsoluteLayout();

#if __ANDROID__

        BackgroundImage = "Background";
#endif

#if __IOS__
        Image img = new Image()
        {
            Source = "Background",
            Aspect = Aspect.Fill
        };

        layout.Children.Add(img, new Rectangle(0, 0, App.ScreenWidth, App.ScreenHeight));
#endif


        Content = layout;
    }
}