How to show the Value inside the Thumb of Slider control in Silverlight..?

Recently I found some people keep asking this question,

"in Silverlight, How can I show the Value inside the Thumb of a Slider Control?"

well, when I tried to answer this question, I found this was not that easy to solve as I expected, so I dive deep into how the Slider control was designed originally by Microsoft an tried to find out some solution.

Now I got it, I rewrote the ControlTemplate and generated a brand new Slider which support showing the Value(or anything) inside the Thumb

Click to See the Live Demo

The screen shots are here:

When you slide the Thumb, the value 0.0 changes to be the Value property of the Slider control, like this:

How can I get this?

First let's see what is a Slider control? a Slider is a Range Control which indeed is a Control, why should I mention this? because a Control always have its own Template property, by modifying the Template property, you can "Assign" this Control different looking

in this example, i rewrote the Slider's Template(which is a ControlTemplate), so the Thumb could show the Value of the Slider

Release the Power of Silverlight Data Binding

DataBinding in Silverlight is so powerful, properly using it can make your work extremely easy and save you tons of time.

In this Live Demo I demonstrated how to use Data Binding to enable a tree view node to implement Add, Delete, or Edit action

You can also download the Source Code here ， since I am still updating this application, so the source code would be different every few days.


I didn't use any weird third party controls such as Telerik, it's just Silverlight Toolkit controls and other Silverlight foundation knowledge 


If you really interested, you can download the source code as your real project's  template(it's quite easy to extend other functionalists by yourself), it's totally free. I am very happy if you like this project.

Let me briefly introduce what it use for.

Suppose you are a Manager of a big Property Management Inc, You want to edit building information(that means Add, Edit or Delete a building), and you want to continue editing the Floors in this building, and the rooms in some particular Floor

this small Silverlight application is to help you implementing your work. By hovering the mouse to Building, Commands for this building will appear, including Edit, Add Floor, or Delete, Same command will appear for Floor and Room

By clicking the Edit or Add commands, a child window will appear to let you input or modify some basic information(currently only Name, but I will add more fun stuff later)

the Process is easy and straightforward,in the back, it is supported by well organized data(we call it ViewModel), without these neatly wroted data, the UI's code behind would be in a big messy if to implement the same functionality.



How to use it, at first, when you click



a Child Window would pop up letting you input a building's basic information

After that, a building item will be created and you can see it in the tree

when your mouse hover the Building, some other command icon would appear

this include an default "Edit" icon and an Expender, clicking the Expender you will see more commands




that would include a "Add Floor" command, "Delete Current Building" command, and a "Change Icon" Toggle Button. By Clicking the "Change Icon" toggle Button, a ListBox would appear letting you choose different icons

I changed the ListBox's ItemPanelTemplate to be a WrapPanel and make the Background to be transparency so that it looks more professional.

You can find similar fonction in Floor and Room items

everything listed above are done through DataBinding, now I briefly introduce how this application is designed and how these commands are bind to the VewModel