In this article we will do some
customization on Slider Control available in Silverlight 3. In my previous
article Creating Button Control Template, we have done similar stuff but here we
will see some more.Creating Silverlight 3
Open up Blend 3 and create a Silverlight 3
and drop a Slider Control into the designer surface. 2)
click on your Slider and select "Edit Template" and then select "Edit a
a dialog box pops up asking to give a name to this style, give
you look at the ControlTemplate for slider, you will see there are two main
Grids within the template: "HorizontalTemplate" and "VerticalTemplate". These
grids encapsulate the default look for the slider when it is on the respective
Orientation. Now we will focus on customizing the Horizontal Template
- Two RepeatButton controls,
- A Rectangle (as the track) and
- A Thumb.
If you are in design view, you can see them in the
Objects and Timeline view like this:4)
the [TrackRectangle] element so that its Stroke and Fill are transparent, you do
it in Blend by right clicking on the brush editor and selecting
disable the RepeatButtons so that they do not interfere with our overlapping
Select both Repeat Buttons
HorizontalTrackLargeChangeIncreaseRepeatButton) and uncheck the IsHitTestVisible
checkbox from the common properties.
are turning IsHitTestVisible to false as opposed to say setting the Visibility
to collapsed because Visibility affects layout and Slider is
stretching/shrinking the button to alter the position the of the Thumb.
Now we will customize the template for the Thumb in the slider.
Select the HorizontalThumb in the HorizontalTemplate
and "Edit the Template" and "Edit a copy". 8)
prompted for name and location, enter "SliderThumbStyle" as the name and the
scope for definition is within this document.
how the Template for thumb has a lot of elements: ThumbOurterBorderFill,
ThumbOuterRoundBorder, etc. In our case we want a completely different/new look
& feel so we can delete all these. 9)
the Pen tool in Blend and draw the shape for your thumb. Make sure you have the
[Grid] element selected when you grab the Pen, as you will be drawing in the
grid. Get creative (feel free to do a triangle, a star, whatever you want).
The default thumb looks like this:
are all the changes need to customize the Slider & Thumb. Let's now see if
Though you wrote no code, you have redefined the look of thumb
and drastically altered the look and behavior of the
Now we will change the TrackRectangle.
Select TrackRectangle from the Object and Timeline Pane and change the fill
property so that it will look like the following.
press F5 and see your control in the browser. Looks like you have successfully
created your own Slider Control Template.
We will design some other
control next time. Enjoy Animating.
Here is the XAML code for your
You can also download sample code