Implementing INotifyPropertyChanged

Data binding is one of the coolest feature ever existed, ever created by human race. Binding a UI Elements’ property with a property in the code behind, has the power to do any kind of trick. It’s wizardry, in a nutshell. Once the properties are bind, we need to keep notifying the UI if the property’s value has been altered in the code. INotifyPropertyChanged comes in handy for this.

You see as being an interface, we need to implement it at the first place. Process is not very tough though. In the new Silverlight project, here is the code of my main page.

   1: public partial class MainPage : UserControl

   2: {

   3:     private string _names;

   4:  

   5:     public string Names

   6:     {

   7:         get

   8:         {

   9:             return _names;

  10:         }

  11:         set

  12:         {

  13:             _names = value;

  14:         }

  15:     }

  16:     

  17:  

  18:     public MainPage()

  19:     {

  20:         InitializeComponent();

  21:     }

  22:  

  23:     

  24:     private void MainPage_OnLoaded(object sender, RoutedEventArgs e)

  25:     {

  26:         Names = "This is the Text";

  27:     }    

  28: }

The property “Name” I have here is bind with the textblock in xaml, here is the code:

   1: <UserControl x:Class="PropertyChangedDescribed.MainPage"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   6:     mc:Ignorable="d"

   7:     Loaded="MainPage_OnLoaded"

   8:     x:Name="TestingPropertyChanged"

   9:     d:DesignHeight="300" d:DesignWidth="400">

  10:  

  11:     <Grid x:Name="LayoutRoot" Background="White">

  12:         <TextBlock Text="{Binding Names, ElementName=TestingPropertyChanged}"/>

  13:     </Grid>

  14: </UserControl>

As you can see, the textblock has it’s text property bind with our code behind’s property Name. Right now, no matter what you set the value of Name, it will never be reflected onto the UI. So, what we want is, every time we change the value of our property Name, the text block has its value changed too. In order to do this, we need to implement the interface INotifyPropertyChanged. Here is the modified main page’s code to do so.

   1: public partial class MainPage : UserControl, INotifyPropertyChanged

   2: {

   3:     private string _names;

   4:  

   5:     public string Names

   6:     {

   7:         get

   8:         {

   9:             return _names;

  10:         }

  11:         set

  12:         {

  13:             _names = value;

  14:            OnPropertyChanged("Names");

  15:         }

  16:     }

  17:     

  18:  

  19:     public MainPage()

  20:     {

  21:         InitializeComponent();

  22:     }

  23:  

  24:     

  25:     private void MainPage_OnLoaded(object sender, RoutedEventArgs e)

  26:     {

  27:         Names = "This is the Text";

  28:     }

  29:  

  30:     public event PropertyChangedEventHandler PropertyChanged;

  31:  

  32:     private void OnPropertyChanged(string propertyName)

  33:     {

  34:         if (this.PropertyChanged != null)

  35:         {

  36:             PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

  37:         }

  38:     }

  39: }

So this is how you can implement INotifyPropertyChanged in silverlight.

Happy Reading!!!