How To Bind a Control to Another Control in WPF

Control to control binding in WPF

Usually, binding is considered to work for just data, such as data coming from a database or other stuff. But in reality, even properties can be bound to another control's property. What I mean is that you can control (and alter) one control's property (whatever) based on what the other control has in its property.

WPF is a framework used to define graphics and user-interface controls on the screen. WPF provides us with many built-in native (and intuitive) functions that we can use. Data binding is one of them.

Data Binding in WPF

To understand the WPF's data binding, we must first understand what data binding itself is. Data binding is a process in which you bind data to a control. It is similar to creating a connection between the back-end code and model, to the user-interface. Your user-interface thus depicts the actual underlying process or state of the controller or model.

Data binding can be an example of updating the following paragraph with the text as the user types in the value. It also has the example of when you update the combo box to change the sorting type and the underlying list is automatically updated. Another example is also very prominent in this, where you get the same functionality. The user-interface changes as you change the state of the application.

In WPF, you get many controls such as:

1. TextBox
2. TextBlock
3. Slider
4. ComboBox

Quite a few of other controls that, even if I were to continue to write all of them, it would take a lot of time to explain them. WPF is vast and spreading wider.

For more on references of data binding in WPF, please read the MSDN document also.

More stuff

Here is a few other things before I continue. Before I continue to the next stage, I must state another few things also and explain what they are in data binding. But they won't be used because we are using Controls to bind other Controls with them. We won't be using any data from the model so they don't apply.

Getting a grip

We will therefore first get a grip on those things.

Binding Source: The Binding Source is the actual object that is to be bound. It can be a string, integer or even a custom data object such as a class or even a list.
Binding Target: The Binding Target is the control that represents the data on the user-interface. TextBoxes, TextBlocks and ListBoxes are a few common examples of this type.

Data binding direction types

The direction of the data binding is a very important part of this entire phenomenon. It specifies the direction that would be taken by the object to share the data. There are usually three types of directions of data flow.

1. One-way.
2. Two-way.
3. One-way (to the source).

Now let us consider talking about them in depth.

One-way: The one-way method of data binding only works to get the data from the database. It is similar to extracting the data from the database to view on the screen. Then removing any connection between them both then unbinding them. It is a very basic one.

Two-way: A two-way process is the one when you bind the data to the control in a way that they are connected after the rendering also. This helps in maintaining a synchronized connection between the data and the control. In this process, the data is downloaded and applied to the control and the control (if edited) updates the data (binding source).

One-way (to the source): This is similar to the preceding posted one-way, however it is different in a way that it is in the opposite direction. You do not get the data from the model to your control, instead you update the binding source based on the input that the user provides in the binding target (control).

Binding a control to another control

Now for the actual topic of this article. How to bind a control to another control. In WPF, you can write the application's user-interface in both ways.

1. Using code behind.
2. Using the XAML code for building user-interface.

I won't specify how to do that in this guide.

I would use the XAML code to bind the controls to each other. You can also do so using the code-behind in your own favorite language, C# or VB.NET.

Creating the controls: As I have already said, that the controls can be written in XAML and so can their properties be. XAML provides a very intuitive function to write the code to set the data binding in WPF applications. The property or attribute of the control that you want to bind has a separate type of value inside the attribute. Something like this.

<TextBlock Text="{Binding Name}" />

The preceding control is now bound to the member "Name" of the object specified in the DataContext of the control or the parent control (maybe a window).

Example being used

This article shows how to bind three controls to each other. We will use:

 

1. TextBox.
2. TextBlock.
3. Slider.

These are three different types of controls with different working rules. A text box provides the abiity to input a value, whereas a text block is a simple text label element and a slider is something that has a range of values for the user to select from. We will bind them all in a way that they are connected to each other's properties and share the value that the user provides.

The code is as in the following:

<Window x:Class="WpfDataBindingInControls.TextBsAndSlider"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TextBsAndSlider" Height="300" Width="300">
    <Grid>
        <Slider HorizontalAlignment="Left" Margin="10,71,0,0"
Name="slider" VerticalAlignment="Top" Width="272"
Value="{Binding ElementName=textBox, Path=Text}"
Minimum="10" Maximum="20"/>
        <TextBlock HorizontalAlignment="Left" Margin="10,107,0,0"
TextWrapping="Wrap" Text="Eminem" VerticalAlignment="Top" Width="272" Height="152" Name="textBlock"
FontSize="{Binding ElementName=slider, Path=Value}"/>
        <TextBox HorizontalAlignment="Left" Height="23" Margin="10,26,0,0" Name="textBox"
TextWrapping="Wrap" VerticalAlignment="Top" Width="272"
Text="{Binding ElementName=slider, Path=Value}"/>
    </Grid>
</Window>

In our preceding example, we have three different controls. Each of them has either one of their properties bound to another control. It happens like this:

 

1. The Slider's value (Binding Target) is bound to the TextBox's Text property (Binding Source)
2. The TextBox's text (Binding Target) is bound to the Slider's value (Binding Source)
   The preceding are examples of two-way data flow direction.
3. The TextBlock's FontSize (Binding Target) is bound to the Slider's Value property (Binding Source)

A one-way binding perhaps.

If you run the preceding code, you will see that the code works as required. You are provided with a Slider, a TextBox and the TextBlock. We can edit the properties and get the results on the user-interface.

Working example

The following is a working example:


Figure 1

After a little alteration:


Figure 2

That's all for now folks. I hope that I have helped you with this article.