Which event happens when I touch the thumb of the slider?

问题

I'm customize a slider to making seeking bar for video. What I want is that when I touch the thumb the video stops. Then I can drag the thumb and display the video corresponding to the slider's value. This is my Slider in XAML

<Slider Style="{StaticResource SliderStyle1}" Grid.Column="1" x:Name="volumeSlider" 
Width="Auto"  VerticalAlignment="Center" ValueChanged="volumeSlider_ValueChanged" 
DragLeave="volumeSlider_DragLeave" DragEnter="volumeSlider_DragEnter" 
DragStarting="volumeSlider_DragStarting" 
ManipulationStarted="volumeSlider_ManipulationStarted" ManipulationMode="All" 
Tapped="volumeSlider_Tapped"/>

I've try many event but none of them occur when mouse pointer starts touching the thumb (Not tap or click). Does anyone know about such event?

回答1:

You would normally use PointerPressed event (see docs). However, this has two issues. First, the Thumb already handles such pointer interaction, so PointerPressed never bubbles out of the Slider. Secondly, it would be triggered for any location of the Slider, not only the thumb.

To work around this, you will need to handle the event on the Thumb itself. First, we will create a helper method that searches the visual tree:

public T FindChild<T>(DependencyObject parent)
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
    {
        var child = VisualTreeHelper.GetChild(parent, i);
        if (child is T typedChild)
        {
            return typedChild;
        }
        var inner = FindChild<T>(child);
        if (inner != null)
        {
            return inner;
        }
    }
    return default;
}

Note that this and many similar useful methods are available in the Windows Community Toolkit as part of Visual Tree Extensions.

Now, we search for the Thumb within the control:

var thumb = FindChild<Thumb>(MySlider);

Finally, we attach the PointerPressed event. Because it is already handled by the Slider control itself, we need to use AddHandler, that allows us to observe event that are marked as handled too:

thumb.AddHandler(
    UIElement.PointerPressedEvent, 
    new PointerEventHandler(Thumb_PointerPressed), 
    true);

And in the handler you can then do anything you require:

private void Thumb_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    // ...
}

回答2:

According to your description, you want an event to have occurred when the mouse pointer starts touching the thumb. PointerEntered event occurs when a pointer enters the hit test area of this element, which meets your requirement.

Update:

Derive from official document, mouse input is associated with a single pointer assigned when mouse input is first detected. Clicking a mouse button (left, wheel, or right) creates a secondary association between the pointer and that button through the PointerPressed event. The PointerReleased event is fired only when that same mouse button is released. Because of this exclusive association, other mouse button clicks are routed through the PointerMoved event. So you can find the Thumb control named “HorizontalThumb”, and add PointerMoved event like following.

private async void HorizontalThumb_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    Windows.UI.Xaml.Input.Pointer ptr = e.Pointer;
    if (ptr.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Mouse)
    {
        Windows.UI.Input.PointerPoint ptrPt = e.GetCurrentPoint(MySlider);
        if (ptrPt.Properties.IsLeftButtonPressed)
        {
          //add your code to stop video                 
        }
    }
    e.Handled = true;
}

来源：https://stackoverflow.com/questions/65589191/which-event-happens-when-i-touch-the-thumb-of-the-slider

标签

uwp

slider

uwp-xaml