Get Microsoft Silverlight

Wednesday, July 29, 2009

Attaching Preview behavior to a WPF Slider control

PreviewSlider PreviewSlider1

Today I am sharing about a common usage of Slider control for the Timeline scenarios as we can see in many Media players. The above pictures shows timeline/scrubber control of some popular video players(Hulu and Youtube). We can edit the Slider Style and ControlTemplate to create the same look and feel of the above two scrubbers except the preview value get displayed when we hover over.

While figuring out an easy way to build this, I got two different options. The first and the obvious solution is to extend the Slider class to create a new custom control, which will have a new DependancyProperty called PreviewValue to hold the mouse over value. The biggest challenge in this approach is to make this control as much flexible(design and dev friendly) because people may customize the control by giving different Size and Margins to the Track and other parts of the Control template, which will make our assumptions invalid in some cases. And another issue is having a totally modified Controltemplate for the new Slider makes ‘Integrators’ life hard, because this control will introduce one mandatory visual inside the control template with a PART_naming convention.

Would it be cool if we can achieve this by adding couple of Attached properties to any regular Slider control? Yes that seems to be an elegant solution to me. So I have created a static class -PreviewSliderHelper to hold the required attached dependancy properties. The XAML code for the Slider is shown below. You need to specify a Style in the resource which will set to the preview display visual. The tooltip like visual is created using a custom Adorner and repositioning it based on the mouse move, I will discuss the details about this generic adorner implementation in another blog post.

image

And the final UI came out like this. Get the Executable

Jobi_mediaPlayer

The main technical details you might wanted to know is how to grab the preview value on the mouse over. We have to find out the PART_Track inside the slider and call ValueFromPoint() function to get the exact Slider.Value for each mouse move.

image 

Source Code -Of course there are lot to improve on this messy code :) ,but feel free to share your thoughts on this

5 comments:

婷婷 said...

Your blog is wonderful, I like it very much, thank you!
By the way, do you like Burberry Polos, which are very chic, especially the Ralph Lauren Polo Shirts, I love them very much. I also like playing sports, it can keep healthy, what do you like to do?
We are the outlet of Wholesale Polo Shirt, Polo Ralph Lauren shirts on sale,these products are best-seller in our store cheap polo shirts Cheap Polo ShirtsToday is Christmas, and our products also have a corresponding discount activitiesWholesale Polo Shirts -50% OFF,cheap polo shirts Cheap Polo ShirtsSo if you love these, you should not miss our store, we can meet what you want, and you can find many surprise in our store

Anonymous said...

Big thanks, great!

Anonymous said...

Great Slider, I have converted it to a Vertical slider pretty easily. Is there any license attached to your work? Can I use it in my project? If so, how could I credit you (name, etc) ?

Anonymous said...

Thank you

Marcin Sulecki said...

Link to source code is broken.