A Very Simple Example of Data Binding in WPF

• Download MyWPFdataBinding - 58.61 KB

Introduction

The importance of data binding in Windows Presentation Foundation, or WPF, application development is undeniable. Yet, most articles are so complex that understanding the basics of this technology can be daunting. This complexity arises from simple beginnings that quickly become complex. This article focuses on data binding between controls, and that's it.

Background

WPF is an important step forward to developing effective graphical user interfaces. Much manual time spent on creating a professional user interface using Windows Forms is addressed by the WPF. Most important of the development tasks in user interface development is the necessary singularity of a data source shared by multiple controls that make up a user interface. This one-to-many sharing of data between source and many controls is called data binding.

What does it do?

As the user types in the textbox control, the data is displayed in a label control right next to it automatically. Because the label control gets its data from the textbox control:

Figure 0: The user interface where the label control on the right gets its data from the textbox control on the left.

Using the code

The code in Figure 2 represents two controls: a textbox and a label, displayed in a Window. When the user types inside the textbox, the text is automatically displayed in the label control, because the label control is data bound to the textbox control. Much of this code is generated when you drag and drop the controls from the Toolbox onto the design area. There is minimal effort to data-bind the two controls together, with the textbox control being the data source.

While the source code in Figure 2 is the complete application code, which you can copy, paste, compile and run, there is only 1 line of code that data-binds the textbox control to the label control:

 Content="{Binding ElementName=textBox1,Path=Text}" 

Figure 1: 'Content' property of the Label control data bound to the text property of the textbox control.

'ElementName' is a reserved word, as 'Binding' is. So is 'Path'. The curly brackets is part of the XAML syntax. The Path is the textual hierarchical path of an element that makes up the control; similar to the way one would drill down the properties of a control when you right-click on it.

It's possible to use this line inside the definition of any number of controls of an application, and they would all get their data from the textbox control.

Extensible Application Markup Language, or XAML of the MainWindow.xaml file, which is created by Visual Studio 2010 (and probably compatible with other versions as well) is as follows (This is the complete application!):

<Window x:Class="MyWPFdataBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Label 
            Content="{Binding ElementName=textBox1,Path=Text}" 
            Height="29" 
            HorizontalAlignment="Left" 
            Margin="292,28,0,0" 
            Name="label1" 
            VerticalAlignment="Top" 
            Width="159" />
        <TextBox 
            Height="23" 
            HorizontalAlignment="Left" 
            Margin="41,30,0,0" 
            Name="textBox1" 
            VerticalAlignment="Top" 
            Width="120" />
    </Grid>
</Window>

Figure 2: Complete application source code; but make sure the namespace "MyWPFdataBinding" is also in App.xaml.cs and MainWindow.xaml.cs files.

Points of Interest

Data binding is not limited to between controls, you can also bind to XML data, current DataContext, BindingGroupName, and RelativeSource, all of which you can Google to learn more about. They all follow the general principle discussed here. What makes learning all this challenging is the myriad reserved words associated with the technology, such as "IsSynchronizedWithCurrentItem", "FindAncestor", etc., all of which can be learned through experience. Development time saved using this technology can be enormous.

Next Step

This is as simple an example as I can come up with; let's call it step zero :) Next level of complexity can be seen in Josh Smith's article: http://www.codeproject.com/Articles/26210/Moving-Toward-WPF-Data-Binding-One-Step-at-a-Time

There is also a helpful CheatSheet for WPF Binding at http://www.nbdtech.com/Free/WpfBinding.pdf