Xamarin - Using an image in a custom list view ViewCell

Question

I'm tying to create a custom ViewCell to use in a ListView like I've done many times before. However, this is the first time I've ever needed to use an image in a custom ViewCell and I'm not able to get it to work.

So I’ve got my model:

public class AttendedMeeting
{
public string Title { get; set; }
public string Date { get; set; }
public string Status { get; set; } 
public Image MeetingImage { get; set;}  
}

And in my custom ViewCell:

Label titleLabel = new Label();
titleLabel.SetBinding(Label.TextProperty, "Title");

Label dateLabel = new Label();
dateLabel.SetBinding(Label.TextProperty, "Date");

Label statusLabel = new Label();
statusLabel.SetBinding(Label.TextProperty, "Status");

Image meetingImage = new Image();
meetingImage.SetBinding(Image.SourceProperty, "MeetingImage");

Then in my page,I populate a list of objects like this:

        ListView meetingsListView = new ListView();

        Image imageCheck = new Image();
        imageCheck.Source = "Check.png";

        Image imageLine = new Image();
        imageLine.Source = "Line.png";

        Image imageCircle = new Image();
        imageCircle.Source = "Circle.png";


        meetingsListView.ItemsSource = new AttendedMeeting[] {
                            new AttendedMeeting {Title = "Meeting 1",
                                Date="Monday - May 16th 2016",
                                Status="Verified",
                                MeetingImage=imageCheck
                                                },
                new AttendedMeeting {Title = "Meeting 2",
                                Date="Monday - May 16th 2016",
                                Status="Verified",
                                MeetingImage=imageLine
                                                },
                new AttendedMeeting {Title = "Meeting 3",
                                Date="Monday - May 16th 2016",
                                Status="Verified",
                                MeetingImage=imageCheck
                                                },
                new AttendedMeeting {Title = "Meeting 4",
                                Date="Monday - May 16th 2016",
                                Status="Verified",
                                MeetingImage=imageCheck
                                                }
        };
        meetingsListView.ItemTemplate = new DataTemplate(typeof(CellMeetingsAttended));

Everything works fantastic EXCEPT the image. The labels populate just fine but the image is always blank on each item. Can anyone tell me what I’m doing wrong? I’ve also tried using a string rather than an Image() in the model and setting the image source using the string and have had no luck either. I’ve verified the resources are correct, I can display them as images outside of the ListView.

Thanks in advance.

Answer 1

Your problem is that you are trying to bind the complete Image object directly (is that intended?) when a string is expected, try this in stead:

new AttendedMeeting[] 

{
    new AttendedMeeting 
    {
        Title = "Meeting 1",
        Date = "Monday - May 16th 2016",
        Status = "Verified",
        MeetingImage = "Line.png"; //--Try this!
    },...

And in your model:

public class AttendedMeeting
{
    public string Title { get; set; }
    public string Date { get; set; }
    public string Status { get; set; }
    //Change this:
    public string MeetingImage { get; set;}  
}