[Bug] BackgroundImageSource repeat itself to fill screen

[mfranc28]

When I use BackgroundImageSource on Xaml Page the image don't fill completely the screen and repeat itself to do it. The size of image was 5336x3000

1. Add backgroundimagesource on Xaml ContentPage

Expected Behavior

Thebackground image fill the screen on every device size screen

Actual Behavior

The image don't fill the screen and repeat itself

Basic Information

• Version with issue: Xamarin Forms 4.2.0.709249
• Last known good version:
• IDE: Visual Studio Mac
• Platform Target Frameworks:
  • iOS: 11.1 - 12.2 - 13.2
  • Android: 8.0 - 9.0 - 10.0
  • UWP: na
• Affected Devices: All

[abdul-wasey]

I was also facing this issue , but Here is a workaround that will solve this issue

<ContentPage.Content>
        <Grid>

            <Image Source="BackGroundImage.jpg" 
                   Aspect="AspectFill"
                   />

            <!-- Place your layouts and controls here, for example-->

            <Frame BackgroundColor="White"
                   CornerRadius="10"
                   Padding="0"
                   Margin="10"
                   VerticalOptions="CenterAndExpand"
                   HeightRequest="150">

                <Label Text="Label in the frame" 
                       TextColor="Black"
                       FontSize="22"
                       HorizontalTextAlignment="Center"
                       VerticalOptions="CenterAndExpand"/>

            </Frame>

        </Grid>
    </ContentPage.Content>

[kingces95]

Could you please attach a zipped solution file exhibiting the unexpected behavior?

[abdul-wasey]

Could you please attach a zipped solution file exhibiting the unexpected behavior?

This sample project is working good on android emulator nexus 6p (Android 9.0 - API 28) and on iPhoneSimulator (iPhone 8 Plus iOS 13.2) its not covering the background of contentpage as like in Andorid Emulator.

• Xamarin.Forms Version : 4.2.0.709249
• BackgroundImgSrc.zip

[rmarinho]

We need to add a behavior for the aspect, something like

BackgroundImageAspect to Page

[MrBugReporter]

It's been half an year and no progress on this? I haven't been able to use background page images on any of my projects because of this. Did Xamarin decide to completely ignore this issue?

I was also facing this issue , but Here is a workaround that will solve this issue

<ContentPage.Content>
        <Grid>

            <Image Source="BackGroundImage.jpg" 
                   Aspect="AspectFill"
                   />

            <!-- Place your layouts and controls here, for example-->

            <Frame BackgroundColor="White"
                   CornerRadius="10"
                   Padding="0"
                   Margin="10"
                   VerticalOptions="CenterAndExpand"
                   HeightRequest="150">

                <Label Text="Label in the frame" 
                       TextColor="Black"
                       FontSize="22"
                       HorizontalTextAlignment="Center"
                       VerticalOptions="CenterAndExpand"/>

            </Frame>

        </Grid>
    </ContentPage.Content>

That workaround doesn't work well when you have UseSafeArea as true for iOS.

[chrisgull]

I'm facing the same limitation, using a BackgroundImageSource on a MultiPage. Because a MultiPage only can contain Pages, there is no workaround like using an Image in Content with Aspect property set.

I made a PageRenderer for UWP as a workaround, here is a proof-of-concept code snippet of the renderer. Obviously the image source and aspect should be pulled from the portable code layer. (sorry about the code formatting)

` [assembly: ExportRenderer( typeof( MyContentPage ), typeof( MyContentPageRenderer ) )] namespace myapp.uwp {

class MyContentPageRenderer : PageRenderer
{
    public MyContentPageRenderer( )
    {
    }
    protected override void OnElementChanged( ElementChangedEventArgs<Xamarin.Forms.Page> e )
    {
        base.OnElementChanged( e );
        Background = new ImageBrush
        {
            ImageSource = new BitmapImage( new Uri( "ms-appx:///mypic.png" ) ),
            Stretch = Stretch.UniformToFill,
        };
    }
}

} `