1. Technology

Introducing Data Binding in WPF and XAML

Need to wire a WPF control to data somewhere else? Bind it!


Working at Desk
drewhadley/E+/Getty Images
Updated June 09, 2014

Microsoft has a long history of creating language features that allow programmers to automatically route data from somewhere into controls in applications. That means things like ...

The position of a slider routed into the size of something.

The values in an Enum block being used to populate a ListBox.

These are just examples to give you the right idea. The possibilities are really only limited by your ability to imagine new ones. In general, a binding in WPF XAML can be data from just about anywhere in the system.

To introduce the concept, lets consider a very simple program ... one that has a standard TextBox and Label where the content of the TextBox is copied to the Label. To see this in action using VB code, add a TextBox and a Label to a WPF application. Then add a single line of code in the TextChanged event subroutine of the TextBox to assign the Text property of the TextBox to the Content property of the Label. See the illustration below:

Click Here to display the illustration
Click the Back button on your browser to return

But we can get exactly the same effect with strictly declarative code in the XAML using binding. Remove the event code and update the XAML as shown in the illustration below.

Click Here to display the illustration
Click the Back button on your browser to return

This is the simplest of all binding: a property of one control is bound to a property of a different one. In this case, the Content property of the Label control is bound to the Text property of a TextBox control instead of being assigned in a VB event subroutine. Let's look at the binding syntax in the XAML more closely:

<label ...
   content="{Binding ElementName=TextBox1, Path=Text}" />

Terminology note: Since XAML is an application of XML, we use XML terminology. In XML, content is an attribute. After it is compiled, it becomes a property because it's just IL - Intermediate Language - code like the rest of .NET.

The content attribute is assigned a markup extension. Markup extensions are always enclosed in curly braces. "{ ... }" This particular markup extension (there are lots of others) is a Binding. A data binding markup extension always starts with the word Binding. The ElementName tells the compiler where to look for the value (the "source" of the binding) and the Path tells the compiler where the data is in relation to the source. The compiler looks in the TextBox1 element and uses the Text property in that element.

This may be very elementary, but when you start looking at more complex bindings, it helps to keep these bedrock relationships in mind. On the next page, we consider a more complex example of markup extensions and binding where an IValueConverter interface in a VB.NET class is used to do the magic.

  1. About.com
  2. Technology
  3. Visual Basic
  4. Learn VB.NET
  5. Introducing Data Binding in WPF and XAML in a Visual Basic .NET Context

©2014 About.com. All rights reserved.