How to Bind an EmbeddedImage to a ListView? #Binding


I have a ListView on my page, that I bind to my ViewModel. The ItemTemplate is of the type 'ViewCell'

There's no problem with binding the Text. However, I can't manage to bind the 'ImageSourceProperty'.

I was wondering if anyone knew how to solve this problem

Here's some sourcecode:
<?xml version="1.0" encoding="utf-8"?>


<extensions:ImageSourceConverter x:Key="ImageSourceConverter" />


    <StackLayout Orientation="Vertical">

            ItemsSource="{Binding Values}"

                    <ViewCell Height="90">
                        <Grid Padding="9">
                                <RowDefinition Height="25" />
                                <RowDefinition Height="30" />
                                <RowDefinition Height="10" />
                                <ColumnDefinition Width="120" />
                                <ColumnDefinition Width="150" />

<!--                                   Without Binding it works like this, but then there is the same picture in every row-->

<!--                            <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" HorizontalOptions="Start"-->
<!--                                   VerticalOptions="EndAndExpand"-->
<!--                                   Source="{extensions:ImageResource}" />-->                              

                           <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" HorizontalOptions="Start"
                                   Source="{extensions:ImageResource Binding convert={StaticResource ImageSourceConverter}}" />  



        <!--        <StackLayout Orientation="Horizontal">-->
        <!--        </StackLayout>-->


This is the ImageResourceExtension

    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;

This is the ImageSourceConverter

public class ImageSourceConverter : IValueConverter
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            string source = value as string;
            if (source == null || string.IsNullOrWhiteSpace(source))
                return null;

            return ImageSource.FromResource(source);

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            throw new NotImplementedException();

And this is my ViewModel:

 public class StartPageViewModel : INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;
        public ObservableCollection<StartPageModel> Values { get; set; }

        public ObservableCollection<StartPageModel> SetListViewModel(IList<Country> list)
            Values = new ObservableCollection<StartPageModel>();

            foreach (var country in list)
                Values.Add(new StartPageModel
                    Name =,
                    Capital =,
                    Image = ""    // this is just for example later there is a different png for each row !!


            return Values;

        protected virtual void OnPropertyChanged(string propertyName)
            if (PropertyChanged != null)
                    new PropertyChangedEventArgs(propertyName));

Thanks in advance



  • g7310969g7310969 USMember

    Solved it with the following change in the Image Source in Xaml

    <Image Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" HorizontalOptions="Start"
                           Source="{Binding Image, Converter={StaticResource ImageSourceConverter}}" />
Sign In or Register to comment.