BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Data Binding - Binding to Controls

The ninetieth part of the Windows Presentation Foundation Fundamentals tutorial looks at the syntax for creating data bindings. In this article the data bindings use controls for the source and target properties, linking two or more controls together.

Data Binding

In the previous article we started to look at the concepts of data binding in Windows Presentation Foundation (WPF). Data binding allows you to link the dependency properties of a control to various sources, removing the need to create plumbing code for some scenarios. One of the simpler sources for binding is a property of another, named WPF control. We'll create such bindings in this article using pure XAML.

To demonstrate the bindings we need a sample solution. Create a new WPF application project in Visual Studio, naming the solution, 'ControlBindingDemo'. Once the project is prepared, replace the XAML of the main window with the following:

<Window x:Class="ControlBindingDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Data Binding Demo"
        Height="100"
        Width="200">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
            
        <Slider Name="ValueSlider" Margin="5" />

        <TextBlock Grid.Row="1" HorizontalAlignment="Left" Text="0" />

        <TextBox Grid.Row="1"
                 HorizontalAlignment="Right"
                 Width="50"
                 TextAlignment="Right"
                 Text="0" />
    </Grid>
</Window>

The window generated by the XAML includes a Slider, a TextBlock and a TextBox. We'll use data binding to link these controls so that the value in the slider appears in both of the other two controls, and so that updating either the Slider or the TextBox affects the other controls.

WPF Data Binding Example Window

Adding a Data Binding with Property Element Syntax

For our first data binding we'll link the Value property of the Slider to the Text property of the TextBlock. We'll use property element syntax to set the TextBlock's Text property to a Binding object. This is the object that defines the binding, specifying the source control and the path to the property to which we wish to bind.

When binding to a specific control, the source is set using the ElementName attribute of the Binding. The value of this attribute must match the name of the source control. To specify which property to link, you use the Path attribute. There are many other options for configuring a binding but for this example they are not necessary.

To set the binding for the TextBlock's Text property, replace the XAML for the control with the following:

<TextBlock Grid.Row="1" HorizontalAlignment="Left">
    <TextBlock.Text>
        <Binding ElementName="ValueSlider"
                 Path="Value"/>
    </TextBlock.Text>
</TextBlock>

The updated XAML removes the Text property from the main TextBlock XAML tag and replaces it with property element syntax. Instead of providing plain text in the Text property, we use a Binding with the appropriate source details. Note that ElementName is set to the name of the source control and the Path is set to Value, indicating that the Value property of the Slider should be bound.

Even though the data types of the bound properties do not match, you do not need to add any extra information to perform the conversion. WPF can automatically convert between the floating-point number held in Value and the string in the Text property.

Run the program and move the Slider to see the results. You should see that the TextBlock's text is automatically updated as you slide the control, displaying the selected value.

Path Syntax

The Path part of the binding in the above example is very basic. It simply names the source property, which is a top-level property from the source control. In more complex scenarios, you might wish to bind to properties that are deeper in the object model, to indexers or to attached properties.

To link to deeper properties, you can specify a path that contains full stops, or periods. For example, if you wanted to bind to the length of a string property, you might use the following binding:

<Binding ElementName="MyText"
         Path="Text.Length"/>

If you wish to bind to an indexed property, you can specify the index in brackets. For indexer properties with multiple indexes, separate the indexes with commas. If the indexer uses a string to identify the desired item, supply the string in quotes. For example, the following binding extracts the first character from a string property:

<Binding ElementName="MyText"
         Path="Text[0]"/>

If you wish to bind to an attached property, you specify it within parentheses. For example, if you wanted to bind to the Row number of a control that appears in a Grid, you could use the following syntax:

<Binding ElementName="MyText"
         Path="(Grid.Row)"/>

Binding Expressions

The Binding tag in XAML is very clear but rather long-winded. You can simplify many bindings using a binding expression. Binding expressions are supplied to an attribute as a string. They include the same information as the earlier bindings, specified as a series of comma-separated key value pairs. For example, our binding to the Slider's Value property would use the following expression:

{Binding ElementName=ValueSlider,Path=Value}

We can demonstrate this using the TextBox's Text property. We'll bind this to the same source as the TextBlock, allowing the Value from the Slider to be shown and updated automatically. Replace the XAML for the TextBox with the following:

<TextBox Grid.Row="1"
         HorizontalAlignment="Right"
         Width="50"
         TextAlignment="Right"
         Text="{Binding ElementName=ValueSlider,Path=Value}"/>

Run the program again to see the results. You should find that operating the slider causes the text in the TextBlock and TextBox controls to update. In addition, if you type a value between one and ten into the TextBox, then press the tab key so that the control loses focus, the Slider and the TextBlock are updated automatically.

22 August 2014