CODEWITHSUNDEEP
xamlxamarinxamarin.androidxamarin.formsxamarin-studio
Biellx
Biellx

Reputation: 403

Xamarin.Forms Xaml background Image

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">

enter image description here

SO, how do I fix it?

enter image description here

Upvotes: 12

Views: 35406

Answers (6)

Shimmy Weitzhandler
Shimmy Weitzhandler

Reputation: 104741

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>

Upvotes: 1

Prabhat Maurya
Prabhat Maurya

Reputation: 1088

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>

Upvotes: 4

Richard Long
Richard Long

Reputation: 281

Reducing the size of the image worked for me.

Upvotes: 1

D.vijay
D.vijay

Reputation: 163

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

Upvotes: 5

Rohit Vipin Mathews
Rohit Vipin Mathews

Reputation: 11787

Image files can be added to each application project and referenced from Xamarin.Forms shared code. To use a single image across all apps, the same filename must be used on every platform, and it should be a valid Android resource name (ie. only lowercase letters, numerals, the underscore, and the period are allowed).

  • iOS - Place images in the Resources folder with Build Action: BundleResource . Retina versions of the image should also be supplied - two and three times the resolution with a @2x or @3x suffixes on the filename before the file extension (eg. [email protected]).
  • Android - Place images in the Resources/drawable directory with Build Action: AndroidResource. High- and low-DPI versions of an image can also be supplied (in appropriately named Resources subdirectories such as drawable-ldpi , drawable-hdpi , and drawable-xhdpi ).
  • Windows Phone - Place images in the application's root directory with Build Action: Content .
  • Windows/UWP - Place images in the application's root directory with Build Action: Content .

You can read more at Working with Images Loading and displaying images in Xamarin.Forms

Upvotes: 0

SushiHangover
SushiHangover

Reputation: 74164

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:

enter image description here

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

Upvotes: 9

Related Questions