I felt pretty stupid for a couple of days trying to wire a slider up to a property in Expression Blend. I finally figured it out, so I thought I’d share the love as I didn’t see any tutorials on line.

So you have a new project in blend, it doesn’t much matter if it’s destined for wpf or silverlight, as far as I can tell the procedure is the same.

I’ve used a mega pointless thermometer to illustrate this, hopefully you’ll pick something less crap. (if you do, put a link to it in the comments!)

So I’ve drawn the thermometer as a rectangle and a circle. The circle is red, and the rectangle is a gradient between red and blue. The slider is going to control where the gradient stop is so that it looks like we are controlling the temperature with the slider.

So first thing’s first, you need some elements, so draw a thermometer, and throw in a slider. You’ll need to edit the slider’s properties a bit to make it be vertical.

Select the rectangle, and edit it’s fill. Set the gradient so that it looks right at the coldest end of the slider. Make sure you have the blue gradient stop selected, and then click it’s “Advanced Properties Options” icon, that’s the tiny little white dot to the right of the value.

Click ‘Data Binding’ and it’ll take you to the create data binding dialogue.

Select ‘element property’, and you’ll get a list of elements in your scene on the left, and once you’ve selected one of them, a list of that element’s properties on the right.

If you scroll all the way to the bottom, the important one for sliders is ‘Value’ just select it and away you go!

Build the project (F5) and see what happens.

For me, there were a few issues. The range was wrong on the slider, and the slider was sliding the wrong way.

To fix the range, select the slider and edit it’s ‘common properties’ the range on the gradient stop says it’s 0-100% but really it’s 0-1 as a double (programmer thinking alert), but we’ve set the red stop to about 80% so we need to set the range as maximum 0.8, minimum 0.

that fixes the range, but the slider is still working the opposite way to the way we expect. I’d imagine that there is an elegant way to fix this, but I just rotated the slider by 180° and all is forgiven!

Here’s the source files

You’ll have to forgive me if there is anything patently wrong in this tutorial, it has been written on a train, and I’ve been using blend for less than a week, but it is good to talk…
I’m sure that there are better ways to do this, so if you know, make a comment!

If you are reading this on facebook and you feel moved to make a comment, spare a thought for my online karma and copy the comment from facebook to www.notionparallax.co.uk/blog so that it shows up in both places. Ta.