Question

I’m having a strange problem with a colour animation.

I have a list of items bound to a listbox. These items have an enum property which can have one of three values – NoRemarks, RemarksFound and RemarksUpdated.

On the datatemplate for this listbox, I have a rectangle which displays a colour related to the item status – Red, Orange or Green. There is a data trigger in the template to animate the box, but whenever the animation fires, it appears to sort of retain the old colours. If I animate from red to green, I get a sort of orangy dark green colour. If I animate from orange to green, I get a similar colour, although I can see that the colour is slightly different than when I animate from red to green.

Here is the XAML – I’ve only included the necessary parts:

The rectangle:

<Rectangle x:Name="HeaderRemarkStatusRectangle" Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" HorizontalAlignment="Left"
        RadiusX="1" RadiusY="1" Width="10" Margin="3" StrokeThickness="1" >
    <Rectangle.Stroke>
      <SolidColorBrush Color="#FFDC5A5A" x:Name="RectangleStroke" />
    </Rectangle.Stroke>
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Color="#ff7a7a" Offset="0.5" x:Name="GradientStop1" />
        <GradientStop Color="#ff5653" Offset="0.5" x:Name="GradientStop2" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>

The triggers:

  <DataTrigger Binding="{Binding Path=ItemStatus}" Value="RemarksUpdated">
    <DataTrigger.EnterActions>
      <BeginStoryboard>
        <BeginStoryboard.Storyboard>
          <Storyboard Duration="0:0:0.5" >
            <ColorAnimation Storyboard.TargetName="GradientStop1" Storyboard.TargetProperty="Color" To="#83ec71" />
            <ColorAnimation Storyboard.TargetName="GradientStop2" Storyboard.TargetProperty="Color" To="#5dda4e" />
            <ColorAnimation Storyboard.TargetName="RectangleStroke" Storyboard.TargetProperty="Color" To="#FF50AA46" />
          </Storyboard>
        </BeginStoryboard.Storyboard>
      </BeginStoryboard>
    </DataTrigger.EnterActions>
  </DataTrigger>
</DataTemplate.Triggers>

I have tried a couple of things to correct the problem…

I have tried setting the Datatrigger.exitactions for each trigger to return the colour to white (a bit of a fudge but I wanted to see if the missing “From” section was the problem). When the animation triggered, I ended up with a semi-transparent box, although it was the right colour.

I have also tried setting the “from” property – again,not really practical as I don’t know what the original colour for the trigger would be but I wanted to see the effect. I got a similar result as above.

Also tried changing the FillBehaviour property, but setting it to “stop” meant that the color would revert to the original colour as soon as the animation had completed (as expected).

I thought that the animation would animate from the current colour (either from the datatemplate or from the current animation if one exists), and would animate to the new colour. I can’t quite suss out why I seem to get a colour inbetween the original and new colour. Is this a known problem with the colour animation or is it a problem with my triggers?

Thanks all

Answer 1

You need to set the Duration on the ColorAnimation objects. The default Duration for Animations is 1 second, so your 0.5 second storyboard is only running half of the animation.

<Storyboard>
    <ColorAnimation Storyboard.TargetName="GradientStop1" Storyboard.TargetProperty="Color" To="#83ec71" Duration="0:0:0.5"/>
    <ColorAnimation Storyboard.TargetName="GradientStop2" Storyboard.TargetProperty="Color" To="#5dda4e" Duration="0:0:0.5"/>
    <ColorAnimation Storyboard.TargetName="RectangleStroke" Storyboard.TargetProperty="Color" To="#FF50AA46" Duration="0:0:0.5"/>
</Storyboard>