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

Comments

Anonymous said…
Big thanks, great!
Wednesday, May 5, 2010 at 12:48:00 AM PDT
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) ?
Saturday, June 26, 2010 at 8:59:00 PM PDT
Marcin said…
Link to source code is broken.
Wednesday, June 5, 2013 at 1:34:00 AM PDT
Post a Comment

Popular posts from this blog

Time Picker User Control

The easiest way to create a WPF TimePicker control is to make a user control wrapped for TimeSpan CLR object. Here is a very simple sample which does that. Basically TimeControl is having 4 DPs one for the entire Value (Which is a TimeSpan) and individual Hours, Minutes and Seconds. (We can optionally add Days and Milliseconds also to make the control rich). Here is a C# class TimeControl.xaml.cs public partial class TimeControl : UserControl { public TimeControl() { InitializeComponent(); } public TimeSpan Value { get { return ( TimeSpan )GetValue(ValueProperty); } set { SetValue(ValueProperty, value ); } } public static readonly DependencyProperty ValueProperty = DependencyProperty .Register( "Value" , typeof ( TimeSpan ), typeof ( TimeControl ), new UIPropertyMetadata ( DateTime .Now.TimeOfDay, new PropertyChangedCallback (OnValueChanged)));
Read more

A simple Multiselect ComboBox using expression Blend

Image
I have often seen requirements to have a combobox with multiple selection enabled. We know thatWPF ListBox control is having two special properties, which enables the multiple selection but the combobox doesnt have those public IList SelectedItems { get; } public SelectionMode SelectionMode { get; set; } There are many ways we can make a multiselect combo box 1)Create a custom control from the scratch and have a Listbox in the dropdown 2)Extend the combobox and add the above properties to it 3)Edit the Combobox control template to add necessary controls and binding. I am going to describe the 3rd idea from the above list, which is a total Expression Blend work, so no need of VS2008 to make a multiselect combobox from a simple combobox. Place a combobox in to the editing area and right click on the control to create an copy of the Control template. Now you can see the Control's tree on the left side of Expression Blend The ItemPresenter inside the scrollviewer is actually the
Read more

A Simple Radial Panel for WPF and SilverLight

Image
Geometry was one of the coolest topics in school for me. Probably because it uses a lot of figures to convey the concepts. Here I am trying to explain how we can leverage the Layout system in WPF and Silver light by taking an example of creating a Radial Panel. A RadialPanel lays out its children in a circular fasion. So before going in to the technical details, let us see how this problem get solved algorithmically.If you are asked to arrange a bunch of items in a circular path, what all things would you consider?. 1) How much space do I have? – Say X * Y rectangular area is the available size. 2) I will draw an approximate Circle (Or ellipse) inside the X*Y space. Assuming that the Radii are ‘Rx and Ry' 3) How many items are there to arrange? Say N – number 4) I know that 360 degrees are the total angular space for a circle. So angular distance between each item will be 360/N degrees. 6) I can calculate the coordinate point to which an item should be placed. That is by doing the
Read more