Question

I have a datagrid bound to an ObservableCollection, and what I’d like to do is highlight new rows when they are added to the datagrid (i.e. when a new object is inserted into the ObservableCollection). I’d like to highlight the rows when they are inserted by changing the background colour initially, but then having the colour fade back to normal over time. I’ve tried a variety of different methods to get it to work but nothing quite works properly.

Method 1: I have an event trigger that fires when the column loads. It does fire when the element loads, but it seems to fire almost randomly on other old rows as well (rows on which it already fired once when the row was new).

<DataGridHyperlinkColumn x:Name="OrderID" Binding="{Binding OrderNumber}" Header="Order" SortMemberPath="ciOrderId">
    <DataGridHyperlinkColumn.ElementStyle>                                
        <Style TargetType="TextBlock">
            <Setter Property="Background" Value="Transparent"/>
            <EventSetter Event="Hyperlink.Click" Handler="OrderNumber_Click" />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation 
                                            Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)" 
                                            Duration="00:00:03" 
                                            From="Red" To="Transparent" />
                        </Storyboard>                                                
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </DataGridHyperlinkColumn.ElementStyle>
</DataGridHyperlinkColumn>

Method 2: I made a bool in the view model that is set to true when the new item is added to the ObservableCollection. I then check this value in a trigger and if it is true I fire the storyboard. I can’t get this to work properly though, and the application keeps erroring out when I run it. Also, I can’t figure out a way to set this value to false once the storyboard has run (I can’t use the storyboard’s Completed event because the DataTrigger is in a style).

<DataTrigger Binding="{Binding isNew}" Value="True">
    <DataTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation
                    Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)" 
                    Duration="00:00:03" 
                    From="Red" To="{x:Null}" FillBehavior="Stop"/>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.EnterActions>
</DataTrigger>

Method 3: I tried setting a timestamp field in the view model when the new item is added to the observable collection. Then in XAML I want to be able to compare that timestamp to the current time, and if it matches then I will fire the event. I even have another field that contains the current time and is automatically updated by INotifyPropertyChanged, but I can’t seem to figure out a way to compare the timestamp of the new row to the field containing the current time.

I feel like there must be a solution to this, but after spending a frustrating day trying to figure it out I’m hoping someone out there will be able to shed some light.

Answer 1

While working on another issue I found something that helped me solve this problem. The solution in Method 1 is very close, it was just a matter of solving the problem of the seemingly random other rows also being highlighted at seemingly random times. The problem was container recycling (more information in this question: WPF Toolkit DataGrid Checkbox Issues).

Anyways, all I had to do was add the following tag to my datagrid:

VirtualizingStackPanel.VirtualizationMode="Standard"

And then I used the same trigger as in method 1:

<DataGridHyperlinkColumn x:Name="OrderID" Binding="{Binding OrderNumber}" 
        Header="Order" SortMemberPath="ciOrderId">
    <DataGridHyperlinkColumn.ElementStyle>                                
        <Style TargetType="TextBlock">
            <Setter Property="Background" Value="Transparent"/>
            <EventSetter Event="Hyperlink.Click" Handler="OrderNumber_Click" />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation 
                                Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)" 
                                Duration="00:00:03" 
                                From="Red" To="Transparent" />
                        </Storyboard>                                                
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </DataGridHyperlinkColumn.ElementStyle>
</DataGridHyperlinkColumn>

Now I’m able to highlight new rows as they are inserted into my datagrid. Very useful!