Bound DataGrid not updating on collection change

Question

I am a noob for the WPF. Hope i can find answer.

For example, I have an List<Customer>, and it is binded to dataGrid. If i add a new Customer to the list, and i don't see the datagrid add a new row there.

<DataGrid ItemsSource="{Binding Customers}" AutoGenerateColumns="False" Height="318">
    <DataGrid.Columns>
        <DataGridTextColumn Header="First Name" Binding="{Binding FirstName, Mode=TwoWay}" />
        <DataGridTemplateColumn Header="Image" Width="SizeToCells" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image Height="80" Source="{Binding Image,Mode=TwoWay}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
using System.Windows.Data;

namespace DataGrid
{
    public class MainWindowViewModel
    {
        public ICollectionView Customers { get; private set; }
        public ICollectionView GroupedCustomers { get; private set; }
        public List<Customer> _customers { get; set; }

        public MainWindowViewModel()
        {
            _customers = new List<Customer>
                             {
                                 new Customer
                                     {
                                         FirstName = "Christian",
                                         LastName = "Moser",
                                         Gender = Gender.Male,
                                         WebSite = new Uri("http://www.wpftutorial.net"),
                                         ReceiveNewsletter = true,
                                         Image = "Images/christian.jpg"
                                     },
                                 new Customer
                                     {
                                         FirstName = "Peter",
                                         LastName = "Meyer",
                                         Gender = Gender.Male,
                                         WebSite = new Uri("http://www.petermeyer.com"),
                                         Image = "Images/peter.jpg"
                                     },
                                 new Customer
                                     {
                                         FirstName = "Lisa",
                                         LastName = "Simpson",
                                         Gender = Gender.Female,
                                         WebSite = new Uri("http://www.thesimpsons.com"),
                                         Image = "Images/lisa.jpg"
                                     },
                                 new Customer
                                     {
                                         FirstName = "Betty",
                                         LastName = "Bossy",
                                         Gender = Gender.Female,
                                         WebSite = new Uri("http://www.bettybossy.ch"),
                                         Image = "Images/betty.jpg"
                                     }
                             };
            Customers = CollectionViewSource.GetDefaultView(_customers);
            GroupedCustomers = new ListCollectionView(_customers);
            GroupedCustomers.GroupDescriptions.Add(new PropertyGroupDescription("Gender"));         
        }
    }
}

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;
using System.Reflection;

namespace DataGrid
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private new MainWindowViewModel view { get; set; }
        public MainWindow()
        {
            InitializeComponent();
            view = new MainWindowViewModel();
            DataContext = view;
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            view._customers.Add(new Customer
                                {
                                    FirstName = "Lei",
                                    LastName = "Moser",
                                    Gender = Gender.Male,
                                    WebSite = new Uri("http://www.wpftutorial.net"),
                                    ReceiveNewsletter = true,
                                    Image = "Images/christian.jpg"
                                });
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;

namespace DataGrid
{    
    public enum Gender
    {
        Male, 
        Female
    }

    public class Customer : INotifyPropertyChanged
    {
        private string _firstName;
        private string _lastName;
        private Gender _gender;
        private Uri _webSite;
        private bool _newsletter;
        private string _image;

        public string FirstName
        {
            get { return _firstName; }
            set 
            {
                _firstName = value;
                NotifyPropertyChanged("FirstName");
            }
        }

        public string LastName
        {
            get { return _lastName; }
            set
            {
                _lastName = value;
                NotifyPropertyChanged("LastName");
            }
        }

        public Gender Gender
        {
            get { return _gender; }
            set
            {
                _gender = value;
                NotifyPropertyChanged("Gender");
            }
        }

        public Uri WebSite
        {
            get { return _webSite; }
            set
            {
                _webSite = value;
                NotifyPropertyChanged("WebSite");
            }
        }

        public bool ReceiveNewsletter
        {
            get { return _newsletter; }
            set
            {
                _newsletter = value;
                NotifyPropertyChanged("Newsletter");
            }
        }

        public string Image
        {
            get { return _image; }
            set
            {
                _image = value;
                NotifyPropertyChanged("Image");
            }
        }

        #region INotifyPropertyChanged Members
        public event PropertyChangedEventHandler PropertyChanged;
        #endregion

        #region Private Helpers
        private void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        #endregion
    }
}

I set the bindingMode to TwoWay and I have a button_onClick and just add a new customers to the binded list, but the thing i don't see Datagrid add a new row for it.
Can anyone help?

Answer 1

The problem is that List<T> does not implement INotifyCollectionChanged. Without that, nothing tells WPF that a new item has been added.

The best option here is to change your class to use ObservableCollection<T> instead of List<T>. This will cause WPF to automatically be notified whenever items are added or removed from the collection, and it will update appropriately.

Answer 2

Your List object is probably not inheriting from INotiftyPropertyChanged and so its not telling your program to update the object.

If you could post some code we might be able to determine if that is the case or what is causing the problem.