Data binding in WPF
In this article I will discuss about the DataBinding in WPF. How we can achieve data binding at different levels in applications using the datacontext property and how it can be helpful for us to have a solid understanding of datacontext if we are working with property of one type present in the parent class.
Why DataBinding in WPF
Like all other UI related technologies where it is almost mandatory for the developer to bind some kind of data to the UI elements. The same applies to the WPF also. In WPF data binding is done using the DataContext property which is a dependency property (discussed here) of the framework element class. All the controls derived from the framework element class have this property which in turn can be used to bind data from the source.
How Data binding works in WPF
While working with data we always have two type of entities. One is know as the source and the other is know as target. In WPF the source is generally a custom CLR type and target is a control derived from the framework element class.
Please have a look at the below code to understand it in better way. The below code is the code behind for the simple sample application.
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Student student = new Student() { Name = "Vikram" };
this.DataContext = student;
}
}
public class Student
{
public string Name { get; set; }
}and the XAML for the application is as following.
<TextBox x:Name="tbStudentName" Text="{Binding Name}" Width="100" Height="30"/>In this application I have a Student class, the instance of which is the source of the data binding and the TextBox is the target for the data binding to take place. Apart from source and target, we have source property (which is the Name property of the Student class) and Target property (which is the Text Property of the TextBox class) which we can understand from the below figure.
While starting the application I have set the DataContext for whole of the window as instance of the Student class. After setting this instance as DataContext we can bind any of the property of the Student class to any framework element present in the window.
If we run the application we can notice that the textbox is populated with the Name property value i.e. “Vikram”
This was a simple example of the data binding in WPF. Suppose if our class has properties which are instance of other class in that case the binding will become bit complex as shown in the below example.
public MainWindow()
{
InitializeComponent();
Student student = new Student() { Name = "Vikram", StudentAddress = new Address() { StreetNumber = "1 st Cross", City= "Bangalore" } };
this.DataContext = student;
}
public class Student
{
public string Name { get; set; }
public Address StudentAddress { get; set; }
}
public class Address
{
public string StreetNumber { get; set; }
public string City { get; set; }
}As shown in the above code we have as StudentAddress property in the Student class which is of type Address. The details of the StudentAddress I want to show in the same window in which the Name property is present.
This can be achieved as shown in the below figure.
But there is one more way this can be achieved. The same can be achieved by using the DataContext property of the StackPanel as shown in the below figure
Using the above way for setting the data binding for a group of elements which can be binded to single property in a class is much more convenient as it prevents us from explicitly setting the Property name while binding the data, which in turn can be erroneous if we are working with complex applications.
In this article I have described about the data binding in WPF and how we can make data binding of complex types easier using datacontext property of framework element.