Explain INotifyPropertyChanged In WPF - MVVM

INotifyPropertyChanged interface is used to notify the view or ViewModel that it does not matter which property is binding; it is updated.

Let's take an example for understanding this interface. Take one WPF Window in which there are a total of  three fields: First Name, Last Name and Full Name. Here, first name and last name text boxes are editable. So, based on the change in first name and last name, we have to automatically update the full name.

1. Make window design like,
   
   
   
   
2. XAML Code for WPF Window is given below-
   

   <Window x:Class="MVVM_INotifyPropertyChanged.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow">
       <Grid Width="400" Height="Auto" HorizontalAlignment="Center" VerticalAlignment="Stretch" Margin="20">
           <Grid.RowDefinitions>
               <RowDefinition Height="40" />
               <RowDefinition Height="40" />
               <RowDefinition Height="40" /> </Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="90" />
               <ColumnDefinition/> </Grid.ColumnDefinitions>
           <Label Grid.Row="0" Grid.Column="0" Content="First Name : "></Label>
           <Label Grid.Row="1" Grid.Column="0" Content="Last Name : "></Label>
           <Label Grid.Row="2" Grid.Column="0" Content="Full Name : "></Label>
           <TextBox Grid.Row="0" Grid.Column="1"></TextBox>
           <TextBox Grid.Row="1" Grid.Column="1"></TextBox>
           <TextBox Grid.Row="2" Grid.Column="1"></TextBox>
       </Grid>
   </Window>

3. Now, we create one model, which contains one class call person and it has 3 properties “FirstName”,”LastName”,”FullName”.
   

   public class Person {
       private string _fisrtname;
       public string FirstName {
           get {
               return _fisrtname;
           }
           set {
               _fisrtname = value;
           }
       }
       private string _lastname;
       public string LastName {
           get {
               return _lastname;
           }
           set {
               _lastname = value;
           }
       }
       private string _fullname;
       public string FullName {
           get {
               return _fisrtname +" "+_lastname; ;
           }
           set {
               _fullname = value;
           }
       }
       public Person() {
           _fisrtname = "Nirav";
           _lastname = "Daraniya";
       }
   }

4. Now our actual part is started. We implement the interface on “Person” class so it automatically creates one event
   

   public event PropertyChangedEventHandler PropertyChanged;

5. Now, we have to call this event, when any property of class is changed. Thus, we create one method in which this event is called. in this method, we first check if event is null or not, if not, we proceed.
   

   private void OnPropertyRaised(string propertyname) {
       if (PropertyChanged != null) {}
   }

6. Now, we run this event by passing the property name. 
   

   public event PropertyChangedEventHandler PropertyChanged;
   private void OnPropertyRaised(string propertyname) {
       if (PropertyChanged != null) {
           PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
       }
   }

7. Now, we call this method on all the “Set” section of the property with the property name like-
   

   OnPropertyRaised("FirstName");
   OnPropertyRaised("LastName");
   OnPropertyRaised("FullName");

   Here, we call the Full Name property change on both, if the first name changes or last name changes, as shown below-
   
   
8. Now, full Person class will look like-
   

   public class Person: INotifyPropertyChanged {
       private string _fisrtname;
       public string FirstName {
           get {
               return _fisrtname;
           }
           set {
               _fisrtname = value;
               OnPropertyRaised("FirstName");
               OnPropertyRaised("FullName");
           }
       }
       private string _lastname;
       public string LastName {
           get {
               return _lastname;
           }
           set {
               _lastname = value;
               OnPropertyRaised("LastName");
               OnPropertyRaised("FullName");
           }
       }
       private string _fullname;
       public string FullName {
           get {
               return _fullname;
           }
           set {
               _fullname = value;
               OnPropertyRaised("FullName");
           }
       }
       public Person() {
           _fisrtname = "Nirav";
           _lastname = "Daraniya";
       }
       public event PropertyChangedEventHandler PropertyChanged;
       private void OnPropertyRaised(string propertyname) {
           if (PropertyChanged != null) {
               PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
           }
       }
   }

9. Now, we bind this property to the view. First, we build the solution and add this model namespace to the view, as shown below-
   

   xmlns:model="clr-namespace:MVVM_INotifyPropertyChanged.Model"

10. Now, we add this model to Window resource file.
    

    <Window.Resources>
       <model:Person x:Key="m" ></model:Person>
    </Window.Resources>

11. Now, set the data context for the grid.
    

    DataContext="{Binding Source={StaticResource m}}"

12. Now, we bind the Text property for the all the three textboxes, as show below. For the First Name text box, use-
    

    Text="{Binding Path=FirstName}"

13. Now, the full code for XAML file is given below-
    

    <Window x:Class="MVVM_INotifyPropertyChanged.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:model="clr-namespace:MVVM_INotifyPropertyChanged.Model"
            Title="MainWindow">
        <Window.Resources>
            <model:Person x:Key="m" ></model:Person>
        </Window.Resources>
    
        <Grid DataContext="{Binding Source={StaticResource m}}"
            Width="400" Height="Auto" HorizontalAlignment="Center" VerticalAlignment="Stretch" Margin="20">
            <Grid.RowDefinitions>
                <RowDefinition Height="40"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="40"/>
            </Grid.RowDefinitions>
    
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="90"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Label Grid.Row="0" Grid.Column="0" Content="First Name : "></Label>
            <Label Grid.Row="1" Grid.Column="0" Content="Last Name : "></Label>
            <Label Grid.Row="2" Grid.Column="0" Content="Full Name : "></Label>
            <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Path=FirstName} , UpdateSourceTrigger=PropertyChanged"></TextBox>
            <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Path=LastName} , UpdateSourceTrigger=PropertyChanged"></TextBox>
            <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Path=FullName} , UpdateSourceTrigger=PropertyChanged"></TextBox>
        </Grid>
    
    </Window>

14. Now, run the Application and check the result, change in first name and last name text box. Now, you can show that full name will automatically change, as per first name and last name.