How to prevent smoothing the background image when opening the keyboard?

Question

I use Xamarin.Forms and targets iOS and Android .

Default view

The keyboard is open and the background image is compressed

The background image is also compressed 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 applying the concept in CSS before Xamarin.Forms ?

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

Answer 1

With ContentPage.BackgroundImage you cannot control aspect ratio. Instead, use Image in combination with AbsoluteLayout (and set the Aspect Image property):

 <?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 main operation, you can use AdjustPan or AdjustResize:

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

Answer 3

I prefer to do by code, here is my solution:

My App.xaml app always has my device screen:

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

Then on my main Android OS:

  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 the width and height of the screen, you can do this on any page:

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