Блог

Я использую элемент управления Slider XAML в своем приложении UWP. Всякий раз, когда мы нажимаем на ползунок и меняем его значение, я хочу, чтобы большой палец ползунка просто показывал анимацию перевода при переходе из старого положения в новое. Как этого можно достичь?

Вы можете использовать свойство для получения последнего значения и воспроизвести анимацию, чтобы установить значение из последнего значения в текущее.

Добавление слайдера в xaml

     <Slider x:Name="Slider" Value="{x:Bind Value,Mode=TwoWay}"/>
  

Добавление DependencyProperty в MainPage.

     public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
        "Value", typeof(double), typeof(MainPage), new PropertyMetadata(default(double), (s
            , e) =>
        {
            ((MainPage) s)._lastValue = (double) e.OldValue;
        }));

    public double Value
    {
        get => (double) GetValue(ValueProperty);
        set => SetValue(ValueProperty, value);
    }

    private double _lastValue;
  

Value Можно установить _lastValue , с которого можно начать раскадровку

Добавление PointerPressedEvent и PointerReleasedEvent в код MainPage для Слайдера обработает это.

     public MainPage()
    {
        InitializeComponent();
        Slider.AddHandler(PointerPressedEvent, new PointerEventHandler(Slider_OnPointerPressed), true);
        Slider.AddHandler(PointerReleasedEvent, new PointerEventHandler(Slider_OnPointerReleased), true);
    }
  

Я сохраняю точку перехода в Slider_OnPointerPressed и сравниваю текущую точку в Slider_OnPointerReleased . Пользователь может щелкнуть Ползунок, с которого должна начинаться анимация, и пользователь может перетащить большой палец, с которого не должна начинаться анимация.

     private void Slider_OnPointerPressed(object sender, PointerRoutedEventArgs e)
    {
        var slider = (Slider) sender;

        ClickPoint = e.GetCurrentPoint(slider).Position;
    }

    private Point ClickPoint { set; get; }

    private void Slider_OnPointerReleased(object sender, PointerRoutedEventArgs e)
    {
        var slider = (Slider) sender;

        var point = e.GetCurrentPoint(slider).Position;

        var x = point.X - ClickPoint.X;
        var y = point.Y - ClickPoint.Y;
        var length = x * x   y * y;
        if (length < 10)
        {
            AnimationValue();
        }
    }
  

Значение Animation начнет анимацию.

     private void AnimationValue()
    {
        var storyboard = new Storyboard();

        var animation = new DoubleAnimation
        {
            From = _lastValue,
            To = Value,
            Duration = TimeSpan.FromSeconds(2),
            EasingFunction = new CubicEase(),
            EnableDependentAnimation = true
        };

        Storyboard.SetTarget(animation, Slider);
        Storyboard.SetTargetProperty(animation, "Value");

        storyboard.BeginTime = TimeSpan.Zero;
        storyboard.Children.Add(animation);

        storyboard.Begin();

        _storyboard = storyboard;
    }
  

Вы можете настроить Duration и EasingFunction , чтобы изменить время.

Весь код в github

Если вы умеете читать по-китайски, пожалуйста, прочтите мой блог, потому что мой английский очень плохой, я беспокоюсь, что не могу точно сказать вам, что я имею в виду.