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?

Solution 1

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.

Solution 2

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

Solution 3

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>

Solution 4

Reducing the size of the image worked for me.

Solution 5

Another way (source) you can achieve this, is by setting the image's build action (in file properties) as Embedded Resource.

Then, using a converter markup-extension you will be able to use it directly in XAML and won't have to copy or link the files in each platform specific project.

Here's the converter you should add to you portable project:

[ContentProperty(nameof(Source))]
public class ImageResourceExtension : IMarkupExtension
{
  static readonly Assembly CurrentAssembly = 
    typeof(ImageResourceExtension).GetType().Assembly;

  public const string Assets = nameof(Assets);

  public string Source { get; set; }

  public object ProvideValue(IServiceProvider serviceProvider)
  {
    if (string.IsNullOrWhiteSpace(Source))
      return null;

    // Do your translation lookup here, using whatever method you require            
    var source = $"{CurrentAssembly.GetName().Name}.{Assets}.{Source}";

    var imageSource = ImageSource.FromResource(source, CurrentAssembly);

    return imageSource;
  }
}

Then in your 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"
   xmlns:local="clr-namespace:WorkingWithImages;assembly=WorkingWithImages"
   x:Class="WorkingWithImages.EmbeddedImagesXaml">
  <Image Source="{local:ImageResource Background.jpg}"}
</ContentPage>

View more solutions

Comments

[Biellx]

Hello SushiHangover, I Just did that, and still, does not appear =x

[SushiHangover]

@Biellx I added some info to my answer, make sure the image is in the correct folder and assigned the correct build action. Clean and rebuild and redeploy to your device/emulator....

[Biellx]

Yeaa, i think the problem is the build action, how do i set the build action to that image?]

[SushiHangover]

Right click on the image and view properties

[Ali123]

What if i need to reduce the opacity of the image? can i do it dynamically in the app?