Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Binding image source dynamically on xamarin forms

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.

like image 653
Mr. Developer Avatar asked Apr 11 '17 10:04

Mr. Developer


People also ask

How do you bind an image source in Xamarin forms?

In Xamarin. Forms SfAvatarView, you can set the key for ImageSource by using ResourceDictionary and bind image from ViewModel to ImageSource. An ImageSource instance, can be either File, Uri or Resource, which sets the image to display.

How do you bind an object in Xamarin form?

The binding references the source object. To set the data binding, use the following two members of the target class: The BindingContext property specifies the source object. The SetBinding method specifies the target property and source property.

How does binding work in Xamarin forms?

Data binding is the technique of linking properties of two objects so that changes in one property are automatically reflected in the other property. Data binding is an integral part of the Model-View-ViewModel (MVVM) application architecture.

What is two way binding in Xamarin forms?

However, the default binding mode for the Value property of Slider is TwoWay . This means that when the Value property is a data-binding target, then the target is set from the source (as usual) but the source is also set from the target. This is what allows the Slider to be set from the initial Opacity value.


Video Answer


2 Answers

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.

EDIT2, much later: In case it's not obvious, "prefix", "suffix" are just random strings, SomeImage just has to return the path of your image. SomeImage and OtherProperty are members of your view model class, OtherProperty is just something you're basing your image name on (because if you know the whole name in advance, you don't need this question).

like image 118
Maverick Avatar answered Sep 21 '22 03:09

Maverick


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.

like image 21
Emad Avatar answered Sep 21 '22 03:09

Emad