Implementing INotifyPropertyChanged

Introduction

If an object implements the INotifyPropertyChanged interface, it’ll raise a property changed event when its property changes. Let's create a sample application to know how we can implement the INotifyPropertyChanged Interface. I am creating a Silverlight application which demonstrates data binding with both an object implementing INotifyPropertyChanged and also a normal DependencyProperty.

• Open Visual Studio and select a new Silverlight application.
• Create a class named Customer in the Silverlight project and implement INotifyPropertyChanged.

  public class Customer : INotifyPropertyChanged
  {

• Define the INotifyPropertyChanged members:

  public event PropertyChangedEventHandler PropertyChanged;
  
  public void OnPropertyChanged(PropertyChangedEventArgs e)
  {
     if (PropertyChanged != null)
     {
        PropertyChanged(this, e);
     }
  }

• In the property setter, invoke OnPropertyChanged by passing a property name like:

  private string _Name;
  
  public string Name
  {
    get
    {
       return _Name;
    }
    set
    {
       _Name = value;
       OnPropertyChanged(new PropertyChangedEventArgs("Name"));
    }
  }

• In MainPage.xaml.cs, add an ObservableCollection of Customer objects as a Dependency Property in order to make sure that the UI is updating while we assigning the customer list to another list or object. If we are making it as a normal property, the UI will update only if we add a new object to the customer list or if any change occurs to the underlying properties.

  public ObservableCollection<Customer> CustomerList
  {
    get { return (ObservableCollection<Customer>)
         GetValue(CustomerListProperty); }
    set { SetValue(CustomerListProperty, value); }
  }
  
  // Using a DependencyProperty as the backing store for MyProperty.
  This enables animation, styling, binding, etc...
  public static readonly DependencyProperty CustomerListProperty =
  DependencyProperty.Register("CustomerList",
  typeof(ObservableCollection<Customer>), typeof(MainPage),
      new PropertyMetadata(new ObservableCollection<Customer>()));

• I also added a DependencyProperty, FirstName, in MainPage.xaml.cs just to show the binding of a simple DependencyProperty.

  public string FirstName
  {
    get { return (string)GetValue(FirstNameProperty); }
    set { SetValue(FirstNameProperty, value); }
  }
  
  // Using a DependencyProperty as the backing store for MyProperty.
  This enables animation, styling, binding, etc...
  public static readonly DependencyProperty FirstNameProperty =
    DependencyProperty.Register("FirstName", typeof(string), typeof(MainPage),
    new PropertyMetadata(string.Empty)); 

• In MainPage.XAML, add a DataGrid and TextBox and bind them to the ObservableCollection and DependencyProperty, respectively.

  <data:DataGrid AutoGenerateColumns="True"
     Width="400"
     Height="300"
     ItemsSource="{Binding ElementName=TestUC,
                                  Path=CustomerList}">
  </data:DataGrid>
  <TextBox x:Name="NameTextBox"
     Text="{Binding ElementName=TestUC, Path=FirstName, Mode=TwoWay}"
     Width="100"
     Height="25"
     Margin="0,10,0,10" />

• For understanding the PropertyChanged event, I added a button and just updated the Customer object in the Click event so that you can see the changes in the DataGrid. When you change a property of the Customer object from the Click event, you can see that the UI is updating accordingly.
• Download Sample application from Implementing INotifyPropertyChanged.