Xamarin Forms - Change an image in a ListView depending on binding data

Question

We are trying to add functionality to a Xamarin Forms ListView where the image will change based on a particular value. The problem is that the image does not show, even if the value is the same as the model.

XAML Page:

.....

xmlns:images="clr-namespace:Cat;assembly=Cat"

....

<Image Grid.Row="0" Grid.RowSpan="3" Grid.Column="1"
    Style="{DynamicResource ListItemImageStyle}"
    HorizontalOptions="EndAndExpand"
    VerticalOptions="Center">
<Image.Triggers>
    <DataTrigger TargetType="Image"
                   Binding="{Binding Status}"
                   Value="Urgent">
         <Setter Property="Source" Value="{images:ImageResource Cat.about.png}" />
    </DataTrigger>
    <DataTrigger TargetType="Image"
                   Binding="{Binding Status}"
                   Value="B">
                   <Setter Property="Source" Value="{images:ImageResource Cat.new.png}" />
                   </DataTrigger>
</Image.Triggers>
</Image>

ImageResourceExtension CS File

 [Preserve(AllMembers = true)]
 [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;
    }
}

The image "about.png" is in the root of the same project.

The data is bound and displayed correctly, only the image isn't displaying.

I'm wondering if this is the best approach?

Alessandro Caliaro Alessandro Caliaro · Accepted Answer · 2017-11-23T16:01:00

I think

Value="{images:ImageResource Cat.new.png}"

is not correct. Take a look here...

Xamarin Forum

I think you should use something like

Value="{images:ImageResource CatMobile.Resources.MYNAME.png}"

You should also take a look to xamarin-forms/user-interface/images

I also added the images as "Embeded Resource" in the properties and this worked well.

Xamarin Forms - Change an image in a ListView depending on binding data

1 Answers