Xamarin.Forms Xaml background Image

Question

I just started a Xamarin.Forms application and I want to add a background image to my XAML. I added the attribute but it does not appear when I run it!! Here is the images.

APP

public class App : Application
{
    public App()
    {
        // The root page of your application
        MainPage = new Page();
    }

XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="App1.Page"
         BackgroundImage="bg.png">

SO, how do I fix it?

Answer 1

If you want to add background image in XAML file for the entire page in Xamarin project, then use the BackgroundImage property and add your image to the Android project under Resources -> drawable folder and for iOS Resources folder.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PhoneDailerDemo"
             x:Class="PhoneDailerDemo.MainPage"
             BackgroundImage="image3.jpg">

    <Label Text="Welcome to Xamarin Forms!" 
           VerticalOptions="Center" 
           HorizontalOptions="Center" />
    <StackLayout Padding="100">
       //..........
    </StackLayout>
</ContentPage>

Answer 2

Add your bg.png file in each of your native projects, since you are currently using a Android emulator start with your Xamarin.Android project:

Android - Place images in the Resources/drawable directory with Build Action: AndroidResource

ref: https://developer.xamarin.com/guides/xamarin-forms/working-with/images/

Example: In your Xamarin.Android project, add bg.png as shown:

Check the Build Action of that image and ensure that it is assigned AndroidResource. Rebuild and re-test.

Answer 3

In Xamarin.forms

1. The images should be placed in the following folders

      iOS, Android  - Resources folder 
   
      Windows/UWP, Windows Phone  - Assets folder 
   

2. Then the build action(rt click img->properties) of the images should be changed as follows

   iOS - BundleResource             Windows Phone - Content
   
   Android - AndroidResource        Windows/UWP - Content
   

If Still the image is not displayed, try changing the Copy to Output Directory to Copy if newer in image Properties

Answer 4

Reducing the size of the image worked for me.