Building a dual thumb slider for Silverlight 2 Beta 1

Article
04/08/2008

hosted by Silverlight Streaming - the source is available as an attachment at the bottom of this post.

The Slider control that shipped with the Silverlight 2 Beta 1 SDK only supports picking a single value. Back at Mix08 in March I threw together a control that allows selecting a range using two thumbs, but I haven't had a chance to talk about it until now. So, without further ado let me introduce the RangeFinder control.

[TemplatePart(Name = RangeFinder.RootElementName, Type = typeof(FrameworkElement))]

[TemplatePart(Name = RangeFinder.TrackGridElementName, Type = typeof(Grid))]

[TemplatePart(Name = RangeFinder.LeftTrackElementName, Type = typeof(Rectangle))]

[TemplatePart(Name = RangeFinder.RightTrackElementName, Type = typeof(Rectangle))]

[TemplatePart(Name = RangeFinder.LeftGridSplitterElementName, Type = typeof(GridSplitter))]

[TemplatePart(Name = RangeFinder.RightGridSplitterElementName, Type = typeof(GridSplitter))]

public class RangeFinder : RangeBase

{

/// <summary>

/// Raised when the UpperValue dependency property changes

/// </summary>

public event RoutedPropertyChangedEventHandler<double> UpperValueChanged;

/// <summary>

/// Constructor for the RangeFinder class

/// </summary>

public RangeFinder() {}

/// <summary>

/// Gets/sets the UpperValue dependency property for the upper value of the selected range

/// </summary>

public double UpperValue {get; set;}

/// <summary>

/// Gets/sets the ThumbWidth dependency property for width of the individual thumbs

/// </summary>

public double ThumbWidth {get; set;}

/// <summary>

/// Gets/sets the TrackMargin dependency property for the distance from the edges of the control that track should be displayed

/// </summary>

public Thickness TrackMargin {get; set;}

/// <summary>

/// Gets/sets the Background dependency property for the background of the control

/// </summary>

public Brush Background {get; set;}

/// <summary>

/// Gets/sets the Foreground dependency property for the foreground of the control

/// </summary>

public Brush Foreground {get; set;}

/// <summary>

/// Gets/sets the MinimumRange dependency property for the minimum allowable difference

/// between the Value and UpperValue properties

/// </summary>

public double MinimumRange {get; set;}

}

The first decision to make was whether or not I could extend the existing Slider control. I think I could have restyled the thumb by inserting a custom control that would have allowed me to expand it, but that seemed really complex. Instead, I chose to inherit directly from RangeBase and implement the UI of the control from scratch.

The Slider class uses a grid with three columns to lay out the UI. Moving the thumb actually changes the dimensions of the first and third columns. When the size of the first column changes, a rectangle in that column invokes a SizeChanged event handler which updates the Value based on the new size.

I thought that was a pretty slick approach so I borrowed the concept for RangeFinder. I had a problem though; I needed two independent values. Instead of creating a second thumb and trying to coordinate it with the first, I decided to use a control whose sole purpose in life is resizing grids - the GridSplitter.

Here is the general concept:

A three-column Grid
Two Rectangles, one filling the first column and the other filling the third.
Two GridSplitters, one aligned-right in the first column and the other aligned-left in the third.
Dragging one of the GridSplitters resizes the adjacent columns causing a rectangle in one of the columns to invoke its SizeChanged event handler which updates the Value or UpperValue property, as appropriate.
There is a little math behind the scenes to convert the value range (e.g. 1 to 100) to visual coordinates (e.g. 0 to 50 pixels).

Creating a default RangeFinder

Creating an instance of the control on a Silverlight page is very easy. The first RangeFinder shown in the example above just sticks with default colors and a Minimum of 0 and a Maximum of 1.

<local:RangeFinder x:Name="rangeFinder0" />

Seeing the RangeFinder's values

The RangeFinder isn't very fun though if you can't see what the Value and UpperValue properties actually are. Silverlight 2 Beta 1 doesn't dynamically update any UI data bound to dependency properties so you need to create a little Data Transfer Object (DTO) to fill the gap. The ValueDataObject class in the attached project serves this purpose.

/// <summary>

/// Data transport object for binding the UI to the actual values selected

/// </summary>

/// <remarks>

