jacobz
jacobz

Reputation: 3291

Animating drop shadow fade-in/fade-out with a storyboard

I'd like to fade in a drop shadow effect on a DataGrid over 2 seconds, which fades out over 2 seconds again after the fade-in animation is completed.

My code so far:

DropShadowEffect dropShadowEffect = new DropShadowEffect();
dropShadowEffect.ShadowDepth = 0;
dropShadowEffect.Color = Colors.LightSeaGreen;
dropShadowEffect.Opacity = 0;
dropShadowEffect.BlurRadius = 20;
element.Effect = dropShadowEffect;

Storyboard storyboard1 = new Storyboard();
TimeSpan duration1 = TimeSpan.FromMilliseconds(2000);

DoubleAnimation animateOpacity1 = new DoubleAnimation() { From = 0, To = 1, Duration = new Duration(duration1) };
Storyboard.SetTargetName(animateOpacity1, element.Name);
Storyboard.SetTargetProperty(animateOpacity1, new PropertyPath(DropShadowEffect.OpacityProperty));

DoubleAnimation animateOpacity2 = new DoubleAnimation() { From = 1, To = 0, Duration = new Duration(duration1) };
Storyboard.SetTargetName(animateOpacity2, element.Name);
Storyboard.SetTargetProperty(animateOpacity2, new PropertyPath(DropShadowEffect.OpacityProperty));

storyboard1.Children.Add(animateOpacity1);
storyboard1.Children.Add(animateOpacity2);

storyboard1.Begin(element);

Upon executing the code, nothing happens.

Upvotes: 0

Views: 1199

Answers (1)

Rohit Vats
Rohit Vats

Reputation: 81313

If you simply want to do DoubleAnimation, no need to complex it using StoryBoard. Also, you can achieve this with only single double animation with property AutoReverse set to true.

Moreover, do animation on dropShadowEffect object instead of element object.

TimeSpan duration = TimeSpan.FromMilliseconds(2000);

DoubleAnimation animateOpacity = new DoubleAnimation() { From = 0, To = 1,
                                     Duration = duration, AutoReverse = true };

dropShadowEffect.BeginAnimation(DropShadowEffect.OpacityProperty,
                                animateOpacity);

Upvotes: 2

Related Questions