Post
Ask Question

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.

Make window design-like.

Window

XAML Code for the 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>

Now, we create one model, which contains one class called person and it has 3 properties “FirstName”,” LastName”,” and 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";   
    }   
}

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

public event PropertyChangedEventHandler PropertyChanged;

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 the event is null or not, if not, we proceed.

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

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));
    }
}

Now, we call this method on all the “Set” sections 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.

Now, full Person class will look like this.

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

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"

Now, we add this model to the Windows resource file.

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

Now, set the data context for the grid.

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

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

Text="{Binding Path=FirstName}"

Now, the full code for the 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>

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

Application


Similar Articles