Question

I’m using a TextBlock in a datatemplate for a cell in a datagrid. I have a requirement that says when the value of the cell changes, the text should:

• fade out before changing
• value should change
• fade back in again

At the moment I use the TargetUpdated RoutedEvent to trigger an animation to make the text fade away and then come back. But the fade happens after the text has already changed value on screen.

<DataTemplate>
    <Border>
        <TextBlock Name="templateTextBlock" Text="{Binding Path=FirstName, NotifyOnTargetUpdated=True}" />
    </Border>
    <DataTemplate.Triggers>
        <EventTrigger RoutedEvent="Binding.TargetUpdated">
            <BeginStoryboard>
                <Storyboard AutoReverse="True">
                    <DoubleAnimation Storyboard.TargetName="templateTextBlock" Storyboard.TargetProperty="Opacity" To=".1" Duration="0:0:.5" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

My question is how do I achieve the effect required – fade out, change text, fade in?

Many thanks.

Answer 1

Wrote an interactivity behavior which should do this:

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

<TextBlock Text="{Binding Name, NotifyOnTargetUpdated=True}">
    <i:Interaction.Behaviors>
        <b:AnimatedTextChangeBehavior AnimationDuration="0:0:0.1" />
    </i:Interaction.Behaviors>
</TextBlock>

class AnimatedTextChangeBehavior : Behavior<TextBlock>
{
    public Duration AnimationDuration { get; set; }

    private string OldValue = null;
    private string NewValue = null;

    DoubleAnimation AnimationOut;
    DoubleAnimation AnimationIn;

    protected override void OnAttached()
    {
        base.OnAttached();

        AnimationOut = new DoubleAnimation(1, 0, AnimationDuration, FillBehavior.HoldEnd);
        AnimationIn = new DoubleAnimation(0, 1, AnimationDuration, FillBehavior.HoldEnd);
        AnimationOut.Completed += (sOut, eOut) =>
        {
            AssociatedObject.SetCurrentValue(TextBlock.TextProperty, NewValue);
            OldValue = NewValue;
            AssociatedObject.BeginAnimation(TextBlock.OpacityProperty, AnimationIn);
        };

        Binding.AddTargetUpdatedHandler(AssociatedObject, new EventHandler<DataTransferEventArgs>(Updated));
    }

    private void Updated(object sender, DataTransferEventArgs e)
    {
        string value = AssociatedObject.GetValue(TextBlock.TextProperty) as string;
        AssociatedObject.BeginAnimation(TextBlock.OpacityProperty, AnimationOut);
        NewValue =  value;
        if (OldValue == null)
        {
            OldValue = value;
        }
        AssociatedObject.SetCurrentValue(TextBlock.TextProperty, OldValue);
    }
}

If you do not want to use the Blend SDK‘s Interactivity for this you can just take the code and refactor it into a seperate class and use the TextBlock’s Loaded event to do the setup.