CODEWITHSUNDEEP
c#xamarinxamarin.iosxamarin.forms
Nikita Minaev
Nikita Minaev

Reputation: 129

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

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]

solution explorer pic

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

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

Upvotes: 0

Views: 1678

Answers (1)

Akash Amin
Akash Amin

Reputation: 2761

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

Upvotes: 3

Related Questions