Question

I’ve found an interesting problem in my WPF app related to a MultiDataTrigger not starting a StoryBoard to animate a data grid cell. I have a WPF data grid control which is bound to an ObservableCollection containing POCOs that implement INotifyPropertyChanged.

What I want to achieve

A real time data grid which flashes updates as values change. When the value increases I want the cell to flash green; when the value decreases I want the cell to flash red. The animation simply animates the background colour of a cell from solid colour to transparent over a 1 second interval.

Problem

The storyboard isn’t started by the MultiDataTrigger after the first time. The MultiDataTrigger is monitoring changes to two properties: IsPositive and HasValueChanged. Initially HasValueChanged is false and later changes from false to true as soon as the Value property is set, and the animation works the first time. Thereafter HasValueChanged is pulsed from false to true to trigger a change notification, but the animation is not started.

Here’s the XAML style I’m applying to each data grid cell:

<Style TargetType="{x:Type TextBlock}">
    <Style.Setters>
        <Setter Property="Background"
                Value="Aqua" />
    </Style.Setters>
    <Style.Triggers>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=HasValueChanged}"
                            Value="True" />
                <Condition Binding="{Binding Path=IsPositive}"
                            Value="True" />
            </MultiDataTrigger.Conditions>
            <MultiDataTrigger.EnterActions>
                <RemoveStoryboard BeginStoryboardName="PositiveValueCellStoryboard" />
                <RemoveStoryboard BeginStoryboardName="NegativeValueCellStoryboard" />
                <BeginStoryboard Name="PositiveValueCellStoryboard"
                                    Storyboard="{StaticResource PositiveValueCellAnimation}"
                                    HandoffBehavior="SnapShotAndReplace" />
            </MultiDataTrigger.EnterActions>
        </MultiDataTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=HasValueChanged}"
                            Value="True" />
                <Condition Binding="{Binding Path=IsPositive}"
                            Value="False" />
            </MultiDataTrigger.Conditions>
            <MultiDataTrigger.EnterActions>
                <RemoveStoryboard BeginStoryboardName="PositiveValueCellStoryboard" />
                <RemoveStoryboard BeginStoryboardName="NegativeValueCellStoryboard" />
                <BeginStoryboard Name="NegativeValueCellStoryboard"
                                    Storyboard="{StaticResource NegativeValueCellAnimation}"
                                    HandoffBehavior="SnapShotAndReplace" />
            </MultiDataTrigger.EnterActions>
        </MultiDataTrigger>
    </Style.Triggers>
</Style>

Here’s the XAML for the animations:

<Storyboard x:Key="NegativeValueCellAnimation">
    <ColorAnimation Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
                    Timeline.DesiredFrameRate="10"
                    RepeatBehavior="1x"
                    From="Red"
                    To="Transparent"
                    Duration="0:0:1" />
</Storyboard>

<Storyboard x:Key="PositiveValueCellAnimation">
    <ColorAnimation Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
                    Timeline.DesiredFrameRate="10"
                    RepeatBehavior="1x"
                    From="Green"
                    To="Transparent"
                    Duration="0:0:1" />
</Storyboard>

Here’s the code for the POCO object that’s bound to each cell:

using System;
using System.Threading;
using Microsoft.Practices.Prism.ViewModel;

namespace RealTimeDataGrid
{
    public class Cell : NotificationObject
    {
        public Cell(int ordinal, int value)
        {
            Ordinal = ordinal;
            _value = value;
            LastUpdated = DateTime.MaxValue;
        }

        public void SetValue(int value)
        {
            Value = value;

            // Pulse value changed to get WPF to fire DataTriggers
            HasValueChanged = false;
            Thread.Sleep(100);
            HasValueChanged = true;
        }

        private int _value;

        public int Value
        {
            get { return _value; }
            private set
            {
                if (_value == value)
                    return;

                _value = value;

                // Performance optimization, using lambdas here causes performance issues
                RaisePropertyChanged("IsPositive");
                RaisePropertyChanged("Value");
            }
        }

        private bool _hasValueChanged;

        public bool HasValueChanged
        {
            get { return _hasValueChanged; }
            set
            {
                if (_hasValueChanged == value)
                    return;

                _hasValueChanged = value;

                // Performance optimization, using lambdas here causes performance issues
                RaisePropertyChanged("HasValueChanged");
            }
        }

        public int Ordinal { get; set; }

        public DateTime LastUpdated { get; set; }

        public bool IsPositive
        {
            get { return Value >= 0; }
        }

        public TimeSpan TimeSinceLastUpdate
        {
            get { return DateTime.Now.Subtract(LastUpdated); }
        }
    }
}

Apparent fix

Adding a Thread.Sleep(100) in between setting HasValueChanged twice within the SetValue method appears to fix the problem of the MultiDataTrigger not firing, but has undesired side effects.

Videos of the problem

Click here to see a video of the broken version.

Click here to see a video of the fixed version.

The ‘fixed’ version isn’t ideal because the Thread.Sleep causes the cells to update in an apparently sequential fashion rather than simultaneously as in the broken version. Besides, having a Thread.Sleep in there makes me feel bad 🙂

First of all; am I going about this all wrong? Is there a simpler / better way to achieve what I want? If not, what is the solution to this problem without having to resort to adding a Thread.Sleep (code smell!)?

Why doesn’t WPF cause the DataTrigger to fire when values are changed quickly? Is there something that causes WPF to ‘miss’ property changes; or does WPF simply ignore changes that go from one value to another and then back to the original value within a certain timeframe?

Thanks for any help!

Answer 1

Using a property like an event seems like a worse abuse than the Thread.Sleep to me, i would suggest the use of two RoutedEvents (to differentiate between Changed+Positive & Changed+Negative) in combination with EventTriggers instead.

---

If you want to stick with the Thread.Sleep you should probably do that in the background:

// IDE-free code, may be broken
HasValueChanged = false;
new Thread((ThreadStart)(() =>
{
    Thread.Sleep(100);
    HasValueChanged = true;
})).Start();