Как плавно анимировать значение привязанного свойства из его старого значения в новое значение в WPF

Question

Как плавно анимировать предыдущее значение привязанного свойства к его новому значению?

Допустим, у нас есть следующие Canvas и Line.

<Canvas>
    <Line 
        Canvas.Top="0"
        Stroke="#887FFF00"
        StrokeThickness="2"
        X1="0" Y1="0"
        X2="0" Y2="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Canvas}}"
        Canvas.Left="{Binding Position}"
        >
    </Line>
</Canvas>

Горизонтальная позициястрока определяется свойством Position, связанным с вложенным свойством Canvas.Left.Когда Положение изменяется, скажем, от 100 до 200, я хотел бы анимировать положение линии от ее предыдущего значения, плавно переходя к новому значению.

Как мне это сделать?

Answer 1

Вместо привязки непосредственно к свойству источника с использованием синтаксиса {Binding} в XAML, вы можете подписаться на событие PropertyChanged модели представления самостоятельно в представлении и программно анимировать свойство, например:

private void OnViewLoaded(object sender, RoutedEventArgs e)
{
    ViewModel viewModel = DataContext as ViewModel;
    if (viewModel != null)
    {
        Canvas.SetLeft(line, viewModel.Position);
        viewModel.PropertyChanged += OnPropertyChanged;
    }
}

private void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
{
    if (e.PropertyName == "Position")
    {
        double from = Canvas.GetLeft(line);
        if (double.IsNaN(from))
            from = 0;
        ViewModel viewModel = sender as ViewModel;
        if (viewModel != null)
        {
            DoubleAnimation doubleAnimation = new DoubleAnimation()
            {
                From = from,
                To = viewModel.Position,
                Duration = TimeSpan.FromSeconds(1)
            };
            line.BeginAnimation(Canvas.LeftProperty, doubleAnimation);
        }
    }
}

XAML:

<Canvas Width="100" Height="100" Background="Beige">
<Line x:Name="line"
        Canvas.Top="0"
        Stroke="#887FFF00"
        StrokeThickness="2"
        X1="0" Y1="0"
        X2="0" Y2="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Canvas}}">
</Line>
</Canvas>

Это пример ситуации, когда вы хотите реализовать пользовательскую специфичную для представления логику в представлении, и выне хочу делать это в XAML.Это никак не нарушает схему MVVM.

Answer 2

Самый простой способ плавно анимировать свойство в wpf - использовать анимацию.

В вашем требовании есть несколько хитростей для анимации.

Вы не можете привязать «от» или «к» для анимации, так что это потребует создания анимации в коде.

Вам нужно свойство зависимости и, следовательно, объект зависимости для анимации значения.

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

Или ... вы можете определить раскадровку как ресурс и изменить его в коде для анимации.

Как это https://social.technet.microsoft.com/wiki/contents/articles/31191.wpf-tips-animating-a-viewmodel.aspx

Может быть, вам не нравится делать модель представления объектом зависимости.

Если вы согласны с небольшим количеством кода позади, тогда это объект зависимости. В качестве альтернативы вы можете добавить свойство зависимости в ваше окно. Свяжите это с Position и затем анимируйте canvas.left вашей строки или другого свойства зависимостей, с которым связана строка.