3

I have the following in a ControlTemplate.Resources:

<ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" To="Orange" Duration="0:0:0.2" /> 

It works all right if the original background that I wanted to change to orange was a solid color. But I'd also want to have this work when the original background is a LinearGradientBrush. In this second case, the animation tries to change the property in vain, nothing happens.

How can I specify an animation that replaces the background no matter what type it was earlier?

1 Answer 1

5

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; } } 
Sign up to request clarification or add additional context in comments.

2 Comments

The problem is that I don't know what it is. It's a button that might have either kind of background.
I have created the animation class to handle this. Tested it.. works well :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.