c# - How in Xamarin Forms project use different sizes of BackgroundImage property for Page?

Question

I've added some types of image in Resources

 - 320 x 480 login-background.png
 - 640 x 960 [email protected]
 - 640 x 1136 [email protected]
 - 750 x 1334 [email protected]

Then I've filled BackgroundImage property in xaml like "Image/login-background"

But it still does not work. Both the device andthe simulator render 320 x 480.

Answer 1

Xaml does not recognize the -568h or @2x e.t.c for iOS. It chooses the image which matches the exact name without extension. It works in android because all images have the same name and the resolution folders are different.

As a workaround you can set images from the C# code behind by looking at the height/width by Overriding the OnSizeAllocated method.

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    string BackGroundImgName = "myimage";
    Device.OnPlatform(iOS: () =>
    {
        if (width >= 414)
            // iPhone 6 Plus
            this.BackgroundImage = BackGroundImgName + "[email protected]";
        else if (width >= 375)
            // iPhone 6
            this.BackgroundImage = BackGroundImgName + "[email protected]";
        else if (width >= 320 && height >= 500)
            // iPhone 5
            this.BackgroundImage = BackGroundImgName + "[email protected]";
        else if (width >= 320)
            // iPhone 4
            this.BackgroundImage = BackGroundImgName + "@2x.png";
        else
            this.BackgroundImage = BackGroundImgName + ".png";
    },
    Android: () => { this.BackgroundImage = BackGroundImgName + ".png"; }
    );
}