/// When dependency properties change in Silverlight 2 Beta 1, they do not

/// update the targets of any data binding made to those properties. One

/// way to do this is to use a data transport object that implements the

/// INotifyPropertyChanged interface as the source of the bindings as

/// demonstrated by this ValueDataObject class.

/// </remarks>

public class ValueDataObject : INotifyPropertyChanged

{

/// <summary>

/// Implementation of the INotifyPropertyChanged.PropertyChanged event

/// </summary>

public event PropertyChangedEventHandler PropertyChanged;

/// <summary>

/// Constructor for the ValueDataObject class

/// </summary>

/// <param name="instance">RangeFinder object to associate this instance with</param>

public ValueDataObject(RangeFinder instance, string valueFormat) {}

/// <summary>

/// Gets the Value property of the associated RangeFinder object

/// </summary>

public Double Value {get; }

/// <summary>

/// Gets a formatted string for the Value property of the associated RangeFinder object

/// </summary>

public string FormattedValue {get; }

/// <summary>

/// Gets the UpperValue property of the associated RangeFinder object

/// </summary>

public Double UpperValue {get; }

/// <summary>

/// Gets a formatted string for the UpperValue property of the associated RangeFinder object

/// </summary>

public string FormattedUpperValue {get; }

/// <summary>

/// Gets/sets the string format to be used when formatting the Value and UpperValue properties

/// </summary>

public string ValueFormat { get; set; }

}

Now, you want to set up the UI to be able to show the values. I used two TextBlocks in the second RangeFinder in the example above. Note that the example code binds the Text property of the TextBlocks to the FormattedValue and FormattedUpperValue properties of ValueDataObject. This allows it to change the formatting when converting the value to a string.

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<local:RangeFinder x:Name="rangeFinder1" Grid.Column="1"

Minimum="0" Maximum="5.5" Value=".5" UpperValue="5.0" MinimumRange="1.5"

Background="DarkGray" Foreground="Brown" />

</Grid>

It was very easy to change the default Background and Foreground colors, the Minimum and Maximum properties, and the initial Value and UpperValue properties. It is also easy to set a minimum range.

One last piece is needed to hook it all up. You need to set the DataContext of some parent UI element to be an instance of ValueDataObject. In the example code this is done in the code-behind for Page.xaml.

protected override void OnApplyTemplate()

{

base.OnApplyTemplate();

this.customRangeFinderContainer.DataContext = new ValueDataObject(this.rangeFinder1, "'$'0.00");

...

}

Customizing the RangeFinder

The third RangeFinder example from above re-templates the whole RangeFinder control and re-styles the GridSplitters. Even though the TextBlocks showing the Value and UpperValue properties are part of the GridSplitter style, the ValueDataObject instance in the parent's DataContext gives them something to bind to.

<local:RangeFinder x:Name="rangeFinder2" Height="70" Width="200" VerticalAlignment="Bottom" HorizontalAlignment="Center"

Minimum="10" Maximum="90" Value="20" UpperValue="70"

Background="Green">

<local:RangeFinder.Style>

<Setter.Value>

<Grid.Resources>

</GradientStopCollection>

</LinearGradientBrush>

</GradientStopCollection>

</LinearGradientBrush>

</GradientStopCollection>

</LinearGradientBrush>

</GradientStopCollection>

</LinearGradientBrush>

</GradientStopCollection>

</LinearGradientBrush>

</Style>

<Setter.Value>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle.Clip>

<PathGeometry.Figures>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Rectangle.Clip>

</Rectangle>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Setter.Value>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle.Clip>

<PathGeometry.Figures>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Rectangle.Clip>

</Rectangle>

<Rectangle.Clip>

<PathGeometry.Figures>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Rectangle.Clip>

</Rectangle>

<Rectangle.Clip>

<PathGeometry.Figures>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Rectangle.Clip>

</Rectangle>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</local:RangeFinder.Style>

</local:RangeFinder>

</Grid>

There are some things the RangeFinder sample code is missing - fancy state transitions, rock-solid coercion, and thorough testing. The code is provided as-is but feel free to party away and mutate it in to your own concoction.

RangeFinderExampleCode.zip

Building a dual thumb slider for Silverlight 2 Beta 1

Additional resources