Why won't my C# code add to a list and display it?

Question

I'm trying to teach myself C# but am having trouble with this code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            contacts.Add(new Contact()
                {
                Name = "James",
                Email = "james@mail.com",
                PhoneNumber = "01234 111111"
            });
            contacts.Add(new Contact()
            {
                Name = "Bob",
                Email = "bob@mail.com",
                PhoneNumber = "01234 222222"
            });
            contacts.Add(new Contact()
            {
                Name = "Emma",
                Email = "emma@mail.com",
                PhoneNumber = "01234 333333"
            });
        }
        protected List<Contact>  contacts = new List<Contact>();

        public List<Contact> Contacts
        {
            get { return  contacts; }
            set {  contacts = value; }
        }

        private void NewContactButton_Click(object sender, RoutedEventArgs e)
        {
            contacts.Add(new Contact()
            {
                Name = NameTextBox.Text,
                Email = EmailTextBox.Text,
                PhoneNumber = PhoneTextBox.Text
            });
        }

        }

    }

It's not displaying the new contact in the list, and I'm not sure if it is creating the new contact. It displays the first three perfectly fine.

I have a feeling I'm leaving out something important.

Answer 1

Change

   protected List<Contact>  contacts = new List<Contact>();

    public List<Contact> Contacts
    {
        get { return  contacts; }
        set {  contacts = value; }
    }

to

protected ObservableCollection<Contact> contacts = new ObservableCollection<Contact>();

public ObservableCollection<Contact> Contacts
{
    get { return contacts; }
    set { contacts = value; }
}

and add using System.Collections.ObjectModel; to the top of the code.

and make the required changes to the rest of the code.

Answer 2

Use the code as mentioned below, it will work:

public MainWindow()
    {
        InitializeComponent();
        dgContacts.ItemsSource = Contacts;
    }

    private void btnClick_Click(object sender, RoutedEventArgs e)
    {
        Contacts.Add(new contact()
        {
            Name = "Person",
            Email = "Person Address",
            PhoneNumber = "Person Ph"
        });

    }

    protected ObservableCollection<contact> contacts = new ObservableCollection<contact>();

    public ObservableCollection<contact> Contacts
    {
        get { return contacts; }
        set { contacts = value; }
    }

and the xaml of this code will be:

<DataGrid Name="dgContacts" Margin="5" AutoGenerateColumns="True" ItemsSource="{Binding}"></DataGrid>

The main part of WPF is binding, if you do the binding properly it will create magic for you. If this code works for you; I will show you another way to bind it.