Xamarin.Forms Page BackgroundImage property

22
votes

How are you supposed to set the background image for a Page, as the BackgroundImage is a string? I would greatly appreciate any suggestions.

So far I've tried:

MainPage = new ContentPage 
{
    BackgroundImage = "Images/image.png"
}

which does not work. The image file is located in the PCL project.

3
xamarinxamarin.forms
The images must be in Platform specific folders, e.g Resources/drawable for android and Resources for iOS - Akash Amin
I added the image to the Resources/drawable folder (now testing on Android), but it still does not work... - mkkekkonen
I already did that - mkkekkonen
Whats your device resolution? If its of higher resolution then add image to each drawable-hdpi, drawable-xhdpi, drawable-xxhdpi, - Akash Amin
It's working, I was looking at the device from an angle and the background was dark so I didn't notice it, lol, so thanks! - mkkekkonen

3 Answers

16
votes

If I'm not mistaken you can't share resources. you must put the image in Platform Specific folder and than use BackgroundImage = "image.png" without Images/

EDIT:

It seems I was partly mistaken.

It is possible to share images by embedding them instead of having multiple copies for different Platforms: https://developer.xamarin.com/guides/xamarin-forms/working-with/images/#Embedded_Images

14
votes

If you need a solution that allows you to change the AspectRatio and adjust the image you can use this:

XAML:

<?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="Pages.PhotoPage">
        <Grid >
            <Image Source="background.png" Aspect="AspectFit" />
            <!-- Place here the rest of the layout for the page. -->
        </Grid >
</ContentPage>
1
votes

To set the image on a page:

<Image Source="bg"></Image>

Now you need to add your image on each platform:

iOS

Test.iOS > Resources > bg.png

Android

Test.Droid > Resources > bg.png