How to animate DataGrid Cell background if a certain data condition is met?

Question

I have a WPF DataGrid which is populated from a database. There is a cell which gives me a count. I want to add a flashing Background color to that cell if its value is more than 0. Thanks for helping me with my problem.

Answer 1

Create a converter that will check to see if a cell contains a number greater than 0:

namespace MyApp
{
    public class GreaterThanZeroConverter : IValueConverter
    {
        public object Convert(object value, Type targetType,
            object parameter, CultureInfo culture)
        {
            int cellValue;
            return Int32.TryParse((string)value, out cellValue) && cellValue > 0;
        }

        public object ConvertBack(object value, Type targetType,
            object parameter, CultureInfo culture)
        {
            return false;
        }
    }
}

Include your converter namespace in the xaml. Replace MyApp with the namespace of your converter:

xmlns:myApp="clr-namespace:MyApp"

Your grid will have to look something like this. The objects I am binding to have 2 properties: Col1 and Col2. If the value of Col1 is greater than 0, that cell will flash red.

<DataGrid ItemsSource="{Binding List}" AutoGenerateColumns="False">
    <DataGrid.Resources>
        <myApp:GreaterThanZeroConverter 
            x:Key="GreaterThanZeroConverter">
        </myApp:GreaterThanZeroConverter>
        <Style TargetType="DataGridCell" x:Key="FlashStyle">
            <Style.Triggers>
                <DataTrigger 
                    Binding="{Binding Col1, 
                    Converter={StaticResource GreaterThanZeroConverter}}" 
                    Value="True" >
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard 
                                x:Name="Blink" 
                                AutoReverse="True" 
                                RepeatBehavior="Forever">
                                <ColorAnimationUsingKeyFrames 
                                    BeginTime="00:00:00"
                                    Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
                                    <EasingColorKeyFrame 
                                        KeyTime="00:00:01" 
                                        Value="Red" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn 
            Binding="{Binding Col1}" 
            CellStyle="{StaticResource FlashStyle}"></DataGridTextColumn>
        <DataGridTextColumn 
            Binding="{Binding Col2}"></DataGridTextColumn>
    </DataGrid.Columns>
</DataGrid>

Edit

If you have to make cells in multiple columns blink based on what they contain, you can change

<DataTrigger 
    Binding="{Binding Col1, 
    Converter={StaticResource GreaterThanZeroConverter}}" 
    Value="True" >
  ...

To

<DataTrigger 
    Binding="{Binding 
        Content.Text,
        RelativeSource={RelativeSource Self},
        Converter={StaticResource GreaterThanZeroConverter}}" 
    Value="True" >

And set the CellStyle for each of the columns that you want to blink to our FlashStyle:

<DataGrid.Columns>
    <DataGridTextColumn 
        Binding="{Binding Col1}" 
        CellStyle="{StaticResource FlashStyle}"></DataGridTextColumn>
    <DataGridTextColumn 
        Binding="{Binding Col2}"
        CellStyle="{StaticResource FlashStyle}"></DataGridTextColumn>
</DataGrid.Columns>

Note that this will probably only work with DataGridTextColumns. If you are using DataGridTemplateColumns it will be a bit more tricky.