Flash colour when value in ListView cell changes

Question

I have a ListView (shown below). I would like the cells to flash a colour when the value displayed changes (ideally one colour for increases, one for decreases).

I know how to write the animation for the colour (below), and I'm pretty sure I need to use a cell template so I can hook a trigger up to the style to start the animation. I'm just unsure what the best place to hook the trigger up to.

I was hoping that I could hook into the PropertyChanged events, but I'm not sure how.

    <ListView ItemsSource="{Binding MyListItems}">
        <ListView.View>
            <GridView>                
                <GridViewColumn Header="Value1" Width="50" CellTemplate="{StaticResource Value1CellTemplate}" />
                <GridViewColumn Header="Value2" Width="50" DisplayMemberBinding="{Binding Value2}" />
            </GridView>
        </ListView.View>
    </ListView>

Cell Template and Colour Animation:

    <DataTemplate x:Key="Value1CellTemplate">
        <TextBlock Text="{Binding LowerBound}" HorizontalAlignment="Right" />
    </DataTemplate>

    <Storyboard x:Key="IncreaseValueColourAnimation" Duration="0:0:2">
        <ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames.KeyFrames>
                <LinearColorKeyFrame Value="Red" KeyTime="0:0:0.1" />
                <LinearColorKeyFrame Value="Transparent" KeyTime="0:0:2" />
            </ColorAnimationUsingKeyFrames.KeyFrames>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>

Answer 1

I believe you are looking for the TargetUpdated event off FrameworkElement.

Occurs when the target value changes for any property binding on this element.

You should then be able to use an EventTrigger to run your animation.

Answer 2

This is the best I can come up with in the limited time I had available. I can help you further tomorrow if necessary. Mind, I cheated by using a TextBox for the CellTemplate, that enabled me to use the TextChanged event to trigger the ColorAnimation. I could not get your KeyframeAnimation to work, so I used a ColorAnimation. Good luck!

<Window x:Class="CellFlashSpike.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <Storyboard x:Key="IncreaseValueColourAnimation"
                    Duration="0:0:2"
                    AutoReverse="True">
            <ColorAnimation Storyboard.TargetProperty="(TextBox.Foreground).(SolidColorBrush.Color)"
                            To="Red"/>
        </Storyboard>
        <DataTemplate x:Key="FlashTemplate">
            <TextBox Width="50" Text="{Binding Path=.}">
                <TextBox.Style>
                    <Style>
                        <Style.Triggers>
                            <EventTrigger RoutedEvent="TextBox.TextChanged">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <StaticResource ResourceKey="IncreaseValueColourAnimation"/>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBox.Style>
            </TextBox>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ListView ItemsSource="{Binding Numbers}">
            <ListView.View>
                <GridView>
                    <GridViewColumn CellTemplate="{StaticResource FlashTemplate}"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

namespace CellFlashSpike
{
    public partial class Window1 : Window
    {
        public List<string> Numbers { get; set; }

        public Window1()
        {
            Numbers = new List<string> { "3", "4" };
            InitializeComponent();
            DataContext = this;
        }
    }
}