CODEWITHSUNDEEP
c#xamlxamarinxamarin.formsxamarin.ios
Pratius Dubey
Pratius Dubey

Reputation: 673

Xamarin Form:-BackgroundImage for content page it's not getting stretch

I have added simple BackgroundImage for content page it's working perfect on all devices. But issue is only on IOS IPhone XS MAX image is not getting stretch.And also there is not option for Aspect for backgroundImage.

 <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Demo.Welcome"
             BackgroundImage="bg.png">

  <ContentPage.Content>

  </ContentPage.Content>
</ContentPage>

Note- I have checked image rotation and pixel are perfect.

What should I do?

Upvotes: 1

Views: 2379

Answers (3)

FabriBertani
FabriBertani

Reputation: 1636

Instead of doing a custom renderer, you can use a grid layout, due the grid layout can manage z-index, so you can place the image beneath the content. Like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Demo.Welcome">
    <Grid>
        <Image
            Aspect="AspectFill"
            Source="bg.png" />
        <ScrollView>
            <!--
                ...
                Your content here
                ...
            -->
        </ScrollView>
    </Grid>
</ContentPage>

Upvotes: 4

Daxa Varsani
Daxa Varsani

Reputation: 156

 <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Demo.Welcome">
  <ContentPage.Content>
      <AbsoluteLayout>
         <Image Source="bg.png" AbsoluteLayout.LayoutBounds="1.,1.,1,1"  AbsoluteLayout.LayoutFlags="All" Aspect="Fill"/>          
      </AbsoluteLayout>
  </ContentPage.Content>
</ContentPage>

Upvotes: 3

Bruno Caceiro
Bruno Caceiro

Reputation: 7199

You can use a CustomRenderer to set the background image (Adapt to your PageName and namespaces. I've used this to fill images in iOS pages.

[assembly: ExportRenderer(typeof(Forms.TestPage), typeof(.iOS.Renderers.TestPage))]
namespace Mindflow.Gamification.Mercedes.iOS.Renderers
{
    public class TestPage : PageRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null || Element == null)
            {
                return;
            }


            var page = e.NewElement as Mindflow.Gamification.Forms.Pages.Game.GamePage;

            UIGraphics.BeginImageContext(View.Frame.Size);
            UIImage i = UIImage.FromFile(page.BackgroundImage);
            i = i.Scale(View.Frame.Size);

            View.BackgroundColor = UIColor.FromPatternImage(i);
        }
    }
}

Upvotes: 1

Related Questions