DataTrigger not firing when multiple defined in WPF

3
votes

I have an issue with WPF I just cannot fix and I have been many stackoverflow posts without any luck so I thought I would see if anyone could help

I simply want the cell background of my DataGrid to pulse one of two colours depending on the value whether value goes up or down

I tried using EventTrigger NotifyOnTargetUpdated and binding the background colour but you are not allowed bind to property background in storyboard

I then tried using DataTriggers with a state field, "U" for up, "D" for down. I reset the state to "N" at the start of each update cycle (updates throttled) and at first, with 2 DataTriggers for each scenario , it looked like all is working fine. I was seeing both green & red animations but then I noticed that there were updates happening with no updates. Once updates came through, it seemed only the DataTrigger that was declared first would actually work, on the rare occasion when there is no occurrences of first condition, the other trigger would fire. To test this theory was true I ran with each condition first and as expected in each case the first declared trigger would only fire 90% the time.

I have searched everywhere to try find reason for this anomaly but have had no luck, if anyone can shed some light on how to fix this issue or even perhaps implement the same functionality in a more reliable way, would greatly appreciate it.

 <DataGridTextColumn Header="Last Trade" Width="60" Binding="{Binding last_trade}" IsReadOnly="true">
      <DataGridTextColumn.CellStyle>
                    <Style TargetType="DataGridCell"> 
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=last_trade_state}" Value="D">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetProperty="Background.Color" Duration="00:00:01" From="LightSalmon" To="Transparent"></ColorAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>

                            <DataTrigger Binding="{Binding Path=last_trade_state}" Value="U">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetProperty="Background.Color" Duration="00:00:01" From="LightGreen" To="Transparent"></ColorAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>

                        </Style.Triggers>
                    </Style>
                </DataGridTextColumn.CellStyle>
            </DataGridTextColumn>
2
.netwpfxamldatatrigger
try increasing the duration property of the storyboard animation for you to check if it working. 00:00:01 is too less for you to notice. – Vignesh.N
I cannot reproduce your issue. I've made an simple example working perfectly based on your code. Did you forget implementing INotifyPropertyChanged? – lokusking

2 Answers

4
votes

Diagnosis

First of all let me introduce what I think is a MCVE illustrating the problem:

<Grid Background="CornflowerBlue">
    <CheckBox x:Name="_CheckBox" Content="Toggle me" />
    <Grid.Style>
        <Style TargetType="Grid">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsChecked, ElementName=_CheckBox}" Value="False">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="Background.Color" Duration="00:00:01" From="LightSalmon" To="Transparent" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
                <DataTrigger Binding="{Binding IsChecked, ElementName=_CheckBox}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="Background.Color" Duration="00:00:01" From="LightGreen" To="Transparent" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>
</Grid>

When the Grid is loaded, we see a single red flash suggesting that the first trigger was triggered - which is expected behavior. If we then check the CheckBox, we see a green flash, which means the second trigger was triggered - again, as expected. But that's where the problem shows up - if we uncheck the CheckBox, we no longer see the red flash. In fact, from now on we only see green flash upon checking, but no red flash upon unchecking the CheckBox. The situation is symmetrical if we reorder the triggers.

The reason for that behavior boils down to two facts:

  1. The animation, once started, does not automatically stop (by default - see further explanation)
  2. If we apply an animation on an already animated property, it does not stop/remove the previous animation, but rather adds it to a list of animations of that property - in our case the animation added last overrides the value produced by the previous one, but that might not always be the case1

What happens when the animation reaches the end of it's duration is controlled by the FillBehavior property, which takes two values - HoldEnd and Stop, the default value being HoldEnd. So in our case when either animation completes it holds the background Transparent. It is consistent with the background actually being transparent - if the background wasn't animated, it would change back to CornflowerBlue.

Given that we have an explanation of the observed behavior - the first red animation is visible, because the green one is not yet started. But once it is, when we uncheck the CheckBox the red animation is restarted, but we cannot see it's effects, because they're overridden by the green animation holding the background Transparent. At least that's a feasible logical model - perhaps the framework is smart enough not to start animations when their effects will be ignored anyway, and the red animation is not actually restarted.

Semi-solution

Next logical step is to set FillBehavior=Stop on our animations. That gets us close to our goal, but not quite there. It all looks fine with these two exceptions:

  1. Once the animation ends the background goes back to CornflowerBlue - which might not be the desired behavior
  2. If we uncheck the CheckBox while the green animation is still running, it does not immediately stop, but rather it finishes and only then we can see the remaining part of the red animation

Solution

What we really want to do when the CheckBox is checked or unchecked is to abort current animation if it is running and replace it with the other one. In order to do that we can name the BeginStoryboard elements and use StopStoryboard elements to abort current animation:

<Grid Background="CornflowerBlue">
    <CheckBox x:Name="_CheckBox" Content="Toggle me" />
    <Grid.Style>
        <Style TargetType="Grid">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsChecked, ElementName=_CheckBox}" Value="False">
                    <DataTrigger.EnterActions>
                        <StopStoryboard BeginStoryboardName="Storyboard2" />
                        <BeginStoryboard Name="Storyboard1">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="Background.Color" Duration="00:00:01" From="LightSalmon" To="Transparent" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
                <DataTrigger Binding="{Binding IsChecked, ElementName=_CheckBox}" Value="True">
                    <DataTrigger.EnterActions>
                        <StopStoryboard BeginStoryboardName="Storyboard1" />
                        <BeginStoryboard Name="Storyboard2">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="Background.Color" Duration="00:00:01" From="LightGreen" To="Transparent" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>
</Grid>

The use of FillBehavior=Stop is optional and will only control whether the background will go back to CornflowerBlue or not.

1I just confirmed that this in fact is not always the case, even with ColorAnimation - you can simply not set the To property on neither animation (and drop StopStoryboard elements) and it is clearly visible that they blend together.

1
votes

I found this is a common problem, and in your code, the DataTrigger EnterActions has executed according to debug, but I don't know why the backgroud is not changed after the first time, I put this in the tabcontrol, every I choose the tab, it's only valid at the first time.

Finnaly, I find a way can solve it. You can try it.

<DataGridTextColumn.ElementStyle>
    <Style TargetType="TextBlock">

        <Setter Property="Background">
            <Setter.Value>
                <SolidColorBrush Color="Transparent"/>
            </Setter.Value>
        </Setter>

        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=last_trade_state}" Value="D">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)" >
                            <ColorAnimation Duration="00:00:1" From="LightSalmon" To="Transparent"
                                            ></ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>

            <DataTrigger Binding="{Binding Path=last_trade_state}" Value="U">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)">
                            <ColorAnimation Duration="00:00:1" From="LightGreen" To="Transparent"
                                            ></ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>

        </Style.Triggers>
    </Style>
</DataGridTextColumn.ElementStyle>