Friday, August 14, 2009

Implementing INotifyPropertyChanged

If an object implementing INotifyPropertyChanged Interface it’ll raise a property changed event when its property changes.Lets create a sample application to know how we can implement INotifyPropertyChanged Interface. I am creating a Silverlight application which demonstrates the 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 INotifyPropertyChanged Members,
public event PropertyChangedEventHandler PropertyChanged;

public void OnPropertyChanged(PropertyChangedEventArgs e)
{
   if (PropertyChanged != null)
   {
     PropertyChanged(this, e);
   }
}
  • In property setter invoke OnPropertyChanged by passing 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 object as Dependency
    property inorder to make sure that UI is updating while we assigning that customer list
    to another list or object.If we are making it as a normal property UI will update only if
    we add new object to customerlist or 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 it to the ObservableCollection and DependencyProperty respectively.
<data:DataGrid AutoGenerateColumns="True"
 Width="400"
 Height="300"
 ItemsSource="{Binding ElementName=TestUC,
                                Path=CustomerList}"/>
<TextBox x:Name="NameTextBox"
Text="{Binding ElementName=TestUC, Path=FirstName, Mode=TwoWay}"
Width="100"
Height="25"
Margin="0,10,0,10" />
  • For Understanding PropertyChanged event, I added a button and just updating the customer object in the click event so that you can see the changes in the datagrid.When you change the property of Customer object from click event you can see that the UI is updating accordingly.
  • Download Sample Application.