Binding image source dynamically on xamarin forms

Question

my question is, could I Binding string image to image source ? I have multiple image and the image will change on if condition. So:

Xaml on Xamarin forms:

<Image Source="{Binding someImage}" Aspect="Fill" Grid.Row="2"></Image>

Codebehind c#

   public String someImage;
    public String SomeImage
    {
        set
        {
            if (someImage != value)
            {
                someImage = value;                                        
            }
        }
        get
        {
            return someImage;
        }
    }

InitializeComponent part:

if(true)
            {
                someImage = "backgroundListViewGren.png";
            }
            else
            {
                someImage = "backgroundListViewRed.png";
            }

the image is in "Images" folder on portable project

but this, doesn't work, maybe i wront something but I don't understand. Any solutions ?

I've tried with ImageSource and not string, but don't work too.

Answer 1

I think this is not the fastest thing, but I found a way to only include the image resource once, in the shared project.

This also has the advantage that it doesn't matter where the file is located in your project, which is good for me since I tend to move things around fairly frequently.

It's a class called EmbeddedSourceror. It basically just finds and returns the resource as needed:

public class EmbeddedSourceror
{
    //NOTE: if there are resources *anywhere* with identical names, this will only return the *first* one it finds, so don't duplicate names
    public static Xamarin.Forms.ImageSource SourceFor(string filenameWithExtension)
    {       
        var resources = typeof(EmbeddedSourceror).GetTypeInfo().Assembly.GetManifestResourceNames();

        var resourceName = resources.First(r => r.EndsWith(filenameWithExtension, StringComparison.OrdinalIgnoreCase));

        return Xamarin.Forms.ImageSource.FromResource(resourceName);
    }
 }

Usage:

Assuming an image element defined in XAML as centerImageElement:

centerImageElement.Source = EmbeddedSourceror.SourceFor("centerimage.png");

...and you can dynamically assign it however you like during run-time.

Answer 2

You said:

the image is in "Images" folder on portable project

Each platform have a different approach for resources and images. Xamarin handles that in every platform for example Xamarin.iOS has embedded resource while Xamarin.Android uses Android resource for images.

You should place your images in every project for Xamarin.Forms to know where to look for them in each platform.

For more information look at this.

Answer 3

You can do it a bit simpler I think. This is working on mine. Put the image in the appropriate place on each platform eg. Resources/drawable on Android

In your Xaml:

<Image Source="{Binding someImage}" Aspect="Fill" Grid.Row="2"></Image>

In your View Model:

private string _someImage = "icon_eye_hidden";
    public string someImage
    {

        get => this._someImage;
        set
        {

            if (this._someImage == value) return;

            this._someImage = value;
            this.RaisePropertyChanged(() => this.someImage);
        }
    }

Then just set someImage to the name of the image (without the extension) and it should update.

Answer 4

I'll post this answer here because it's the one I was looking for and I suspect most others are (and Google currently directs you here, which currently isn't super helpful).

How to bind an image using XAML:

XAML:

<Image>
    <Image.Source>
        <FileImageSource File="{Binding SomeImage}" />
    </Image.Source>
</Image>

Then in the ViewModel, C#:

public string SomeImage
{
    get { return string.Format("prefix-{0}-suffix.png", OtherProperty); }
}

Newer, better, but essentially equivalent c# you can use instead of the above:

public string SomeImage => $"prefix-{OtherProperty}-suffix.png";

This is certainly the easiest way to set it up, IMO :).

EDIT: It should go without saying, but the image should obviously be in the Resources folder of the project for each platform.

Answer 5

For using images from the PCL, check out this part in the Xamarin documentation.

You should make sure the Build action for each image is set to Embedded Resource.

Then, if you want to use them in XAML, specify a MarkupExtension

[ContentProperty ("Source")]
public class ImageResourceExtension : IMarkupExtension
{
  public string Source { get; set; }

  public object ProvideValue (IServiceProvider serviceProvider)
  {
    if (Source == null)
    {
      return null;
    }
    // Do your translation lookup here, using whatever method you require
    var imageSource = ImageSource.FromResource(Source);

    return imageSource;
  }
}

You should then be able to use your images like this.

<?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">
  <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
    <!-- use a custom Markup Extension -->
    <Image Source="{local:ImageResource WorkingWithImages.beach.jpg}" />
  </StackLayout>
</ContentPage>

Like mentioned in the comments, if you want this to work out of the box place them in the Resources folder of your respective platform project. This way you can also leverage the auto sizing mechanisms that are in place. To read more on this method see this page.

By adding them with the right naming convention in the right folder, you can simply refer to the filename and Xamarin.Forms will translate that to the right format for the platform.