我如何收听 UWP Xaml 滑块操作 start/end 事件？

Question

我应该在 UWP Xaml 滑块上监听哪些事件以确定用户何时开始和结束操作。

当您有一个表示某些不断变化的应用程序状态（例如，动画时间）的滑块并且您希望在用户与滑块交互时暂停更新时，此功能很重要。

此问题已针对 WPF 和 Windows Phone 得到解答，但未针对 UWP 得到解答。其他解决方案对 UWP 不起作用或不完整。

Answer 1

您需要侦听来自 Slider 模板的几个元素的交互事件：Thumb 和 Container。这是因为用户可以通过单击和拖动来直接操作拇指，但他们也可以单击滑块上的任意位置，拇指将跳到该位置（即使看起来您正在操纵拇指，但实际上拇指是只是在每次鼠标移动时重新定位 - 您仍在与容器交互）。

有几个注意事项：

缩略图和容器都处理它们的输入事件而不传递它们，因此您需要使用附加 RoutedEvent 处理程序的 AddHandler 方法，以便获得已经处理过的事件。
您需要在应用控件模板后附加事件处理程序，这意味着您需要子class Slider 以覆盖受保护的方法。

此处介绍了 RoutedEvent 处理程序信息：https://docs.microsoft.com/en-us/windows/uwp/xaml-platform/events-and-routed-events-overview#registering-handlers-for-already-handled-routed-events

下面的 SliderEx class 添加了一些事件，可用于检测用户何时 begins/ends 与滑块交互：

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);
            }
        }
    }
}

我如何收听 UWP Xaml 滑块操作 start/end 事件？

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

events

slider

uwp

uwp-xaml