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.