If your Background is LinearGradientBrush, then you will have to animate each GradientStop to the Color you want i.e. Orange in this case:
<Storyboard x:Key="Storyboard1"> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border"> <EasingColorKeyFrame KeyTime="0:0:2" Value="Orange"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border"> <EasingColorKeyFrame KeyTime="0:0:2" Value="Orange"/> </ColorAnimationUsingKeyFrames> </Storyboard>
But if you want to Animate the whole Brush irrespective of its type then you will have to create your own Animation. I have created my own BrushAnimation class to animate the Brush
public class BrushAnimation : AnimationTimeline { static BrushAnimation() { FromProperty = DependencyProperty.Register("From", typeof(Brush), typeof(BrushAnimation),new PropertyMetadata(new SolidColorBrush())); ToProperty = DependencyProperty.Register("To", typeof(Brush), typeof(BrushAnimation), new PropertyMetadata(new SolidColorBrush())); } public override Type TargetPropertyType { get { return typeof(Brush); } } protected override System.Windows.Freezable CreateInstanceCore() { return new BrushAnimation(); } public static readonly DependencyProperty FromProperty; public Brush From { get { return (Brush)GetValue(BrushAnimation.FromProperty); } set { SetValue(BrushAnimation.FromProperty, value); } } public static readonly DependencyProperty ToProperty; public Brush To { get { return (Brush)GetValue(BrushAnimation.ToProperty); } set { SetValue(BrushAnimation.ToProperty, value); } } public override object GetCurrentValue(object defaultOriginValue, object defaultDestinationValue, AnimationClock animationClock) { Brush fromVal = ((Brush)GetValue(BrushAnimation.FromProperty)); Brush toVal = ((Brush)GetValue(BrushAnimation.ToProperty)); SolidColorBrush solid = toVal as SolidColorBrush; if(fromVal is LinearGradientBrush) { LinearGradientBrush brush = fromVal as LinearGradientBrush; LinearGradientBrush newBrush = new LinearGradientBrush(); foreach(var stop in brush.GradientStops) { ColorAnimation animation = new ColorAnimation(stop.Color,solid.Color,this.Duration); Color color = animation.GetCurrentValue(stop.Color, solid.Color, animationClock); newBrush.GradientStops.Add(new GradientStop(color,stop.Offset)); } return newBrush; } else { SolidColorBrush brush = fromVal as SolidColorBrush; SolidColorBrush newsolid = new SolidColorBrush(); ColorAnimation solidAnimation = new ColorAnimation(brush.Color, solid.Color, this.Duration); newsolid.Color = solidAnimation.GetCurrentValue(brush.Color, solid.Color, animationClock); return newsolid; } }
and I am using this Animation to animate Canvas.Background on my window
<Storyboard x:Key="MyStoryBoard" RepeatBehavior="Forever" AutoReverse="True"> <local:BrushAnimation Storyboard.TargetName="Canvas1" Storyboard.TargetProperty = "(Canvas.Background)" To="Orange" Duration="0:0:5"/> </Storyboard>
and you can set From property of animation using the StaticResource or set it to the Background of Control in your codebehind like:
public partial class Window1 : Window { public Window1() { InitializeComponent(); ((BrushAnimation) ((Storyboard) Resources["SolidStoryBoard"]).Children[0]).From = Canvas1.Background; } }