Xamarin ListView is empty or doesn't get filled

Question

I have a problem. I created a ContentPage with a ListView like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="MyApp.HomePage">
    <ContentPage.Content>
        <StackLayout>
            <ListView x:Name="ListViewMain">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Label Text="Employee Name" Grid.Column="1" Grid.Row="0" HorizontalOptions="Start"/>
                                <Image Source="VoteUp.png" VerticalOptions="End" Grid.Row="1" Grid.Column="0"/>
                                <Image Source="VoteDown.png" VerticalOptions="Start" Grid.Row="2" Grid.Column="0"/>
                                <Image Source="{Binding image}" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" BackgroundColor="AliceBlue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
                                <Image Source="Favorite.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="Start"/>
                                <Image Source="Send.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="End"/>
                                <Image Source="Save.png" Grid.Row="3" Grid.Column="2" HorizontalOptions="End"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Here is the page constructor:

public HomePage()
{
    InitializeComponent();
    ListViewMain.ItemTemplate = new DataTemplate(typeof(CustomViewCell));
}

And here is the CustomViewCell:

public class CustomViewCell: ViewCell
{
    public CustomViewCell()
    {
        //instantiate each of our views
        var image = new Image();
        image.SetBinding(Image.SourceProperty, "Example_Image.jpg");
    }
}

I added all the icon images to the drawable folder in the android path, but when I launch the app, the whole page is blank and there is no picture at all. What am I doing wrong?

EDIT

Now I have added a ListSource to the ListView, but my result is very small:

How can I make the row WAY bigger?

Answer 1

As jason said, I didn't see where is your data source, CustomViewCell is the datetemplate, so you assign image value for image control, it still don't display, because ListView control is the collection control, you should assign one collection for it.

Doing one sample, you can take a look:

 public class CustomViewCell : ViewCell
{
   public CustomViewCell()
    {
        //instantiate each of our views

        var image = new Image() { WidthRequest = 30, HeightRequest = 30 };

        var verticaLayout = new StackLayout();


        //set bindings          
        image.SetBinding(Image.SourceProperty, new Binding("Image"));
        verticaLayout.Children.Add(image);

        // add to parent view

        View = verticaLayout;

        //var image = new Image() { WidthRequest=30,HeightRequest=30};
        //image.SetBinding(Image.SourceProperty, "check.png");
        //this.View = image;
    }


}

public class VeggieViewModel
{ 
    public string Image { get; set; }
}

public partial class Page13 : ContentPage
{
    public ObservableCollection<VeggieViewModel> veggies { get; set; }
    public Page13 ()
    {
        InitializeComponent ();

        veggies = new ObservableCollection<VeggieViewModel>();
        ListViewMain.RowHeight = 60;

        ListViewMain.ItemTemplate = new DataTemplate(typeof(CustomViewCell));
        veggies.Add(new VeggieViewModel { Image = "check.png" });

        veggies.Add(new VeggieViewModel {  Image = "facebook.png" });

        veggies.Add(new VeggieViewModel { Image = "icaon.png" });
        ListViewMain.ItemsSource = veggies;
    }
}

Answer 2

in CustomViewCell you create image but never assign it to the view hierarchy. You are also not setting the binding path correctly - you need to specify the name of a public property on your model

public CustomViewCell()
{
    //instantiate each of our views
    var image = new Image();
    image.SetBinding(Image.SourceProperty, "name_of_some_property");
    this.View = image;
}