Images not showing in listview

Question

I am new to Android and am having problems getting examples to do what they do in the book I referencing.

The main gist of the problem is I am building an application that is supposed to show images and some text in a ListView. The text shows up but not the images. I originally just put the filename in quotes in ListItem classes Source property.

I am trying to reference the drawable directory of Resources but am not having any success accessing it.

Here is the code

    using System;
    using System.Collections.Generic;
    using System.Text;

    using Android.App;
    using Android.Content.PM;
    using Android.OS;
    using Android.Runtime;
    using Android.Views;
    using Android.Widget;

    using Xamarin.Forms;

    namespace ListViewExample
    {
         public class ListItem
        {
            public string Source { get; set; }
            public string Title { get; set; }
            public string Description { get; set; }
            public string Price { get; set; }
        }

        public class ListViewCustom : ContentPage
        {
            public ListViewCustom()
            {
                ListView listView = new ListView();
                listView.ItemsSource = new ListItem[]
                {new ListItem{Source=Resource.first.png,Title="First",Description="1st item", Price="$100.00" },
                 new ListItem{Source=Resource.second.png,Title="Second",Description="2nd item", Price="$200.00" },
                new ListItem{Source=Resource.third.png,Title="Third",Description="3rd item", Price="$300.00" }
               };

                listView.ItemTemplate = new DataTemplate(typeof(ImageCell));
                listView.ItemTemplate.SetBinding        (ImageCell.ImageSourceProperty, "Source");
                listView.ItemTemplate.SetBinding(ImageCell.TextProperty, "Title");
                listView.ItemTemplate.SetBinding(ImageCell.DetailProperty, "Description");
                listView.RowHeight = 80;
                listView.BackgroundColor = Color.Black;
                listView.ItemTemplate = new DataTemplate(typeof(ListItemCell));
                Content = listView;

                listView.ItemTapped += async (sender, e) =>
                {
                    ListItem item = (ListItem)e.Item;
                    await DisplayAlert("Tapped", item.Title.ToString(), " was selected.", "OK");
                    ((ListView)sender).SelectedItem = null;
                };
            }
        }

        public class ListItemCell : ViewCell
        {
            public ListItemCell()
            {
                Image image = new Image()
                {
                    HorizontalOptions = LayoutOptions.FillAndExpand
                };

                StackLayout imageLayout = new StackLayout()
                {
                    HorizontalOptions = LayoutOptions.FillAndExpand,
                    Children =
                    {image}
                };

                Label titleLabel = new Label()
                {
                    HorizontalOptions = LayoutOptions.FillAndExpand,
                    FontSize = 25,
                    WidthRequest = 100,
                    FontAttributes = Xamarin.Forms.FontAttributes.Bold,
                    TextColor = Color.White
                };
                titleLabel.SetBinding(Label.TextProperty, "Title");

                Label descLabel = new Label()
                {
                    HorizontalOptions = LayoutOptions.FillAndExpand,
                    FontSize = 12,
                    WidthRequest = 100,
                    TextColor = Color.White
                };
                descLabel.SetBinding(Label.TextProperty, "Description");

                StackLayout viewLayoutItem = new StackLayout()
                {
                    HorizontalOptions = LayoutOptions.StartAndExpand,
                    Orientation = StackOrientation.Vertical,
                    Padding = new Thickness(10, 0, 50, 10),
                    Children =
                    {
                        imageLayout,
                        titleLabel,
                        descLabel
                    }
                };

                Label priceLabel = new Label()
                {
                    HorizontalOptions = LayoutOptions.FillAndExpand,
                    FontSize = 25,
                    FontAttributes = Xamarin.Forms.FontAttributes.Bold,
                    TextColor = Color.Aqua
                };
                priceLabel.SetBinding(Label.TextProperty, "Price");

                StackLayout viewLayout = new StackLayout()
                {
                    HorizontalOptions = LayoutOptions.StartAndExpand,
                    Orientation = StackOrientation.Horizontal,
                    Padding = new Thickness(25, 10, 55, 15),
                    Children =
                    {
                        viewLayoutItem,
                        priceLabel
                    }
                };

                View = viewLayout;
            }
        }
    }

Any help on this is greatly appreciated. It's probably something stupid, but like I said I am new to Android

*Edit (adding this as an edit for the OP who posted it as a answer after comments under hvaughan3's answer):

Well, I can't show the code here as it is too long for a comment. Basically the error is either of these to statements in MainActivity.cs

global::Xamarin.Forms.Forms.Init (this, bundle);
LoadApplication (newListViewExample.App ())

I haven't done anything to the file, so I am a bit confused as why I am getting the error. I even tried recreating the project. Same results.

PS: In answer to hvaughan3, the images are located in the Resources\drawable directory. And yes I did change the listview.itemssource statement to just have double quotes.

Answer 1

Quite a few issues that I can see here. Based on the issues you are having, I would first highly recommend that you work through (not just read) the Xamarin Form's Binding Docs.

In the code you posted, you are setting the ListView.ItemTemplate 5 times, that property can only be set or bound a single time. You assign something to it 2 times (listView.ItemTemplate = ...) and you try binding something to it 3 times (listView.SetBinding()). Each time, it is overwriting the previous one.

So my first suggestion is to just stick with the very last assignment:

listView.ItemTemplate = new DataTemplate(typeof(ListItemCell));

The next issue is that you are not binding anything to your ListItemCell's Image. You would want to do something like:

image.SetBinding(Image.SourceProperty, "Source");

Finally, when you declare your ListView.ItemSource you are setting each ListItem.Source but you are not enclosing the Resource.first.png in double quotes. Also, are the images named Resource.first.png or are they actually named first.png? If they are actually named first.png then you should set ListItem.Source to first.png instead.

Answer 2

Have you tried adding Source binding?

Image image = new Image()
{
  HorizontalOptions = LayoutOptions.FillAndExpand
};
//add this missing binding
image.SetBinding(Image.SourceProperty,"Source");