Xamarin forms background image not working

Question

I am working on Xamarin forms, cross platform app (Android and iOS). I wanted to have background image for login form.

I set it on constructor of form and code is :

this.BackgroundImage = ImageSource.FromResource("PCLProjectName.Images.Login.loginbackground.png").ToString();

And Image is in PCL project and I have set its action property as Embedded resource.

PCL project folder hierarchy as as below

Root
 - Images
    - Login
       -loginbackground.png

Image is not displaying

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

For images to work, they must be placed in different folders in iOS and android. Subfolders or custom file structures cannot be used to my knowledge.

For Android devices, images must be in the Android project under Android>Resources>Drawable. Build action set to Android Resource (this folder should already exist)

For iOS devices, images must be in the iOS project folder iOS>Resources. Build Action set to Bundle Resource (This folder should also already exist)

With the images in the respective folders, you can set the image like so.. this.BackgroundImage = ImageSource.FromFile("loginbackground.png")

edit: To continue with your PCL Embedded Resource approach..

You can run this piece of code somewhere to see that the images are detected correctly in the resources. I know from experience there are some weird file naming issues (though I don't see any I've encountered in your example)

    var assembly = typeof(EmbeddedImages).GetTypeInfo().Assembly;
    foreach (var res in assembly.GetManifestResourceNames()) 
    System.Diagnostics.Debug.WriteLine("found resource: " + res);

Answer 3

Xamarin does not allow you to use an image from external storage or Url as background image of ContentPage. so instead of setting a BackgroundImage ="image_name_in_resources" inside the root tag of page ( ContentPage ) , put it in an Image tag neighboring you inside code , both inside an AbsoluteLayout here's a snippet of my Code

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
.....
    .....>
     <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
     <Image  x:Name="imageBG" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" Aspect="AspectFill"    Source="myimage.jpg" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>

    <StackLayout AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" >
    ....
    </StackLayout>

    </AbsoluteLayout>

---

to change the source prof CS code here's a little snippet i worked with

  string serverAdress = Constants.HTTP_PRE + Constants.SERVER_IP;
                Logo.Source = new UriImageSource
                {
                    Uri = new Uri(serverAdress + Constants.HEADER_IMAGE),
                    CachingEnabled = true
                };

For more controle over whether the server response is valid ...

    try
    {
        string url = Constants.HTTP_PRE + DependencyService.Get<IStoredData>().GetData(Constants.SHARED_PREF_ADDRESS);
        url += Constants.HEADER_IMAGE;
        HttpWebRequest wrq = (HttpWebRequest)WebRequest.Create(url);
        //You should be getting only the response header
        wrq.Method = "HEAD";
        if (    ( (HttpWebResponse)wrq.GetResponse()    ).ContentLength > 0) // if filePath is correct - serverIP is set
        {
            Uri uri = new Uri(url);
            UriImageSource uriImageSource = new UriImageSource { Uri = uri, CachingEnabled = true };
            Logo.Source = uriImageSource;
        }
    }catch (Exception e) { System.Console.WriteLine(e.StackTrace); }