WPF ColorAnimation for a Brush property

Basic picture Basic · Feb 12, 2010 · Viewed 15k times · Source

I wonder if someone can help me - I've got a label which I need to be able to cross-fade between any 2 colors when a method is called in the code behind.

My best attempt so far:

Private OldColor as Color = Colors.White
Sub SetPulseColor(ByVal NewColor As Color)
    Dim F As New Animation.ColorAnimation(OldColor, NewColor, New Duration(TimeSpan.Parse("00:00:01")))
    OldColor = NewColor
    F.AutoReverse = False
    PulseLogo.BeginAnimation(Label.ForegroundProperty, F)

End Sub

The problem I have is that ColorAnimation returns a Media.Color and The property type for Foreground is Brush.

I know how to create the appropriate brush but not how to do it in an animation.

From Googling, it seems I need a converter:

<ValueConversion(GetType(SolidColorBrush), GetType(SolidColorBrush))> _
Public Class ColorConverter
    Implements IValueConverter

Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert
        Dim Color As Color = DirectCast(value, Color)
        Return New SolidColorBrush(Color)
    End Function

    Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack
        Return Nothing
    End Function

End Class

but all the examples I've seen bind it to the animation in XAML - And I'd like to do it in the code behind...

Can someone please point me in the right direction?

Thanks

Answer

itowlson picture itowlson · Feb 12, 2010

The usual solution to this is not to use a converter, but instead to animate the Color of the Brush. However, to do this you need a PropertyPath, which in turn means you need a storyboard:

Storyboard s = new Storyboard();
s.Duration = new Duration(new TimeSpan(0, 0, 1));
s.Children.Add(F);

Storyboard.SetTarget(F, PulseLogo);
Storyboard.SetTargetProperty(F, new PropertyPath("Foreground.Color"));

s.Begin();

(pardon C# syntax)

Note the property path in the SetTargetProperty call, which traverses down through the Foreground property and into the resulting brush's Color property.

You can also use this technique to animate individual gradient stops in a gradient brush, etc.