CHOOSE
Home
What You Need
Articles
Books
Webcasts
Blogs & Forums
Components
Certification
Training Classes

WPF BASICS
Layout Panels
Event Handling
Commands
Data Binding I
Styles
Triggers

KAXAML
Kaxaml is a lightweight XAML editor that gives you a "split view" so you can see both your XAML and your rendered content.

WPF Basics - Binding to a Property of Another Element

WPF has a rich data binding model, one of the strongest benefits of using WPF in my mind. In this article, I'll cover the basics on how to databind an element to a property of another element. Databinding, if you are new to the term, is a means of binding two properties together. For instance, a slider's value may be bound to a textbox showing the numeric value of the slider. We'll implement this scenario later on. It's also important to understand two key terms: Source and Target.
  • Source - is where the data is coming from
  • Target - is where the the data is going to
The following diagram from the MSDN website shows the relationship between source and target, and the various modes (eg. OneWay) that can be set:

To set up a binding, you need to identify a Source object and property and a Target object and property.

Without a databinding framework, this typically was implemented via events. You would write code to hook into the value changed event of the slider, and then update the textbox. If you wanted two-way databinding, where the value could be changed in either control, then you would need to implement an event to handle the textchanged event of the textbox. You then had to make sure that you didn't get caught in an infinite loop of the slider control triggering a change to the textbox which in turn triggered a change to the slider, which then started the loop all over again.

Refactoring Opportunity! If you see a lot of code handling events and synchronizing controls with other controls or business objects, analyze if data binding in WPF could make it simpler.

The following XAML implements the binding scenario I mentioned earlier, where the value of a slider is bound to the text property of a textbox. The user can update the value using either control. All that is required is to use the Binding Markup Expression. At the least, you need to specify two attributes:

  1. ElementName - the variable name of the source control (from the Name or x:Name attribute)
  2. Path - the path to the property on the source where the data should come from

Here is an example: 

<Slider Name="Slider1" />
<TextBox Name="TextBox1" Text="{Binding ElementName=Slider1, Path=Value}" />

There are a number of optional attributes that can be added to the Binding expression.

  • Source - used in place of ElementName to refer to an object
  • RelativeSource - used in place of ElementName to refer to the current element. Properties for Self, FindAncestor, andPreviousData.
  • Mode - OneTime|OneWay|TwoWay|OneWayToSource - to indicate the direction and frequency of the binding
  • Converter - to specify a particular converter to convert the data from the target to the source
  • ConverterParameter - to pass an additional parameter to the converter
  • UpdateSourceTrigger - LostFocus|PropertyChanged|Explicit - to indicate when the target property is updated
  • FallbackValue - for indicating a default value in case the binding fails

Alternative Syntax

Another way to write binding syntax in XAML is using property element syntax. When you use this format, you get the benefit of Intellisense on the binding element! 
<TextBox Name="TextBox1">
    <TextBox.Text>
        <Binding ElementName="Slider1" Path="Value" />
    </TextBox.Text>
</TextBox>

For More Information
Copyright 2008 - www.WPFDude.com