WPF: How to animate color change?
Solution 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!
Solution 2
Give this a try:
<ColorAnimation
Storyboard.TargetName="PlayButtonArrow"
Storyboard.TargetProperty="Fill.Color"
From="White"
To="Green"
Duration="0:0:5.0"
AutoReverse="False"/>
Solution 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);
}
Boris
Updated on November 01, 2020Comments
-
Boris over 3 years
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.
-
Boris over 13 yearsI 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... -
THE DOCTOR over 13 yearsGlad you were able to get this resolved. You should select your own answer as the one which you have accepted here.
-
Boris over 13 years@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
-
RollRoll almost 9 yearshow to set "from" white "to" orignal image color?