July 9th, 2009

Data Binding the Slider control in Silverlight

All Silverlight Examples, Silverlight 3 tutorials, Silverlight Blend Tutorials, by Gavin Wignall.

In the example below I show 6 ‘out of the box’ Silverlight Sliders (with my ‘Black’ styling added), each one is linked to a different value associated with a ScrollViewer. This is all done with Data Binding inside Expression Blend with no work carried out in the C# code behind file.

Data Binding allows us ‘designers’ to hook up actions between two different objects, in this case a slider control and a scrollViewer control.

Not all elements of an object can be controlled using Data Binding, but there are plenty that can be so overall the technique is very powerful.

The ‘How to’ bit

First off, in the above example I create 6 sliders and 1 ScrollViewer. So your Objects and Timeline list should look similar to this:

List of items in Blend

List of items in Blend

Next we need to select our ScrollViewer and look at the Properties window:

View the Properties window

View the Properties window

Notice that the items with a yellow outline indicate a value that is already linked using Data Binding. To edit a value that has been Data Binded or to set up a new one, we need to click on the small square icon, oftern to the right of a value (also highlighted yellow on existing Data Binded objects):

Click on the small square icon to the right of a value

Click on the small square icon to the right of a value

In the menu that appears you will see if Data Binding is available, if so, click Data Binding to open up the appropriate window:

Click on Data Binding from the menu

Click on Data Binding from the menu

To assign one of our sliders to the chosen value, make sure the middle tab is selected ‘Element Property’ and select the neccesary Slider control from the list on the left. Now we need to choose what value of the Slider needs to be linked, which in this case is ‘Value’. ‘Value’ is the position of the slider tab on the slider.

Once a slider has been Data Binded, we can change the properties of that slider to set the Minimum value, Maximum Value and its start position, all from the Common Properties tab under the Properties window.

You can now build the project and see that dragging the slider now effects the value that was assigned to it, with absolutely zero code needed!

Grab the Source

As always, grab the source here

Back Top

Responses to “Data Binding the Slider control in Silverlight”

  1. No comments yet.
  1. NewsPeeps (,July 10, 2009)

    Data Binding the Slider control in Silverlight » Silverlight Buzz…

    Thank you for submitting this cool story – Trackback from NewsPeeps…

  2. DotNetShoutout (,July 16, 2009)

    Data Binding the Slider control in Silverlight » Silverlight Buzz…

    Thank you for submitting this cool story – Trackback from DotNetShoutout…

  3. Using Data Binding to share data in Blend » Silverlight Buzz (,November 15, 2009)

    [...] Please upgrade your browser You can see a more complex example of data binding in this previous post of [...]

Leave a Reply

Back Top