Tutorial – Binding one element property to another

The properties of WPF elements can be bound to properties of other WPF Elements. Lets do some simple examples of binding one element to another.

For this tutorial, I assume you are in Visual Studio 2008.  I assume that you already know how to create a new Project and choose WPF Application.  All examples assume you have a new WPF Application.

I am the believer that one example isn’t enough, so I am going to give you three examples:

Example 1 – Binding and Element’s property to CheckBox.IsChecked

This example will demonstrate binding a Button‘s IsEnabled property to a CheckBox‘s IsChecked property.

Step 1 – Add the elements

  1. Add two items from the Toolbox:
    • CheckBox
    • Button

    The Button is named button1 and the CheckBox is named checkBox1.

  2. Change the text of the checkBox1 to “Enable button”.  This can be done either in the Properties or in the XAML.

Step 2 – Adding Binding to the Button

  1. In the XAML, locate the button1 element.
  2. Add the following to the button1 element:IsEnabled="{Binding ElementName=checkBox1, Path=IsChecked}"In your project, ElementName could be any item. In this example, we only have two elements so far: button1, and checkBox1.The XAML now looks like this (only two new lines exist):
    <Window x:Class="BindingATextBoxToASlider.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
        <Grid>
            <Button Content="Button" Height="23" Margin="12,34,416,0" Name="button1" VerticalAlignment="Top" Width="75" IsEnabled="{Binding ElementName=checkBox1, Path=IsChecked}"/>
            <CheckBox Content="CheckBox" Height="16" Margin="12,12,408,0" Name="checkBox1" VerticalAlignment="Top" />
        </Grid>
    </Window>
    
  3. Compile and run your program.
  4. Check and uncheck the box an watch the binding do its work as it enables and disables the button.

Ok, so that was pretty cool. We have a simple example of binding one Element to another.

You can shoot yourself in the foot or Don’t be stupid!

Yes, you can shoot yourself in the foot by doing something stupid.

You could bind an element to itself. Let’s try it just so you can see it happen.

Add the same binding you added to button1 to checkBox1.

Compile and see what happens.

Example 2 – Binding and Element’s property to Slider.Value

This example uses a Slider and a TextBox.

Step 1 – Add the elements

  1. Add two items from the Toolbox:
    • TextBox
    • Slider

    The Slider is named slider1 and the TextBox is named textBox1.

Step 2 – Adding Binding to the TextBox

  1. In the XAML, locate the textBox1 element.
  2. Add the following to the textBox1 element:Text="{Binding ElementName=slider1, Path=Value}"ElementName can be any item. In this example, we only have two elements so far: slider1, and textBox1.The XAML now looks like this (only two new lines exist):
    <Window x:Class="BindingATextBoxToASlider.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
        <Grid>
           <TextBox Height="23" Margin="79,62,99,0" Name="textBox1" VerticalAlignment="Top" Text="{Binding ElementName=slider1, Path=Value}"/>
            <Slider Height="22" Margin="79,34,99,0" Name="slider1" VerticalAlignment="Top" />
        </Grid>
    </Window>
    
  3. Compile and run your program.
  4. Slide the slider and watch the binding do its work as its value is displayed in the textBox1 as it changes.

Calculations in XAML Bindings are Unsupported

Ok, so maybe you want to try to do calculations in the XAML Binding. It doesn’t work.

You can enter this and while it will compile, the Binding won’t work:

Text="{Binding ElementName=slider1, Path=(int)Value}"

You can enter this and while it will compile, the Binding won’t work:

Text="{Binding ElementName=slider1, Path=Value + 1}"

Example 3 – Binding and Element’s property to CheckBox.IsChecked

Ok, lets do a slight more complex example. We are going to have more than two elements. We are going to have a ListBox that contains a list of items (ListBoxItems). We are going to have a TextBox that displays the content of the selected item.

Step 1 – Add the elements

  1. Add two items from the Toolbox:
    • TextBox
    • ListBox
  2. Add multiple items to listBox1. This can be done either in the XAML or by clicking on the button for Items in the Properties of the listBox1.

Step 2 – Adding Binding to the TextBox

  1. In the XAML, locate the textBox1 element.
  2. Add the following to the textBox1 element:Text="{Binding ElementName=listBox1, Path=SelectedItem.Content}"Notice that we are using a property of a property for the Path. This is allowed. SelectedItem is a property of listBox1, and Content is a property of SelectedItem.The XAML now looks like this (only two new lines exist):
    <Window x:Class="BindingATextBoxToAListBoxSelectedItem.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
        <Grid>
            <TextBox Height="23" Margin="12,23,12,0" Name="textBox1" VerticalAlignment="Top" Text="{Binding ElementName=listBox1, Path=SelectedItem.Content}"/>
            <ListBox Margin="12,52,12,110" Name="listBox1">
                <ListBoxItem>c:</ListBoxItem>
                <ListBoxItem>d:</ListBoxItem>
                <ListBoxItem>e:</ListBoxItem>
                <ListBoxItem>f:</ListBoxItem>
                <ListBoxItem>g:</ListBoxItem>
                <ListBoxItem>h:</ListBoxItem>
            </ListBox>
        </Grid>
    </Window>
    
  3. Compile and run your program.
  4. Select different items in the list and watch the textBox1 change to display the content of the selected item.

Copyright ® Rhyous.com – Linking to this post is allowed without permission and as many as ten lines of this page can be used along with this link. Any other use of this page is allowed only by permission of Rhyous.com.

5 Comments

  1. Daniel Schoeni says:

    Well nice.
    But what to do if 2 elements to bind (Checkbox + Progressbar as example) are in 2 different columns ?

    ...

    ...

    So the first progressbar appears and disappears if the checkbox is checked or not, the second one does nothing.

    Best regards
    Daniel

    • Rhyous says:

      Columns really have nothing to do with it.

      Do you have this:

      [ ] Check Box 1 | [******----] progressBar1
      [ ] Check Box 2 | [*****-----] progressBar2

      If so, progressBar1 binds to check box 1 and progress bar 2 binds to check box 2. The should work identically.

  2. Srinivasareddy says:

    Thanks a lot! Good one,it is very helpful to me. clear understanding of data binding concept.

  3. Aj2460 says:

    Thanks, Very Good Tutorial.
    Helped me to understand the concept of binding.

  4. Mihai Dabiste says:

    Thanks a lot! Very simple and very helpful.

Leave a Reply

Powered by sweetCaptcha