How do I listen to UWP Xaml Slider manipulation start/end events?

Question

What events should I listen to on a UWP Xaml Slider to determine when the user begins and ends manipulation.

This functionality is important when you have a slider that represents some continuously changing app state (say, an animation time) and you want to pause the update when the user interacts with the slider.

This question has been answered for WPF and Windows Phone, but not UWP. The other solutions do not work, or are incomplete, for UWP.

Answer 1

You need to listen to interaction events from a couple of the elements of the Slider template: the Thumb, and the Container. This is because the user can manipulate the thumb directly by clicking and dragging it, but also they can click anywhere on the slider and the thumb will jump to that location (even though it looks like you are then manipulating the Thumb, actually the thumb is just being relocated every time the mouse moves - you are still interacting with the container).

There are a couple caveats:

• the thumb and container both process their input events and do not pass them on, so you need to use the AddHandler method of attaching RoutedEvent handlers so that you get events which have already been processed.

• you need to attach the event handlers after the control template has been applied, which means you need to subclass the Slider to override a protected method.

The RoutedEvent handler information is covered here: https://learn.microsoft.com/en-us/windows/uwp/xaml-platform/events-and-routed-events-overview#registering-handlers-for-already-handled-routed-events

The following SliderEx class adds some events which can be used to detect when the user begins/ends interacting with the slider:

public class SliderEx : Slider
{
    public event EventHandler SliderManipulationStarted;
    public event EventHandler SliderManipulationCompleted;
    public event EventHandler SliderManipulationMoved;
    private bool IsSliderBeingManpulated
    {
        get
        {
            return this.isContainerHeld || this.isThumbHeld;
        }
    }


    private bool isThumbHeld = false;
    private bool isContainerHeld = false;

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        var thumb = base.GetTemplateChild("HorizontalThumb") as Thumb;
        if (thumb == null)
        {
            thumb = base.GetTemplateChild("VerticalThumb") as Thumb;
        }
        if (thumb != null)
        {
            thumb.DragStarted += this.Thumb_DragStarted;
            thumb.DragCompleted += this.Thumb_DragCompleted;
            thumb.DragDelta += this.Thumb_DragDelta;
        }

        var sliderContainer = base.GetTemplateChild("SliderContainer") as Grid;
        if (sliderContainer != null)
        {
            sliderContainer.AddHandler(PointerPressedEvent, 
                new PointerEventHandler(this.SliderContainer_PointerPressed), true);
            sliderContainer.AddHandler(PointerReleasedEvent, 
                new PointerEventHandler(this.SliderContainer_PointerReleased), true);
            sliderContainer.AddHandler(PointerMovedEvent, 
                new PointerEventHandler(this.SliderContainer_PointerMoved), true);
        }
    }

    private void SliderContainer_PointerMoved(object sender, 
        Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
    {
        this.InvokeMove();
    }

    private void SliderContainer_PointerReleased(object sender, 
        Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
    {
        this.SetContainerHeld(false);
    }

    private void SliderContainer_PointerPressed(object sender, 
        Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
    {
        this.SetContainerHeld(true);
    }

    private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
    {
        this.InvokeMove();
    }

    private void Thumb_DragCompleted(object sender, DragCompletedEventArgs e)
    {
        this.SetThumbHeld(false);
    }

    private void Thumb_DragStarted(object sender, DragStartedEventArgs e)
    {
        this.SetThumbHeld(true);
    }

    private void SetThumbHeld(bool held)
    {
        bool wasManipulated = this.IsSliderBeingManpulated;
        this.isThumbHeld = held;
        this.InvokeStateChange(wasManipulated);
    }

    private void SetContainerHeld(bool held)
    {
        bool wasManipulated = this.IsSliderBeingManpulated;
        this.isContainerHeld = held;
        this.InvokeStateChange(wasManipulated);
    }

    private void InvokeMove()
    {
        this.SliderManipulationMoved?.Invoke(this, EventArgs.Empty);
    }

    private void InvokeStateChange(bool wasBeingManipulated)
    {
        if (wasBeingManipulated != this.IsSliderBeingManpulated)
        {
            if (this.IsSliderBeingManpulated)
            {
                this.SliderManipulationStarted?.Invoke(this, EventArgs.Empty);
            }
            else
            {
                this.SliderManipulationCompleted?.Invoke(this, EventArgs.Empty);
            }
        }
    }
}