Click here to Skip to main content
Click here to Skip to main content

Tagged as

A Very Simple Example of Data Binding in WPF

, 4 Feb 2012
Rate this:
Please Sign up or sign in to vote.
This is a very simple example of data binding between two controls in WPF.

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:

ScreenHunter_04_Jan._27_08.03.gif

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 Smile | :) 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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Erol Esen
Software Developer (Senior)
United States United States
No Biography provided

Comments and Discussions

 
Suggestionexamples Pinmemberdrussilla24-Jul-14 5:40 
GeneralRe: examples PinmemberErol Esen24-Jul-14 6:08 
QuestionData binding Link Pinmemberabk1015-May-14 1:01 
AnswerRe: Data binding Link PinmemberErol Esen15-May-14 16:26 
QuestionThank you. Pinmemberdhanama22-Oct-13 20:56 
QuestionCan you explain about "Path = Text" Pinmemberraj23karthik4-Sep-12 23:09 
AnswerRe: Can you explain about "Path = Text" PinmemberErol Esen12-Oct-12 4:03 
GeneralReason for my vote of 5 I'm begginer so I vote 5. Pinmemberbeginner201126-Feb-12 15:50 
GeneralReason for my vote of 5 It's always useful to explain the ba... PinmemberPaul McKIllop31-Jan-12 18:39 
GeneralReason for my vote of 5 Hey. Please ignore negative comment... PinmemberJaikrishan30-Jan-12 17:46 
GeneralReason for my vote of 4 My vote of 4 because it is a simple ... PinmemberMember 346973530-Jan-12 17:03 
GeneralReason for my vote of 1 A tip should intend to do at-least o... PinmemberPankaj Chamria29-Jan-12 4:16 
QuestionSo we all got down vote for PinmemberLakamraju Raghuram27-Jan-12 6:09 
AnswerRe: So we all got down vote for PinmemberPankaj Chamria29-Jan-12 4:12 
SuggestionMy Openion PinmemberHerbert Yu26-Jan-12 6:14 
GeneralRe: My Opinion PinmemberErol Esen26-Jan-12 7:25 
QuestionNot an article PinmvpRichard MacCutchan25-Jan-12 23:15 
AnswerRe: Not an article PinmemberErol Esen26-Jan-12 1:19 
GeneralRe: Not an article PinmvpRichard MacCutchan26-Jan-12 1:40 
GeneralRe: Not an article PinmemberErol Esen26-Jan-12 1:58 
GeneralRe: Not an article PinmvpRichard MacCutchan26-Jan-12 2:36 
GeneralRe: Not an article PinmemberErol Esen26-Jan-12 3:05 
GeneralRe: Not an article PinmvpRichard MacCutchan26-Jan-12 4:04 
GeneralRe: Not an article PinmemberErol Esen26-Jan-12 4:17 
SuggestionLess for an Article [modified] PinmemberLakamraju Raghuram25-Jan-12 6:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 4 Feb 2012
Article Copyright 2012 by Erol Esen
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid