What's the concept behind INotifyPropertyChanged?

Question

Hello,

All the examples of Silverlight using MVVM use interface named IPropertyChanged. What is the concept behind it and why do we need to raise an event whenever we set some value?

Eg:-

public class UserNPC:INotifyPropertyChanged
{
    private string name;
    public string Name { 
        get { return name; } 
        set { name = value; onPropertyChanged(this, "Name"); } 
    }
    public int grade;
    public int Grade { 
        get { return grade; } 
        set { grade = value; onPropertyChanged(this, "Grade"); } 
    }

    // Declare the PropertyChanged event
    public event PropertyChangedEventHandler PropertyChanged;

    // OnPropertyChanged will raise the PropertyChanged event passing the
    // source property that is being updated.
    private void onPropertyChanged(object sender, string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            PropertyChanged(sender, new PropertyChangedEventArgs(propertyName));
        }
    }
}

What is the exact purpose of INotifyPropertyChanged?

Answer 1

Most Silverlight controls listen out for changes to the data they display by simply subscribing to the PropertyChanged events.

e.g. the control does something like this behind the scenes:

    public void Loaded()
    {
        if (myDataObject is INotifyPropertyChanged)
        {
            (myDataObject as INotifyPropertyChanged).PropertyChanged +=new PropertyChangedEventHandler(onPropertyChanged);
        }
    }

That is also why ObservableCollection is used instead of simpler Lists in Silverlight Apps. They implement INotifyPropertyChanged so controls that display collections are able to see changes occurring to the list as well as to individual items in a list.

Answer 2

MVVM in WPF & Silverlight is implemented by binding UI elements to the view model. When the view model changes, though, how will the UI know to update itself?

INotifyPropertyChanged simply exposes an event to which the UI can "listen," so when a control "hears" that the property to which it is bound has changed, it can "update itself."

For example, say you have a TextBlock that shows a stock price, and it is bound to the string Price property of a view model. The view model, in turn, uses a service to update stock prices every 30 seconds. So, every 30 seconds the Price property changes: 30 seconds ago it was "$29.20" now it is "$29.12" and 30 seconds from now it will be "$28.10". The TextBlock binding is applied when the TextBlock is loaded, but not every time the Price changes. If, however, you implement INotifyPropertyChanged and raise the event for property "Price" in the Price setter, then the TextBlock can wire into the event and thereby "know" when to go back and "re-read" the Price property and update the displayed text.

Answer 3

You have the following dependencies:

View --> Binding --> Model

Now, the concept is as following:

If some data in your Model object changes, you are required to raise the PropertyChanged event. Why? Because the Binding object has registered a method with the data objects PropertyChanged event.

So all you have to do when something changes within your Model object is to raise the event and you are done.

When you do that, the Binding object gets notified about the change through your event. The Binding object in turn lets the View object know that something happened. The View object then can update the UI if necessary.

Code example

Here you have a compilable example. Set a few breakpoints, step through the code with F11 and see what happens behind the scenes. Note that this example has the following dependency: View --> Model. I left out the Binding object.

using System;
using System.ComponentModel;

namespace INotifyPropertyChangedDemo
{
    class Program
    {
        static void Main(string[] args)
        {
            // Create 2 listeners.
            View1 view1 = new View1();
            View2 view2 = new View2();

            // Create 1 data object.
            Model model = new Model();

            // Connect listener with data object.
            model.PropertyChanged += new PropertyChangedEventHandler(view1.MyPropertyChangedEventHandler);
            model.PropertyChanged += new PropertyChangedEventHandler(view2.MyPropertyChangedEventHandler);

            // Let data object publish change notification.
            model.FirstName = "new name";

            // Check whether all listeners got notified.
            // ... via console.
        }

        public class Model : INotifyPropertyChanged
        {
            public event PropertyChangedEventHandler PropertyChanged;

            private string firstName;
            public string FirstName
            {
                get { return firstName; }
                set
                {
                    if (firstName != value)
                    {
                        firstName = value;
                        if (PropertyChanged != null)
                        {
                            PropertyChanged(this, new PropertyChangedEventArgs("FirstName"));
                        }
                    }
                }
            }
        }

        public class View1
        {
            public void MyPropertyChangedEventHandler(object source, PropertyChangedEventArgs arg)
            {
                Console.WriteLine("Listener 1: Changed Property: {0}", arg.PropertyName);
                string newValue = ((Model) source).FirstName;
                Console.WriteLine("Listener 1: Changed Property Value: {0}", newValue);
            }
        }

        public class View2
        {
            public void MyPropertyChangedEventHandler(object source, PropertyChangedEventArgs arg)
            {
                Console.WriteLine("Listener 2: Changed Property: {0}", arg.PropertyName);
                string newValue = ((Model)source).FirstName;
                Console.WriteLine("Listener 2: Changed Property Value: {0}", newValue);
            }
        }
    }
}