如何防止键盘打开时背景图像被挤压？

Question

我正在使用 Xamarin.Forms，目标是 iOS 和 Android。

默认视图

键盘打开，背景图片被挤压

背景图像在横向模式下也被压缩

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>

有没有什么方法可以将CSS中的概念应用到Xamarin.Forms中？

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

Answer 1

使用 ContentPage.BackgroundImage 您无法控制纵横比。而是将 Image 与 AbsoluteLayout 结合使用（并设置 Image 的 Aspect 属性）：

<?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

在您的 MainActivity 中，您可以使用 AdjustPan 或 AdjustResize：

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

Answer 3

我更喜欢通过代码来完成，这是我的解决方案：

我的设备屏幕总是这样 App.xaml:

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

然后在我的 Android Main Activity:

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

在我的 iOS AppDelegate 中：

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

因此，当您拥有屏幕宽度和高度时，您可以在任何页面中执行此操作：

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

如何防止键盘打开时背景图像被挤压？

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

xamarin

xamarin.forms