Simple example for INotifyPropertyChanged

Data binding plays a vital role in developing applications with rich UI and neat coding. Data binding is the process that establishes a connection between the application UI(view) and main logic/business logic(i.e view model). Today let us discuss about some advanced concepts in data binding like INotifyPropertyChanged which is used in MVVM architecture. A interface which is used to update the UI with respect to the code using two way binding. Business logic/Main logic is the data which should be displayed on the UI and the also can be managed.

We can configure our data binding in four different ways

• One way - causes changes to source
• Two way - causes changes to source and target too.
• Oneway to source  - reverse of one way binding
• One time  - causes the source to initialize the target property, but changes do not propagate 

INotifyPropertyChanged uses System.ComponentModel namespace.

Create a class and add the below code

class Notify:INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private string title { get; set; }
        private int year { get; set; }
        private string desc { get; set; }

        public string Title
        {
            get { return title; }
            set{
                title = value;
                NotifyPropertyChanged("Title");
            }
        }
        public int Year
        {
            get { return year; }
            set
            {
                year = value;
                NotifyPropertyChanged("Year");
            }
        }
        public string Desc
        {
            get { return desc; }
            set
            {
                desc = value;
                NotifyPropertyChanged("Desc");
            }
        }
        protected void NotifyPropertyChanged(string propertyname)
        {
            if(PropertyChanged!=null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyname)); 
            }
        }

    }

When we add INotifyPropertyChanged after to the class name we can implement the interface by clicking below the blue dotted line. When we implement INotifyPropertyChanged we can see one event implemented

public event PropertyChangedEventHandler PropertyChanged;

We should bind these strings to the UI. Add the below code in the XAML file(Add your own properties for better view )

        <TextBlock Text="{Binding Title}"  Margin="22,10,0,35.75"/>
        <TextBlock Text="{Binding Desc}" Margin="22,10.25,0,35.5"/>
        <TextBlock Text="{Binding Year}" Margin="22,9.5,0,35.667"/>
        <Button Content="Click Me" Click="Button_Click" Margin="137,134.5,133,-109.333"/>
        <TextBox Text="{Binding Title, Mode=TwoWay}" />
        <TextBox Text="{Binding Desc, Mode=TwoWay}"  />
        <TextBox Text="{Binding Year, Mode=TwoWay}"  />
    </Grid>

Now to display the data in the page loaded add the below code.

        Notify n = new Notify();
        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            
            n.Title = "X-Men";
            n.Year = 2015;
            n.Desc = "good";
            this.DataContext = n;
        }

When we see the output the values will be displayed in the text box and text blocks. When we edit some thing in the text box the change will be affected in the text block, this is because of two way binding

We can also update our text in some button click events. While we work on real time data it will be more useful updating the values in the controls.