How to bind image and text in the listview?

1 min read

Listview allows you to display the image and text by binding them. This will automatically refresh UI when the underlying property is changed at runtime.

Create a data model to bind to the control and implement the INotifyPropertyChanged event handler to notify the property value changes at runtime.

 
  public class ListViewContactsInfo : INotifyPropertyChanged
{
    #region Fields
 
    private string contactName;
    private string contactNo;
    private ImageSource image;
    private string contactType;
 
    #endregion
 
    #region Public Properties
 
    public string ContactName
    {
        get { return this.contactName; }
        set
        {
            this.contactName = value;
            RaisePropertyChanged("ContactName");
        }
    }
 
    public string ContactNumber
    {
        get { return contactNo; }
        set
        {
            this.contactNo = value;
            RaisePropertyChanged("ContactNumber");
        }
    }
 
    public string ContactType
    {
        get { return contactType; }
        set
        {
            this.contactType = value;
            RaisePropertyChanged("ContactType");
        }
    }
 
    public ImageSource ContactImage
    {
        get { return this.image; }
        set
        {
            this.image = value;
            this.RaisePropertyChanged("ContactImage");
        }
    }
 
    #endregion
 
    #region INotifyPropertyChanged implementation
 
    public event PropertyChangedEventHandler PropertyChanged;
 
    private void RaisePropertyChanged(String name)
    {
        if (PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(name));
    }
 
    #endregion
}

Create a model class collection property in view model and populate the data objects.

 
public class ListViewGroupingViewModel
{
    #region Fields
 
    private ObservableCollection<ListViewContactsInfo> contactsInfo;
 
    #endregion
 
    #region Constructor
 
    public ListViewGroupingViewModel()
    {
        GenerateSource();
    }
 
    #endregion
 
    #region Properties
 
    public ObservableCollection<ListViewContactsInfo> ContactsInfo
    {
        get { return contactsInfo; }
        set { this.contactsInfo = value; }
    }
 
    #endregion
 
    #region ItemSource
 
    public void GenerateSource()
    {
        ContactsInfo = new ObservableCollection<ListViewContactsInfo>();
        Assembly assembly = typeof(GroupingPage).GetTypeInfo().Assembly;
        Random random = new Random();
        for (int i = 0; i < CustomerNames.Count(); i++)
        {
            var details = new ListViewContactsInfo()
            {
                ContactType = contactType[random.Next(0, 5)],
                ContactNumber = random.Next(100, 400).ToString() + "-" + random.Next(500, 800).ToString() + "-" + random.Next(1000, 2000).ToString(),
                ContactName = CustomerNames[i],
                ContactImage = ImageSource.FromResource("Grouping.Images.Image" + random.Next(0, 28) + ".png", assembly),
            };
            ContactsInfo.Add(details);
        }
    }
 
    #endregion
}

xaml

<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms">
    <syncfusion:SfListView x:Name="listView" 
                           ItemsSource="{Binding ContactsInfo}"
                           ItemSize="70">
        <syncfusion:SfListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Image Source="{Binding ContactImage}" 
                           Aspect="AspectFill"/>
                    <Label LineBreakMode="NoWrap"
                           Text="{Binding ContactName}"/>
                    <Label LineBreakMode="NoWrap"
                           Text="{Binding ContactNumber}"/>
                    <Label LineBreakMode="NoWrap"
                           Text="{Binding ContactType}"/>
                </Grid>
            </DataTemplate>
        </syncfusion:SfListView.ItemTemplate>
    </syncfusion:SfListView>
</ContentPage>

How to bind image and text in the listview?

Access denied