Ufdjrw

How do I smoothly animate from the previous value of a bound property to it's new value?

Let's say we have the following Canvas and 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>

The horizontal position of the line is determined by a Position property bound to the Canvas.Left attached property. When the Position changes from say, 100 to 200, I would like to animate the position of the line from it's previous value, smoothly to it's new value.

How do I do this?

By far the simplest way to animate a property smoothly in wpf is to use an animation.

There are a few tricky bits to animations for your requirement though.

You can't bind a "from" or "to" on an animation so this will involve creating an animation in code.

You need a dependency property and hence a dependency object to animate a value.

You could consider making the viewmodel which exposes position into a dependency object. You can then create a new animation in code when you need to animate it and just retain your binding there.

Or... you could define a storyboard as a resource and alter that in code to do your animation.

Like this https://social.technet.microsoft.com/wiki/contents/articles/31191.wpf-tips-animating-a-viewmodel.aspx

Maybe you don't fancy making the viewmodel a dependency object.

If you're ok with a bit of "code behind" in your view then that's a dependency object. You could alternatively add a dependency property to your window. Bind that to Position and then animate the canvas.left of your line or another dependency property the line is bound to.

Instead of binding to directly the source property using the Binding syntax in XAML, you could subscribe to the PropertyChanged event of the view model yourself in the view and animate the property programmatically, e.g.:

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>

This is an example of a situation where you want to implement custom view-specific logic in the view, and you don't want to do this in XAML. This does not break the MVVM pattern in any way.