Xamarin ListView not displaying any data

Question

I have a problem where I'm trying to display data inside a ListView in my app when binding a list of data to my ListView in XAML. The ListView does not populate with any data at all.

Here is all my coding:

My Code-behind

public ObservableCollection<RandomList> randomList = new ObservableCollection<RandomList>();

public App()
{
    MainPage = new MainUI();

    randomList.Add(new RandomList { Name = "Susan", Surname = "Potgieter", School = "Oosterlig" });
    randomList.Add(new RandomList { Name = "Jonathan", Surname = "Visagie", School = "Elspark" });
    randomList.Add(new RandomList { Name = "Gerhard", Surname = "Vermaak", School = "E.G. Jansen" });
    randomList.Add(new RandomList { Name = "Kobus", Surname = "Jacobs", School = "Oosterlig" });          
}

My XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="RandomTest.MainUI">
  <StackLayout Padding="0,40,0,0">
    <Label Text="Hello" VerticalOptions="Center" HorizontalOptions="Center" />
    <Button x:Name="btnGetStudents" Text="Get Students"/>
    <ListView x:Name="lwStudents" ItemsSource="{Binding randomList}">
      <ListView.ItemTemplate>
        <DataTemplate>
          <TextCell Text="{Binding Name}" Detail="{Binding Surname}"/>
        </DataTemplate>
      </ListView.ItemTemplate> 
    </ListView>
  </StackLayout>
</ContentPage>

When I insert a breakpoint in my code behind where I add the dummy data to the list, I can then see in my XAML here: <ListView x:Name="lwStudents" ItemsSource="{Binding randomList}"> that there are 4 items in my randomList.

The problem is that there is no data in the two bindings below:

<TextCell Text="{Binding Name}" Detail="{Binding Surname}"/>

Can someone please tell or show me what I'm doing wrong in my binding? Or if you need ANY more info or code, please ask! I will be happy to give more info. :)

EDIT

I've updated my RandomList class and implemented INotifyPropertyChanged, but I still can't get my data to load in my ListView through XAML bindings.

using System.ComponentModel;

namespace RandomTest
{
    public class RandomList : INotifyPropertyChanged
    {
        public int Id { get; set; }

        string _name;
        public string Name
        {
            get { return _name; }
            set
            {
                if (_name != value)
                    _name = value;
                OnPropertyChanged("Name");
            }
        }

        string _surname;
        public string Surname
        {
            get { return _surname; }
            set
            {
                if (_surname != value)
                    _surname = value;
                OnPropertyChanged("Surname");
            }
        }

        string _school;
        public string School
        {
            get { return _school; }
            set
            {
                if (_school != value)
                    _school = value;
                OnPropertyChanged("School");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

EDIT 2

This is how my MainUI.xaml.cs page looks like at the moment:

public partial class MainUI : ContentPage
{
    public MainUI()
    {
        InitializeComponent();
        BindingContext = new MainUIModel();

        MainUIModel mainUIModel = (MainUIModel)this.BindingContext;
        mainUIModel.randomList.Add(new RandomList { Name = "Susan", Surname = "Potgieter", School = "Oosterlig" });
        mainUIModel.randomList.Add(new RandomList { Name = "Jonathan", Surname = "Visagie", School = "Elspark" });
        mainUIModel.randomList.Add(new RandomList { Name = "Gerhard", Surname = "Vermaak", School = "E.G. Jansen" });
        mainUIModel.randomList.Add(new RandomList { Name = "Kobus", Surname = "Jacobs", School = "Oosterlig" });
    }
}

Answer 1

Really all you needed to do was make sure the ObservableCollection had a public getter. Then you could just set BindingContext = this and you could access this on the UI. But as always, there are many many ways to skin these kittens.

Answer 2

Create a model MainUIModel

public class MainUIModel : INotifyPropertyChanged
{
    ObservableCollection<RandomList> _randomList;
    public ObservableCollection<RandomList> randomList
    {
        get { return _randomList; }
        set
        {
            if (_randomList != value)
                _randomList = value;
            OnPropertyChanged("randomList");
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;
    void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

And then in your MainUI Page set the binding context just after initialize component.

BindingContext = new MainUIModel();

The binding randomList in your Xaml will refer to this new created model, and your Name, Surname will refer to the list model. Both binding context are different. You can add your data by using the below code.

MainUIModel mainUIModel = (MainUIModel)this.BindingContext;
mainUIModel.randomList=new ObservableCollection<RandomList>();
    mainUIModel.randomList.Add(new RandomList { Name = "Susan", Surname = "Potgieter", School = "Oosterlig" });
    mainUIModel.randomList.Add(new RandomList { Name = "Jonathan", Surname = "Visagie", School = "Elspark" });
    mainUIModel.randomList.Add(new RandomList { Name = "Gerhard", Surname = "Vermaak", School = "E.G. Jansen" });
    mainUIModel.randomList.Add(new RandomList { Name = "Kobus", Surname = "Jacobs", School = "Oosterlig" });