Slider does not drag in combination with IsMoveToPointEnabled behaviour

Here is the improved version of @TimPohlmann's answer.

this one raises MouseButtonEventHandler only once. although the thumb raises DragDeltaEventHandler internally on every mouse move. but I found it unnecessary to fire MouseLeftButtonDownEvent on thumb at every mouse move myself.

Also there is no need for helper variable.

This is implemented as behavior. AssociatedObject is the slider that this behavior is attached to.

XAML:

<Slider ...>
    <i:Interaction.Behaviors>
        <slid:FreeSlideBehavior />
    </i:Interaction.Behaviors>
</Slider>

Behavior:

public sealed class FreeSlideBehavior : Behavior<Slider>
{
    private Thumb _thumb;

    private Thumb Thumb
    {
        get
        {
            if (_thumb == null)
            {
                _thumb = ((Track)AssociatedObject.Template.FindName("PART_Track", AssociatedObject)).Thumb;
            }
            return _thumb;
        }
    }

    protected override void OnAttached()
    {
        AssociatedObject.MouseMove += OnMouseMove;
    }

    protected override void OnDetaching()
    {
        AssociatedObject.MouseMove -= OnMouseMove;
    }

    private void OnMouseMove(object sender, MouseEventArgs args)
    {
        if (args.LeftButton == MouseButtonState.Released) return;
        if(Thumb.IsDragging) return;
        if (!Thumb.IsMouseOver) return;

        Thumb.RaiseEvent(new MouseButtonEventArgs(args.MouseDevice, args.Timestamp, MouseButton.Left)
        {
            RoutedEvent = UIElement.MouseLeftButtonDownEvent
        });
    }
}

The simplest way is to subclass Slider:

public class CustomSlider : Slider
{
  public override void OnPreviewMouseMove(MouseEventArgs e)
  {
    if(e.LeftButton == MouseButtonState.Pressed)
      OnPreviewMouseLeftButtonDown(e);
  }
}

In which case your XAML would be:

<my:CustomSlider IsMoveToPointEnabled="True" />

For a more versatile solution that doesn't subclass Slider you can do it with an attached property:

public class SliderTools : DependencyObject
{
  public static bool GetMoveToPointOnDrag(DependencyObject obj) { return (bool)obj.GetValue(MoveToPointOnDragProperty); }
  public static void SetMoveToPointOnDrag(DependencyObject obj, bool value) { obj.SetValue(MoveToPointOnDragProperty, value); }
  public static readonly DependencyProperty MoveToPointOnDragProperty = DependencyProperty.RegisterAttached("MoveToPointOnDrag", typeof(bool), typeof(SliderTools), new PropertyMetadata
  {
    PropertyChangedCallback = (obj, changeEvent) =>
    {
      var slider = (Slider)obj;
      if((bool)changeEvent.NewValue)
        slider.MouseMove += (obj2, mouseEvent) =>
        {
          if(mouseEvent.LeftButton == MouseButtonState.Pressed)
            slider.RaiseEvent(new MouseButtonEventArgs(mouseEvent.MouseDevice, mouseEvent.Timestamp, MouseButton.Left)
            {
              RoutedEvent = UIElement.PreviewMouseLeftButtonDownEvent,
              Source = mouseEvent.Source,
            });
        };
    }
  });
}

You would use this attached property on Slider along with the IsMoveToPointEnabled property:

<Slider IsMoveToPointEnabled="True" my:SliderTools.MoveToPointOnDrag="True" ... />

Both of these solutions work by converting PreviewMouseMove events into equivalent PreviewMouseLeftButtonDown events whenever the left button is down.

Note that the attached property does not remove the event handler when the property is set to false. I wrote it this way for simplicity since you almost never would need to remove such a handler. I recommend you stick with this simple solution, but if you want you can modify the PropertyChangedCallback to remove the handler when NewValue is false.


Inspired by Ray Burns Answer, the most simple way I found is this:

mySlider.PreviewMouseMove += (sender, args) =>
{
    if (args.LeftButton == MouseButtonState.Pressed)
    {
        mySlider.RaiseEvent(new MouseButtonEventArgs(args.MouseDevice, args.Timestamp, MouseButton.Left)
        {
            RoutedEvent = UIElement.PreviewMouseLeftButtonDownEvent,
                 Source = args.Source
        });
    }
};

With mySlider being the name of my Slider.

There are two issues with this solution (and most others in this topic):
1. If you click and hold the mouse outside of the slider and then move it on the slider, the drag will start.
2. If you are using the slider's autotooltip, it will not work while dragging with this method.

So here is an improved version, that tackles both problems:

mySlider.MouseMove += (sender, args) =>
{
    if (args.LeftButton == MouseButtonState.Pressed && this.clickedInSlider)
    {
        var thumb = (mySlider.Template.FindName("PART_Track", mySlider) as System.Windows.Controls.Primitives.Track).Thumb;
        thumb.RaiseEvent(new MouseButtonEventArgs(args.MouseDevice, args.Timestamp, MouseButton.Left)
        {
            RoutedEvent = UIElement.MouseLeftButtonDownEvent,
                 Source = args.Source
        });
    }
};

mySlider.AddHandler(UIElement.PreviewMouseLeftButtonDownEvent, new RoutedEventHandler((sender, args) =>
{
    clickedInSlider = true;
}), true);

mySlider.AddHandler(UIElement.PreviewMouseLeftButtonUpEvent, new RoutedEventHandler((sender, args) =>
{
    clickedInSlider = false;
}), true);

clickedInSlider is a private helper variable defined somwhere in the class.

By using the clickedInSlider helper variable we avoid 1. The PreviewMouseButtonDown event is handled (because of MoveToPoint = true), so we have to use mySlider.AddHandler.
By raising the event on the Thumb instead of the Slider, we ensure that the autotooltip shows up.

Tags:

C#

Wpf

Slider