WPF: How to animate color change?

Question

I have a grid, a window root element. I want to apply an animation which would change it's background color from white to green in 5 seconds. Here's what I did:

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    ColorAnimation animation;

    animation = new ColorAnimation();
    animation.From = Colors.White;
    animation.To = Colors.Green;
    animation.Duration = new Duration(TimeSpan.FromSeconds(5));
    rootElement.BeginAnimation(Grid.BackgroundProperty, animation);
}

The code doesn't work. Nothing is changing. Where am I making a mistake? Thanks.

Parliamentarian

Answer 1

Solved!

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    SolidColorBrush rootElementBrush;
    ColorAnimation animation;

    rootElementBrush = this.FindResource("RootElementBrush") as SolidColorBrush;

    // Animate the brush 
    animation = new ColorAnimation();
    animation.To = Colors.Green;
    animation.Duration = new Duration(TimeSpan.FromSeconds(5));
    rootElementBrush.BeginAnimation(SolidColorBrush.ColorProperty, animation);
}

Here's an explanation:

My initial mistake was that I wanted to change the Grid.BackgroundProperty by assigning colors to it, but it accepts brushes instead... apples and oranges! So, I created a SolidColorBrush static resource and named it rootElementBrush. In XAML, I set Grid rootElement's background property to that static resource. And finally, I modified the animation, so now it changes the color for that SolidColorBrush. Easy!

Parliamentarian

Glad you were able to get this resolved. You should select your own answer as the one which you have accepted here. – Introjection

@zedo I know, but it tells me I won't be able to mark it correct in the next two days. It's waiting for things to cool down first, hahahaha – Parliamentarian

how to set "from" white "to" orignal image color? – Calamander

Answer 2

Give this a try:

<ColorAnimation
Storyboard.TargetName="PlayButtonArrow" 
Storyboard.TargetProperty="Fill.Color"
From="White"
To="Green"              
Duration="0:0:5.0"
AutoReverse="False"/>

Introjection

I need it in code-behind and also I need to call it from code-behind. I am thinking that I might be making a mistake in my code because I am trying to change a color, but Grid.Background property is actually taking a brush... – Parliamentarian

Answer 3

You do not need to set the StaticResource, just use the Storyboard.

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // Animate the brush 
    ColorAnimation animation = new ColorAnimation();
    animation.To = Colors.Green;
    animation.Duration = new Duration(TimeSpan.FromSeconds(5));
    Storyboard.SetTargetProperty(animation, new PropertyPath("(Grid.Background).(SolidColorBrush.Color)", null));
    Storyboard storyboard = new Storyboard();
    storyboard.Children.Add(animation);
    storyboard.Begin(rootElement);
}

Squamation