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

Question

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

默认 View


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


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


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 (并设置 Aspect 的属性 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>