WPF Data Binding – Part 1

22 09 2007

Anybody who have heard of WPF should be wondering what is this Data binding šŸ™‚

Yes, I was also feeling a bit difficult to understand what is Data binding, but things are becoming clearer to me as I go through many samples.

This post will give you an introduction to Data binding and you will really find how easy is to use Data binding than the normal way of doing things šŸ˜€

What is Data binding ?

From MSDN,

Data binding is the process that establishes connection between the application UI and business logic

Ok, I think few may be confused here. Let me explain with a simple example.

We have a TextBox and Label. Whenever the text in the TextBox changes, the Label gets updated. So think the TextBox as the application UI and the value getting updated as the business logic – here we update the Label to have the updated value.

Sounds similar to having an event handler for TextBox, for whenever text being updated, updating the Label’s content to hold that TextBox’s value in the event handler ? Yes, its exactly the same but now we are going to do this with Data binding.

What else do I need to know about Data binding ?

There are few things to get familiar with before going to the demonstration of data binding.

  • To establish a binding we use the Binding object
  • Binding has these four components,
    • a binding Target component
    • a Target Property
    • a binding Source component
    • a Path to the value in the binding source


Binding Flow
(click to enlarge)

As seen in the above diagram,

  • One way binding causes the target property to get updated automatically when source property gets updated
  • Two way binding causes both (source<->target)
  • One way to source causes the source property to get updated automatically when target property gets updated

Having gone through a bit about (yes, its just a bit šŸ˜€ ) data binding, lets jump into an example.

Here is what I want to do,

We have a TextBox and Label. Whenever the text in the TextBox changes, the Label gets updated

The normal way of doing it

XAML code below,

<TextBox Name="TextUnBound" TextChanged="NotBoundTextChanged" />
<TextBlock Name="TxtBlockUnBound" />

And we would have our event handler in the back-end code (C#) do our job,

public void NotBoundTextChanged(Object obj, EventArgs eventargs)
{ TxtBlockBound.Text = TextUnBound.Text; }

The above mentioned approach is to have an event handler and do our stuff inside that event handler

The WPF way of doing it

XAML code below,

<TextBox Name="TextBound" >Data Bound</TextBox>

   <TextBlock Name="TxtBlockBound" >


           <Binding ElementName="TextBound" Path="Text" />



And the above does our job šŸ™‚

Pretty simple isn’t it ? We haven’t even used any back-end code šŸ˜‰

So what was the Magic done here ? As told earlier, we have specified a Binding object for our TextBlock’s Text Property (which is our binding target property) to be bound to the the Element TextBox and Path Text (which is our binding source property). And remember, its One Way, so whenever our source gets updated, automatically the target gets updated.

You can download the sample from here

This is very basic introduction on data binding. I will go a step further in each part of data binding series, so stay tuned šŸ˜‰




5 responses

25 09 2007

This is a great explanation of data binding šŸ™‚

25 09 2007

Thanks Kirupa šŸ™‚

25 09 2008

i want code for databinding with textbox in c#.

6 01 2009

hi. šŸ™‚ great tuto, mmm… someone use Expression Blend to create a WPF UI, how i maked a Bind with Blend, thk

9 07 2011

This is a very bad example!

Firstly this is not data binding at all. You need to bind the TextBlockBound to a dependency property and not directly change it in the NotBoundTextChanged… That is an old way of doing things when using WinForms…
And.. What about TextBlockUnbound…?

The code if at all it works this must be because of your event handler and not due to data binding.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: