How to Bind an EmbeddedImage to a ListView? #Binding

Hi,

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:
Xaml
<?xml version="1.0" encoding="utf-8"?>

<ContentPage.Resources>

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

</ContentPage.Resources>

    <StackLayout Orientation="Vertical">

        <ListView
            ItemsSource="{Binding Values}"
            ItemTapped="List_OnItemTapped"
            HasUnevenRows="True">

            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell Height="90">
                        <Grid Padding="9">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="25" />
                                <RowDefinition Height="30" />
                                <RowDefinition Height="10" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="120" />
                                <ColumnDefinition Width="150" />
                            </Grid.ColumnDefinitions>

<!--                                   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 WorldCountries.Flags.ao.png}" />-->                              

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

                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>

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

</ContentPage>

This is the ImageResourceExtension

  [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;
        }
    }

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 = country.name,
                    Capital = country.capital,
                    Image = "WorldCountries.Flags.ao.png"    // this is just for example later there is a different png for each row !!

                });
            }
            OnPropertyChanged("Values");

            return Values;
        }

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

Thanks in advance

Michael

Answers

  • 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"
                           VerticalOptions="EndAndExpand"
                           Source="{Binding Image, Converter={StaticResource ImageSourceConverter}}" />
    
Sign In or Register to comment.