What is the best way to start an animation when a bound value changes?

Question

This is a situation that comes up often:

In the View, you have a control bound to a ViewModel property (backed by a INotifyPropertyChanged). For example:

<TextBlock Text="{Binding Path=Subtotal}"/>

When the property changes, you need to bring the user attention to the fact with some creative animation. How I can utilize the fact that the view is already wired to the notification and avoid creating much of the extra code (or at least create it once and re-use). Data triggers are probably the best choice, but I do not know how to make them fire on any value change versus on some specific value.

The following options come to mind:

• raise an additional event in the ViewModel, subscribe in the View code-behind.
• create a datatrigger bound to the property mentioned using a convertor that would return true if the value is changing.
• create a datatrigger bound to a new boolean property on the ViewModel which is used to "signal" the change.
• create a behavior attached to the control which would subscribe to the control's dependency property change and start the animation.

Which one do you like/use? Did I miss any options?

P.S. It would be nice (but not critical) if the solution would provide a possibility to start the animation first and reflect the value change when it is ended.

Answer 1

Ok, this is what I came to after some experimenting.

I have created an Expression Blend 3 trigger with a dependency property (I named it Subscription). I bind the Subscription to the same value that my TextBlock is bound to and this trigger is attached to a ControlStoryboardAction from Expression Blend 3.

Here's the trigger:

public class DataTriggerPlus : TriggerBase<DependencyObject>
{
    public static readonly DependencyProperty SubscriptionProperty =
        DependencyProperty.Register("Subscription", 
            typeof(string),
            typeof(DataTriggerPlus),
            new FrameworkPropertyMetadata("",
              new PropertyChangedCallback(OnSubscriptionChanged)));

    public string Subscription
    {
        get { return (string)GetValue(SubscriptionProperty); }
        set { SetValue(SubscriptionProperty, value); }
    }

    private static void OnSubscriptionChanged(DependencyObject d,
      DependencyPropertyChangedEventArgs e)
    {
        ((DataTriggerPlus)d).InvokeActions(null);
    }
}

Here's how it is attached to the storyboard:

<TextBlock x:Name="textBlock" Text="{Binding TestProp}" Background="White">
    <i:Interaction.Triggers>
        <local:DataTriggerPlus Subscription="{Binding TestProp}">
            <im:ControlStoryboardAction 
                Storyboard="{StaticResource Storyboard1}"/>
        </local:DataTriggerPlus>
    </i:Interaction.Triggers>
</TextBlock>

I like this approach a lot, great job Blend 3 designers!

Edit: answering Drew comment...

Yes, it ships with Blend. You can just include Microsoft.Expression.Interactions.dll and System.Windows.Interactivity into your project.

And yes, it is verbose (I have asked if somebody figured out a good way to apply behaviours via Styles in this question) - but there is also a benefit of flexibility. For example you can not only start a storyboard, but also switch a state or do some other action from the same trigger.

Answer 2

You can create a trigger that will start the animation.

Something like this:

<Style>
    <Style.Triggers>
       <Trigger 
            Property="ViewModelProperty"
            Value="True">
            <Trigger.EnterActions>
                 <BeginStoryboard Storyboard="YourStoryBoard" />
            </Trigger.EnterActions>
       </Trigger>
    </Style.Triggers>
</Style>

As for the issue for the issue of setting the value once the animation has completed, this is a bit of a pain. As far as I'm aware you'd need to use the completed event on the storyboard, this requires code behind, which is something you want to avoid with MVVM.

I've tried using EventTriggers to bind to the completed events, but that also introduces some complications. See here for more details.