Friday, 13 March 2009

WPF Data Binding Tutorial, Part I - basic binding

Data Binding in WPF UI design is a way of pulling information out of one object and displaying it in user interface controls.
WPF makes data binding very easy, and powerful toll, that allows UI developer to provide a lot of functionality to app's windows without lots of changes in c# code.
I have a simple example of how data binding is usually used in WPF.

Lets start with defining an Object that we can later use to represent some sort of data in our application. I've created a c# class Person, that represents, well different persons:

As you can see it's very simple - each person has a name and e-mail. You create person by setting name and email properties. As far as your WPF application is concerned you can have a database of Person objects, you can keep create them during runtime, you can keep the in text files. As long as you have object you want to pull data out of, binding will be the thing you need.
Simplest binding is a relationship between source object, lets say Person object, and target object. You obtain some information from source object - Name, or E-mail, and pass it to one of target's properties. Target is a WPF object, and the property you want to set has to be a dependency property.
The source object can be practically anything: another WPF element, ADO.NET data object, data-only object created by developer (object of class Person would do).
My first example will be binding between two WPF elements. Consider this code:

You have a slider, and a text, and as you can test yourself - change of the slider positions triggers the text font size change. It's all done without any code, just xaml tags.
As you probably figured out the "magic" happens here:
FontSize="{Binding ElementName=slider, Path=Value}”
You can translate it as: "Let the FontSize equal value of Value property of element that's name is "slider".
All data binding expressions use an XAML mark up extension (hence the curly braces). First, using the Binding word, you create an instance of System.Windows.Data.Binding class. Then you define configuration properties of Binding object, in this example the ElementName and Path.
One of very important features of Binding is that it will work regardless of how you'll change the source's value. Wherever in code you'll put something like:

both slider value and text font size will change.

Now, since we know what's binding all about, it’s time to use our Person class.
Let’s consider this code:

It's a simple window, that's supposed to present info about a Person. The Person to be displayed is selected by the user - he put's user ID into first text box. After clicking GET button he'll be able to see the name and e-mail displayed in green area of the screen. In code we should create a list of objects of type Person , and I populate it with simple data (or provide any other way of getting actual objects contain data that we want to use). ID of person is just index of the object in the list.

You can see how I use binding in text boxes in green area:
Text="{Binding Path=Name}"
, but how does the application know which element to bind to?
The only place I could set binding element source is in the method called when the GET button is pressed - get_Click method. The idea behind this method is to take the string value of id text field, change it into Integer. Than try to find an object in the list under given index. If the object exists we set the binding element - source object for whole grid that displays person's details. That way only Path is needed to define proper binding.
To create binding in code I use DataContext Property of the Grid WPF element:
this.productDetails.DataContext = getPerson(ID);

That's how the c# code I used looks like:

Nothing complicated here: the
Int32.TryParse(, out ID)
tries to parse Integer out of string that's placed in Text property of id textbox, and returns true if succeeded. There is no error or exception handling in place, so the applications isn't really working properly but it illustrates the idea. That's how the c# code I used looks like:

In the next tutorial about bindig I'll write about binding directions, multi-object binding, and some useful and eye-catching tricks.

No comments:

Post a Comment