How can I prevent the background image from being pressed when the keyboard opens?

advertisements

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;
}


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>