Xamarin ListView isn't showing data

Question

I have a problem in which my ListView isn't showing any data. I'm trying to load ImageUrls (as text) in my ListView. My view (in .xaml) contains the following code in the StackLayout:

<?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:viewModels="clr-namespace:App.ViewModels"
    xmlns:abstractions="clr-namespace:RoundedBoxView.Forms.Plugin.Abstractions;assembly=RoundedBoxView.Forms.Plugin.Abstractions"
    xmlns:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize"
    x:Class="App.Views.ProductDetailView" >
<ContenPage.Content>
<StackLayout Spacing ="0" 
             BackgroundColor="White">
    <ListView ItemsSource="{Binding Images}" 
              HasUnevenRows="True">
                <ListView.ItemTemplate>
                    <DataTemplate>         
                        <ViewCell>
                            <StackLayout HorizontalOptions="Start" >
                                <Label x:Name="URRl" 
                                       Text="{Binding Url}" 
                                       TextColor="Navy" 
                                       FontSize="20"/>
                            </StackLayout>
                        </ViewCell>           
                    </DataTemplate>
               </ListView.ItemTemplate>
          </ListView>
        </StackLayout>

    </ContentPage.Content>
</ContentPage>

My ViewModel (.cs) is as followed:

public class ProductDetailViewModel : INotifyPropertyChanged
{
    //event
    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<ImageList> images;

    //The variables which are binded to the View.
    public ObservableCollection<ImageList> Images
    {
        get
        {
            return images;
        }
        set
        {
            if(images != value) 
            {
                images = value;
                foreach (ImageList il in images)
                    Console.WriteLine(il.Url);
                OnPropertyChanged();
            }    
        }
    }

    /// <summary>
    /// Initializes a new instance of the <see cref="T:App.ViewModels.ProductDetailViewModel"/> class.
    /// Listens for a message with the id of the product
    /// </summary>
    public ProductDetailViewModel(IRestService<ProductDetailsPhoto, ProductList> api)
    {
        //Images is being set here
    }


    /// <summary>
    /// Notify INotifyPropertyChanged with the propertyName
    /// </summary>
    /// <param name="propertyName">Property name of the changed Variabele</param>
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class ImageList 
{
    public string Url;

    public ImageList(string _url) 
    {
        Url = _url;
    }
}

The ProductDetailView's code behind

public partial class ProductDetailView : ContentPage 
{ 
    public ProductDetailView(int productID) 
    { 
        InitializeComponent(); 
        BindingContext = App.ProductDetailsVM; 
        MessagingCenter.Send(this, Constants.GET_PRODUCT_DETAILS, productID); 
    } 
}

I have tested my function that loads the data into Images. The Data is loaded in correctly.

Actual behavior: The View shows an empty list containing no data.

Expected behavior: A view that shows the Images URLs as text in a ListView.

Can anyone tell me what I'm doing wrong I my data binding or in my view? If you need some other code or got some other questions, please ask.

Answer 1

You cannot bind to a field. Change your Url field in your ImageList class to a property:

public class ImageList 
{
    public string Url {get; set;}

    public ImageList(string _url) {
        Url = _url;
    }
}