Posted by: Zeeshan Amjad | January 25, 2010

Data Binding with Dependency Property


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 discuss the second approach, i.e. using dependency properties. 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 Dependency Property" 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: 
 15: namespace WpfDataBinding
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         private Student student = new Student();
 23: 
 24:         public Window1()
 25:         {
 26:             InitializeComponent();
 27: 
 28:             DataContext = student;
 29: 
 30:         }
 31: 
 32:         private void Button_Click(object sender, RoutedEventArgs e)
 33:         {
 34:             student.Percentage =
 35:                 (double)(student.CalculusMarks +
 36:                 student.EnglishMarks +
 37:                 student.ProgrammingMarks) * 100 / 300;
 38:         }
 39:     }
 40: 
 41:     public class Student : DependencyObject
 42:     {
 43:         public static readonly DependencyProperty NameProperty =
 44:             DependencyProperty.Register("Name", typeof(String), typeof(Student));
 45: 
 46:         public static readonly DependencyProperty CalculusMarksProperty =
 47:             DependencyProperty.Register("CalculusMarks", typeof(int), typeof(Student));
 48: 
 49:         public static readonly DependencyProperty EnglishMarksProperty =
 50:             DependencyProperty.Register("EnglishMarks", typeof(int), typeof(Student));
 51: 
 52:         public static readonly DependencyProperty EconomicsMarksProperty =
 53:             DependencyProperty.Register("EconomicsMarks", typeof(int), typeof(Student));
 54: 
 55:         public static readonly DependencyProperty ProgrammingMarksProperty =
 56:             DependencyProperty.Register("ProgrammingMarks", typeof(int), typeof(Student));
 57: 
 58:         public static readonly DependencyProperty PercentageProperty =
 59:             DependencyProperty.Register("Percentage", typeof(double), typeof(Student));
 60: 
 61:         public String Name
 62:         {
 63:             get { return (String)GetValue(NameProperty); }
 64:             set { SetValue(NameProperty, value); }
 65:         }
 66: 
 67:         public int CalculusMarks
 68:         {
 69:             get { return (int)GetValue(CalculusMarksProperty); }
 70:             set { SetValue(CalculusMarksProperty, value); }
 71:         }
 72: 
 73:         public int EnglishMarks
 74:         {
 75:             get { return (int)GetValue(EnglishMarksProperty); }
 76:             set { SetValue(EnglishMarksProperty, value); }
 77:         }
 78: 
 79:         public int ProgrammingMarks
 80:         {
 81:             get { return (int)GetValue(ProgrammingMarksProperty); }
 82:             set { SetValue(ProgrammingMarksProperty, value); }
 83:         }
 84: 
 85:         public double Percentage
 86:         {
 87:             get { return (double)GetValue(PercentageProperty); }
 88:             set { SetValue(PercentageProperty, value); }
 89:         }
 90:     }
 91: }
 92: 

 

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_DependencyProperty

Advertisements

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: