iOS Page BackgroundImage does not scale correctly

[johan-broekhof]

Description

I want to use the BackgroundImageSource property on a ContentPage to set the background image. On Android, the screen is filled with the background. This is not the case on iOS, instead it will render the image according to its size and than repeats it self. I'm currently using a SVG file as background but this didn't work with a PNG file either. I have seen this issue in .NET 8 as well.

EDIT: added a repo and images to illustrate the problem.

iOS:

Android:

Steps to Reproduce

1. In a ContentPage set the BackgroundImageSource property to a local image resource.
2. Check the background of the page.

Link to public reproduction project repository

iOS Page BackgroundImageSource repo

Version with bug

9.0.30 SR3

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 15 and up, haven't tested older versions

Did you find any workaround?

I created a custom ContentPageHandler to map the BackgroundImageSource property. It does not remove the background image but instead overlaps it (I believe). I couldn't use an Image element inside the page, so I used this instead.

public class CustomContentPageHandler : PageHandler
{
    public static IPropertyMapper<ContentPage, CustomContentPageHandler> PropertyMapper = new PropertyMapper<ContentPage, CustomContentPageHandler>(Mapper)
    {
        [nameof(ContentPage.BackgroundImageSource)] = MapBackgroundImageSource,
    };

    public CustomContentPageHandler() : base(PropertyMapper)
    {
    }

    private static void MapBackgroundImageSource(CustomContentPageHandler handler, ContentPage page)
    {
        var backgroundImage = page.BackgroundImageSource;

        if (backgroundImage == null)
            return;

        var image = backgroundImage.GetPlatformImageAsync(handler.MauiContext).Result.Value;
        var resizedImage = ResizeImage(image, UIScreen.MainScreen.Bounds.Size);

        handler.PlatformView.BackgroundColor = UIColor.FromPatternImage(resizedImage);
    }

    private static UIImage ResizeImage(UIImage image, CGSize targetSize)
    {
        var size = image.Size;
        var ratio = GetRatio(targetSize.Width / size.Width, targetSize.Height / size.Height);

        var newImageSize = new CGSize(size.Width * ratio, size.Height * ratio);
        var imageRect = new CGRect(new CGPoint(0, 0), newImageSize);

        UIGraphics.BeginImageContextWithOptions(newImageSize, false, 1);
        image.Draw(imageRect);

        var newImage = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();

        return newImage;
    }

    private static nfloat GetRatio(nfloat widthRatio, nfloat heightRatio)
    {
        if (widthRatio < heightRatio)
            return heightRatio;

        return widthRatio;
    }
}


### Relevant log output

```shell

[johan-broekhof]

@tj-devel709 I took some time to create a repo and did a little bit of testing. As you can see in one of the screenshots, the background image is stretched instead of scaling equally in both directions on Android. Should Android be added as target/label as well? Any thoughts?