Use INotifyPropertyChanged Interface In WPF MVVM

INotifyPropertyChanged is an interface member in System.ComponentModel Namespace. This interface is used to notify the Control that the property value has changed.

The following example will demonstrate how to implement the INotifyPropertyChanged interface.

Scenario

Let us consider there are two fields - First Name and Last Name. Now, we will implement a logic that when we update the value for First Name and Last Name property programmatically, it will be reflected automatically in the UI.

Step 1

Create one model class “User” containing two properties respectively, for First Name and Last Name.

namespace UseOf_INotifyPropertyChanged.Model  
{  
    public class User  
    {  
        private string _fisrtname;  
        public string FirstName  
        {  
            get  
            {  
                return _fisrtname;  
            }  
            set  
            {  
                _fisrtname = value;  
            }  
        }  
        private string _lastname;  
        public string LastName  
        {  
            get  
            {  
                return _lastname;  
            }  
            set  
            {  
                _lastname = value;  
            }  
        }  
    }  
}

Step 2

Create one class “NotifyPropertyChanged” to implement INotifyPropertyChanged interface. Here, we are creating one separate class so that we can inherit this class in all classes where we want to implement the property change notification.

Step 3

Inherit INotifyPropertyChanged interface with NotifyPropertyChanged class.

public class NotifyPropertyChanged : INotifyPropertyChanged

Step 4

On Inherit, an event will be created automatically

public event PropertyChangedEventHandler PropertyChanged;

Step 5

Now, we have to call this event to notify change in the property to UI. Therefore, we will implement a method to call this event.

public void RaisePropertyChange(string propertyname)  
{  
    if (PropertyChanged != null)  
    {  
        PropertyChanged(this, new PropertyChangedEventArgs(propertyname));  
    }  
}

Step 6

Now, we will inherit NotifyPropertyChanged class with User class to raise property change notification.

public class User : NotifyPropertyChanged  
{  
    private string _fisrtname;  
    public string FirstName  
    {  
        get  
        {  
            return _fisrtname;  
        }  
        set  
        {  
            _fisrtname = value;  
            RaisePropertyChange("FirstName");  
        }  
    }  
    private string _lastname;  
    public string LastName  
    {  
        get  
        {  
            return _lastname;  
        }  
        set  
        {  
            _lastname = value;  
            RaisePropertyChange("LastName");  
        }  
    }  
}

Step 7

Prepare a WPF window just like below.

Step 8

Now, create a ViewModel class “MainWindowViewModel” and inherit User class in it

public class MainWindowViewModel : User

Step 9

Declare constructor and assign values to FirstName and LastName properties.

namespace UseOf_INotifyPropertyChanged.ViewModel  
{  
    public class MainWindowViewModel : User  
    {  
        public MainWindowViewModel()  
        {  
            FirstName = "Maulik";  
            LastName = "Kansara";  
        }  
    }  
}

Step 10

Add Namespace for ViewModel in windows xaml file.

xmlns:VM="clr-namespace:UseOf_INotifyPropertyChanged.ViewModel"

Step 11

Now set MainWindowViewModel as window’s DataContext.

<Window.DataContext>  
    <VM:MainWindowViewModel x:Name="VMMainWindow"></VM:MainWindowViewModel>  
</Window.DataContext>

Step 12

Bind text boxes’ text property to respective proper model Property.

<TextBox Grid.Row="1" Grid.Column="1" Height="25" Text="{Binding FirstName}" Margin="2"></TextBox>  
<TextBox Grid.Row="2" Grid.Column="1" Height="25" Text="{Binding LastName}" Margin="2"></TextBox>  

Step 13

Now, the complete XAML file will look like this.

<Window x:Class="UseOf_INotifyPropertyChanged.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:local="clr-namespace:UseOf_INotifyPropertyChanged"  
        mc:Ignorable="d"  
        xmlns:VM="clr-namespace:UseOf_INotifyPropertyChanged.ViewModel"  
        Title="MainWindow" Height="200" Width="300">  
    <Window.DataContext>  
        <VM:MainWindowViewModel x:Name="VMMainWindow"></VM:MainWindowViewModel>  
    </Window.DataContext>  
    <Grid>  
        <Grid.ColumnDefinitions>  
            <ColumnDefinition Width="100"/>  
            <ColumnDefinition Width="*"/>  
            <ColumnDefinition Width="20"/>  
        </Grid.ColumnDefinitions>  
        <Grid.RowDefinitions>  
            <RowDefinition Height="25"/>  
            <RowDefinition Height="30"/>  
            <RowDefinition Height="30"/>  
            <RowDefinition Height="*"/>  
        </Grid.RowDefinitions>  
        <Label Content="First Name :" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Center"></Label>  
        <Label Content="Last Name :" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Center"></Label>  
        <TextBox Grid.Row="1" Grid.Column="1" Height="25" Text="{Binding FirstName}" Margin="2"></TextBox>  
        <TextBox Grid.Row="2" Grid.Column="1" Height="25" Text="{Binding LastName}" Margin="2"></TextBox>  
    </Grid>  
</Window>

Step 14

Run the application and you will observe that values assigned to properties FirstName and LastName are reflected in their respective textboxes.