Volume Slider like VLC

Question

I am searching for Volume Slider that looks and behave just like VLC's slider.

I found the following post about how to style the slider: Volume Slider CustomControl
but I also want the same behavior...

What is the difference between the behaviors: When you click on the slider [at the WPF] and move the mouse on the slider area (while mouse button still being hold) it should move the slider also to the position of the mouse on the slider.

I couldn't find how to do it.. maybe I should use something different than Slider?

Thanks for the help!

Answer 1

There is a property on the slider called IsMoveToPointEnabled that sets the slider to the correct value but only when you click it doesn't update as you drag.

To update as you drag you have to update the value yourself when the mouse is moved, the method Track.ValueFromPoint gives you the correct value, the track is part of the sliders template.

Example

public class DraggableSlider : Slider
{
    public DraggableSlider()
    {
        this.IsMoveToPointEnabled = true;
    }

    private Track track;
    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        track = Template.FindName("PART_Track", this) as Track;
    }

    protected override void OnMouseMove(MouseEventArgs e)
    {
        base.OnMouseMove(e);
        if(e.LeftButton == MouseButtonState.Pressed && track != null)
        {
            Value = track.ValueFromPoint(e.GetPosition(track));
        }
    }


    protected override void OnPreviewMouseDown(MouseButtonEventArgs e)
    {
        base.OnPreviewMouseDown(e);
        ((UIElement)e.OriginalSource).CaptureMouse();
    }

    protected override void OnPreviewMouseUp(MouseButtonEventArgs e)
    {
        base.OnPreviewMouseUp(e);
        ((UIElement)e.OriginalSource).ReleaseMouseCapture();
    }
}

The OnPreviewMouseUp/Down overrides capture the mouse, I tried VLC and that doesn't capture the mouse so you could remove them if you wanted. Capturing the mouse allows the value to change even if the mouse leaves the control similar to how scrollbars work.