How to bind image and text in the listview?

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