How to data bind to property in WPF

One of the strengths of WPF is its data binding capabilities. Although data binding is not new (in fact winforms has some limited data binding support) WPF takes it to the next level. In this post I’ll show you how to bind an element to a property defined in the code behind.

How it’s done?

In order to bind a property to an element on the control we need to do the following:

  1. Create a dependency property
  2. Name your user control – in XAML
  3. Bind the property to an element of your choice

Step 1 – Create a dependency property

Dependency properties are simple .NET properties done the WPF way. On the surface they look just like the properties we use since .NET 1.x came out, underneath they are actually stored in a dictionary like collection and that implementation is what makes WPF work the way it does.

You don’t need to actually know how dependency properties work in order to create them but if you do want to learn more there is a good overview on MSDN.

Adding dependency property is done by creating a new field and initializing it using DependencyProperty.Register and then using that field in the property’s setter and getter:

public partial class Window1 : Window

{

    public static DependencyProperty SomeTextProperty =

        DependencyProperty.Register(“SomeText”, typeof(string), typeof(Window1));

 

    public string SomeText

    {

        get { return (string)GetValue(SomeTextProperty); }

        set { SetValue(SomeTextProperty, value); }

    }

Make sure that the name of the property used to register the property is exactly the same as the property name- otherwise it won’t work.

We’re done with the “code” part – now let’s head to the XAML and create the actual data binding.

Step 2 – Define the control’s name

In order to use the property we need to address it and for that we need to define a name for our control. Choose a name and add Name= at the beginning of the XAML file. It doesn’t matter how you call the control as long as you use the same name in the actual binding.

Step 3 – Bind the property to an element

In this trivial example I’ve used the property to set (and get) the text that appears on a textbox – and the XAML should look something like this:

<Window x:Class=”BindToProperty.Window1″

   xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

   xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

   Title=”Window1″ Height=”300″ Width=”300″ Name=”UserControlName”>

    <Grid>

        <TextBox Name=”textBox1″ Text=”{Binding ElementName=UserControlName, Path=SomeText}”/>

    </Grid>

</Window>

 

And now whenever you change the value of Window1.SomeText that text will be displayed on the textbox “automatically”

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