Posted by: Zeeshan Amjad | January 26, 2010

Data Binding with INotifyPropertyChanged


When we need to implement two way binding, then we have two options in WPF. First one is to implement INotifyChanged interface in our class, or second one is to make the properties of our class as dependency properties.

Here we are going to see the INotifyChange method. There are few advantages and disadvantages of this approach. The biggest advantage is that now we can use this dependency property in animation, style, logical resource and lots of other WPF tools. This will become a native property for WPF. The biggest disadvantage is that your class will become heavy as compare to normal CLR properties.

Here is a simple program to demonstrate this concept. Here we are making a simple program to input the student information. we enter the marks of the students and it will calculate the percentage of the student.

Here is complete XAML code of the program.

  1: <Window x:Class="WpfDataBinding.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Data Binding with INotifyPropertyChanged" Height="300" Width="400">
  5:     <Grid>
  6:         <Grid.Background>
  7:             <LinearGradientBrush>
  8:                 <GradientStop Offset="0" Color="Blue"/>
  9:                 <GradientStop Offset="0.5" Color="LightBlue"/>
 10:                 <GradientStop Offset="1" Color="Blue"/>
 11:             </LinearGradientBrush>
 12:         </Grid.Background>
 13:         <Grid.ColumnDefinitions>
 14:             <ColumnDefinition/>
 15:             <ColumnDefinition/>
 16:         </Grid.ColumnDefinitions>
 17:         <Grid.RowDefinitions>
 18:             <RowDefinition/>
 19:             <RowDefinition/>
 20:             <RowDefinition/>
 21:             <RowDefinition/>
 22:             <RowDefinition/>
 23:             <RowDefinition/>
 24:         </Grid.RowDefinitions>
 25:         <TextBlock Grid.Column="0" Grid.Row="0" Margin="5"  VerticalAlignment="Center" 
 26:                    Foreground="Yellow" FontWeight="Bold" Text="Enter Student Name"/>
 27:         <TextBox Grid.Column="1" Margin="5" Grid.Row="0" VerticalAlignment="Center"
 28:                  Text="{Binding Path=Name}"/>
 29:         <TextBlock Grid.Column="0" Grid.Row="1" Margin="5"  VerticalAlignment="Center" 
 30:                   Foreground="Yellow" FontWeight="Bold" Text="Enter Calculus Marks"/>
 31:         <TextBox Grid.Column="1" Margin="5" Grid.Row="1" VerticalAlignment="Center"
 32:                  Text="{Binding Path=CalculusMarks}"/>
 33:         <TextBlock Grid.Column="0" Grid.Row="2" Margin="5"  VerticalAlignment="Center" 
 34:                   Foreground="Yellow" FontWeight="Bold" Text="Enter English Marks"/>
 35:         <TextBox Grid.Column="1" Margin="5" Grid.Row="2" VerticalAlignment="Center"
 36:                  Text="{Binding Path=EnglishMarks}"/>
 37:         <TextBlock Grid.Column="0" Grid.Row="3" Margin="5"  VerticalAlignment="Center" 
 38:                  Foreground="Yellow" FontWeight="Bold" Text="Enter Programming Marks"/>
 39:         <TextBox Grid.Column="1" Margin="5" Grid.Row="3" VerticalAlignment="Center"
 40:                  Text="{Binding Path=ProgrammingMarks}"/>
 41:         <TextBlock Grid.Column="0" Grid.Row="4" Margin="5"  VerticalAlignment="Center" 
 42:                   Foreground="Yellow" FontWeight="Bold" Text="Percentage"/>
 43:         <TextBlock Grid.Column="1" Margin="5" Grid.Row="4" VerticalAlignment="Center"
 44:                   Foreground="Yellow" FontWeight="Bold" Text="{Binding Path=Percentage}"/>
 45:         <Button Grid.Row="5" Width="125" Margin="5" Grid.ColumnSpan="2" 
 46:                 Click="Button_Click">Calculate Percentage</Button>
 47:     </Grid>
 48: </Window>
 49: 

And here is complete C# code of the program.

 

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: using System.ComponentModel;
 15: 
 16: namespace WpfDataBinding
 17: {
 18:     /// <summary>
 19:     /// Interaction logic for Window1.xaml
 20:     /// </summary>
 21:     public partial class Window1 : Window
 22:     {
 23:         private Student student = new Student();
 24: 
 25:         public Window1()
 26:         {
 27:             InitializeComponent();
 28: 
 29:             DataContext = student;
 30: 
 31:         }
 32: 
 33:         private void Button_Click(object sender, RoutedEventArgs e)
 34:         {
 35:             student.Percentage =
 36:                 (double)(student.CalculusMarks +
 37:                 student.EnglishMarks +
 38:                 student.ProgrammingMarks) * 100 / 300;
 39:         }
 40:     }
 41: 
 42:     public class Student : INotifyPropertyChanged
 43:     {
 44:         private String _name;
 45:         private int _calculusMarks;
 46:         private int _englishMarks;
 47:         private int _programmingMarks;
 48:         private double _percentage;
 49: 
 50:         public event PropertyChangedEventHandler PropertyChanged;
 51: 
 52:         public String Name
 53:         {
 54:             get 
 55:             {
 56:                 return _name;
 57:             }
 58:             set 
 59:             {
 60:                 _name = value;
 61:                 RaisePropertyChanged("Name");
 62:             }
 63:         }
 64: 
 65:         public int CalculusMarks
 66:         {
 67:             get 
 68:             {
 69:                 return _calculusMarks;
 70:             }
 71:             set 
 72:             {
 73:                 _calculusMarks = value;
 74:                 RaisePropertyChanged("CalculusMarks");
 75:             }
 76:         }
 77: 
 78:         public int EnglishMarks
 79:         {
 80:             get 
 81:             {
 82:                 return _englishMarks;
 83:             }
 84:             set 
 85:             {
 86:                 _englishMarks = value;
 87:                 RaisePropertyChanged("EnglishMarks");
 88:             }
 89:         }
 90: 
 91:         public int ProgrammingMarks
 92:         {
 93:             get 
 94:             {
 95:                 return _programmingMarks;
 96:             }
 97:             set 
 98:             {
 99:                 _programmingMarks = value;
100:                 RaisePropertyChanged("ProgrammingMarks");
101:             }
102:         }
103: 
104:         public double Percentage
105:         {
106:             get 
107:             {
108:                 return _percentage;
109:             }
110:             set 
111:             {
112:                 _percentage = value;
113:                 RaisePropertyChanged("Percentage");
114:             }
115:         }
116: 
117:         private void RaisePropertyChanged(string propertyName)
118:         {
119:             PropertyChangedEventHandler handler = this.PropertyChanged;
120: 
121:             if (handler != null)
122:             {
123:                 handler(this, new PropertyChangedEventArgs(propertyName));
124:             }
125:         }
126:     }
127: }
128: 

 

Also note because of data binding, we don’t need to to specify the name of the text block. Here is an output of this program.

DataBinding_INotifyPropertyChanged

Advertisements

Responses

  1. […] extend this concept. This time we are going to implement the disposable pattern and implement the INotifyPropertyChangedinterface, so its child classes can properly manage the resource. The first step is, in addition to […]

  2. why u keep numbers mannnnnnnnnnnnnnn

    • I didn’t understand your question. Can you please explain it little bit more.

      Regards
      Zeeshan Amjad


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: