[Bug] BackgroundImageSource not constrained on iOS

[mrobraven]

Description

Basically I am trying to use BackgroundImageSource of a ContentPage which works fine on Android devices, fitting to the bounds of the screen. However on iOS, the image is not constrained to the bounds of the screen and only 1/3 of the image is visible because it is too large. I understand that there are workarounds to this which involve using a GridView but implementing this will be impractical and time consuming in my case with a multi-page application (where all of the pages use this image). I believe that as a multiplatform development solution, things like this (things independant from Native UI elements) should be unified across platforms and so I would like to see this implemented whereby the BackgroundImageSource is set to resize to the device screen size on all devices, not just Android ones.

Steps to Reproduce

1. Set BackgroundImageSource to image
2. Build iOS Project

Expected Behavior

The image, as on Android, should shrink to fit the screen

Actual Behavior

The image displays far too large, 3/4 off of the screen

Basic Information

• Version with issue:

• Last known good version: never

• Platform Target Frameworks:

  • iOS: 14.3
  • Android: API 30

• NuGet Packages: Not relevant

• Affected Devices: All iOS

Environment

Show/Hide Visual Studio info

``` === Visual Studio Community 2019 for Mac === Version 8.8.6 (build 15) Installation UUID: 571b80d6-4fde-4bd1-bd84-6ced289505e1 GTK+ 2.24.23 (Raleigh theme) Xamarin.Mac 6.18.0.23 (d16-6 / 088c73638) Package version: 612000113 === Mono Framework MDK === Runtime: Mono 6.12.0.113 (2020-02/4fdfb5b1fd5) (64-bit) Package version: 612000113 === Roslyn (Language Service) === 3.8.0-5.20519.18+4c195c3ac1974edcefa76774d7a59a2350ec55fa === NuGet === Version: 5.8.0.6860 === .NET Core SDK === SDK: /usr/local/share/dotnet/sdk/5.0.102/Sdks SDK Versions: 5.0.102 5.0.101 5.0.100 3.1.405 3.1.404 3.1.403 3.1.402 MSBuild SDKs: /Applications/Visual Studio.app/Contents/Resources/lib/monodevelop/bin/MSBuild/Current/bin/Sdks === .NET Core Runtime === Runtime: /usr/local/share/dotnet/dotnet Runtime Versions: 5.0.2 5.0.1 5.0.0 3.1.11 3.1.10 3.1.9 3.1.8 2.1.23 2.1.22 === .NET Core 3.1 SDK === SDK: 3.1.405 === Xamarin.Profiler === Version: 1.6.15.68 Location: /Applications/Xamarin Profiler.app/Contents/MacOS/Xamarin Profiler === Updater === Version: 11 === Xamarin Designer === Version: 16.8.0.510 Hash: 44e3f3ce9 Branch: remotes/origin/d16-8 Build date: 2020-12-10 00:06:14 UTC === Apple Developer Tools === Xcode 12.3 (17715) Build 12C33 === Xamarin.Mac === Xamarin.Mac not installed. Can't find /Library/Frameworks/Xamarin.Mac.framework/Versions/Current/Version. === Xamarin.iOS === Version: 14.8.0.3 (Visual Studio Community) Hash: c51fabee8 Branch: xcode12.3 Build date: 2020-12-10 21:05:05-0500 === Xamarin.Android === Version: 11.1.0.26 (Visual Studio Community) Commit: xamarin-android/d16-8/a36ce73 Android SDK: /Users/mswallow/Library/Developer/Xamarin/android-sdk-macosx Supported Android versions: 7.1 (API level 25) SDK Tools Version: 26.1.1 SDK Platform Tools Version: 30.0.4 SDK Build Tools Version: 29.0.2 Build Information: Mono: 5e9cb6d Java.Interop: xamarin/java.interop/d16-8@79d9533 ProGuard: Guardsquare/proguard/proguard6.2.2@ebe9000 SQLite: xamarin/sqlite/3.32.1@1a3276b Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-8@2fb1cbc === Microsoft OpenJDK for Mobile === Java SDK: /Users/mswallow/Library/Developer/Xamarin/jdk/microsoft_dist_openjdk_1.8.0.25 1.8.0-25 Android Designer EPL code available here: https://github.com/xamarin/AndroidDesigner.EPL === Android SDK Manager === Version: 16.8.0.32 Hash: 01a7774 Branch: remotes/origin/d16-8 Build date: 2021-01-14 00:34:58 UTC === Android Device Manager === Version: 16.8.0.46 Hash: 0a81419 Branch: remotes/origin/d16-8 Build date: 2021-01-14 00:35:22 UTC === Build Information === Release ID: 808060015 Git revision: d34d29b4643a130479d762e4d2b5750e6462fde7 Build date: 2021-01-15 08:35:04-05 Build branch: release-8.8 Xamarin extensions: d34d29b4643a130479d762e4d2b5750e6462fde7 === Operating System === Mac OS X 10.15.7 Darwin 19.6.0 Darwin Kernel Version 19.6.0 Mon Aug 31 22:12:52 PDT 2020 root:xnu-6153.141.2~1/RELEASE_X86_64 x86_64 ```

Workaround

A possible workaround is to use the classic Grid Layout to place items over an image which works, but is impractical and will take far too much time to complete on every page of my application. Some pages will also require extra attention as they contain scrollable elements and make use of the keyboard to which I have seen on StackOverflow can cause problems and the fixes to those will take too long.

[rmarinho]

Hi @mrobraven can you upload simple sample so we can try to understand better?!

Thanks

[mrobraven]

Hi,

Attached below are two screenshots from the XAML previewer. Android, with the image (background gradient) displaying correctly and iOS where the image is far too large.

Android

iOS

You can see a small change in colour on the iOS variant, which suggests that the displayed image is too large to fit the screen. My aim is to have it constrain to the screen in the same way as on Android.

[Redth]

Could you please attach a sample project with the image and code used to produce those screenshots? Thanks!

[mrobraven]

Hi,

Sorry for the delay.

Attached is a ZIP containing a sample project directory.

Thanks BackgroundImageSample.zip

[rmarinho]

The proper fix would be add a ImageAspect for the BackgroundImageSource, because any change could be a breaking change for what we have now.