Francisco Moreno's Blog

WPF provides powerful data-binding capabilities, yet easy to implement and understand that let you develop applications by writing a few lines of code. In this article I will show you how to bind control properties to other control properties without writing any code-behind. The sample application contains to Slider controls and one Button. The sliders will modify both the Height and the Width properties of the button in real-time. In order to achieve this, we bind the sliders' Value property to the Height and the Width properties of the button.

Let's start by firing up Visual Studio and creating a new WPF Application project. After that, we will change the size of our application so the contents that we will be adding later can fit. Use 400 for the Height and 500 for the Width properties of the Window.

Next we are going to replace the default Grid for a StackPanel. So our XAML should look like this so far:

<Window x:Class="BasicBinding.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Basic Binding" Height="400" Width="500">
    <StackPanel>

    </StackPanel>
</Window>

Now we are going to start adding controls to our application. Let's start by adding two Label and two Slider controls:

<Label>Button's Height:</Label>
<Slider x:Name="sliderHeight" Margin="5,5,5,5" Height="50" Maximum="150" Minimum="20" Value="50"></Slider>
<Label>Button's Width:</Label>
<Slider x:Name="sliderWidth" Margin="5,5,5,5" Height="50" Maximum="150" Minimum="20" Value="50"></Slider>

The sliders' properties are self-explanatory: we have set a maximum of 150, a minimum of 20 and a start value of 50. This way, the button will be always visible even though the sliders' value is set to its minimum.

Now it's time to add the button, which is the interesting part of this article:

<Button x:Name="button" Width="{Binding ElementName=sliderWidth, Path=Value}" Height="{Binding ElementName=sliderHeight, Path=Value}">Button</Button>

As you can see, we are binding the sliders' Value property to both the Height and the Width properties of the button. Let's explain some concepts used here:

• The ElementName property is one of the ways you can explicitly set the source of a Binding and override the inherited data context. More info.
• Use the Path property to specify the source value you want to bind to (normally the name of the property of the source object to use for the binding, such as Path=PropertyName). More info.

It's time to test the application. If everything is right, you should be able to resize the button using the sliders.

As we have seen, WPF data-binding is very powerful and easy to implement. It saves you a lot of code and is quite flexible. Now it is your turn to play with it. Enjoy.