.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Customize Slider Control In Silverlight Application

Posted By:Diptimaya Patra       Posted Date: April 10, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

Customize Slider Control In Silverlight Application. In this article we will do some customization on Slider Control available in Silverlight 3.


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 Application

Open up Blend 3 and create a Silverlight 3 Application.

1) Drag and drop a Slider Control into the designer surface.

2) Right click on your Slider and select "Edit Template" and then select "Edit a Copy".

3) When a dialog box pops up asking to give a name to this style, give MySliderStyle.

If 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 only.

HorizontalTemplate has
  • 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) Modify 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 "Reset".


5) Now, disable the RepeatButtons so that they do not interfere with our overlapping sliders.

6) Select both Repeat Buttons (HorizontalTrackLargeChangeDecreaseRepeatButton and HorizontalTrackLargeChangeIncreaseRepeatButton) and uncheck the IsHitTestVisible checkbox from the common properties.

You 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.

7) Select the HorizontalThumb in the HorizontalTemplate and "Edit the Template" and "Edit a copy".

8) When prompted for name and location, enter "SliderThumbStyle" as the name and the scope for definition is within this document.



Notice 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) Grab 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: 


Those are all the changes need to customize the Slider & Thumb.  Let's now see if it works.

Though you wrote no code, you have redefined the look of thumb and drastically altered the look and behavior of the slider. 

10) 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.


Now 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 reference.


You can also download sample code

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend