CODEWITHSUNDEEP
xamarin.forms
Matt G
Matt G

Reputation: 632

BackgroundImage tiling not filling on IOS

I've set a BackgroundImage in XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.Pages.HomePage"
             BackgroundImage="HomePageBackGround.jpg">

This works, it sets the background image. The problem is, on IOS the image is tiled, and I want it to fill the whole screen. How can I do this? I've set appropriate sized copies (@2x and @3x for IOS and in the various drawable folders in Android) - it works as expected on Android but has the tiled behavior on IOS.

Upvotes: 0

Views: 93

Answers (1)

Junior Jiang
Junior Jiang

Reputation: 12723

Have a try with RelativeLayout :

Using RelativeLayout and constraint expressions, we can more or less achieve the same result as Windows XAML’s “Uniform”.

<?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="BackGroundImageDemo.StartPage" >
  <RelativeLayout>
    <Image Source="Jupiter.png" Opacity="0.3"
                RelativeLayout.WidthConstraint=
                  "{ConstraintExpression Type=RelativeToParent, Property=Width}"
                RelativeLayout.HeightConstraint=
                  "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
    <Grid RelativeLayout.WidthConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Width}"
            RelativeLayout.HeightConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Height}">

      <Label Text="Hello world from XAML" VerticalOptions="Center"
         HorizontalOptions="Center" FontSize="30"/>
    </Grid>
  </RelativeLayout>
</ContentPage>

Here is the article for reference.

Upvotes: 1

Related Questions