Develop Reference

Change position of Grid using animation C#

WPF
<Grid Name="GhostGrid">
<Image Source="img.jpg"/>
</Grid>
I am trying to change the position of a grid using animation. This is working fine -
C#
TranslateTransform transformImage = new TranslateTransform();
GhostGrid.RenderTransform = transformImage;
DoubleAnimation animationImage = new DoubleAnimation(0, -50, TimeSpan.FromSeconds(0.6));
transformImage.BeginAnimation(TranslateTransform.XProperty, animationImage);
But this not working -
C#
DoubleAnimation animationImage = new DoubleAnimation()
{
From = 0,
To = -450,
Duration = new Duration(TimeSpan.FromSeconds(0.8))
};
Storyboard.SetTarget(animationImage, GhostGrid);
Storyboard.SetTargetProperty(animationImage,new PropertyPath(TranslateTransform.XProperty));
storyBoard = new Storyboard();
storyBoard.Children.Add(animationImage);
storyBoard.Begin();

As per Clemens suggestion its working now -
DoubleAnimation animationImage = new DoubleAnimation()
{
From = 0,
To = -450,
Duration = new Duration(TimeSpan.FromSeconds(0.8))
};
Storyboard.SetTarget(animationImage, GhostGrid);
Storyboard.SetTargetProperty(animationImage,new PropertyPath("RenderTransform.X"));
storyBoard = new Storyboard();
storyBoard.Children.Add(animationImage);
storyBoard.Begin();

Making a user control pulse

What I'm trying to do is make my control "pulse" (as in enlarge a bit, then shrink a bit, then back to its normal size). The following code does exactly what I want, but it just seems like there should be a simpler way. It has to be done in code behind because this is an abstract class that most of our controls derive from. I don't have much experience with animation controls and story boards.
So specifically my question is, is there a simpler way to get the desired results than the following method (while still being done in the code-behind)?
public void Pulse()
{
var storyboard = new Storyboard
{
FillBehavior = FillBehavior.Stop,
RepeatBehavior = new RepeatBehavior(2)
};
double timeIncrement = .15;
double changePercent = 20;
var firstTime = TimeSpan.FromSeconds(timeIncrement);
var secondTime = TimeSpan.FromSeconds(timeIncrement * 3);
var thirdTime = TimeSpan.FromSeconds(timeIncrement * 4);
var scale = new ScaleTransform(1.0, 1.0);
RenderTransformOrigin = new Point(.5, .5);
RenderTransform = scale;
//enlarge
{
DoubleAnimation growX = new DoubleAnimation
{
Duration = firstTime,
To = 1 + changePercent
};
storyboard.Children.Add(growX);
Storyboard.SetTargetProperty(growX, new PropertyPath("RenderTransform.ScaleX"));
DoubleAnimation growY = new DoubleAnimation
{
Duration = firstTime,
To = 1 + changePercent
};
storyboard.Children.Add(growY);
Storyboard.SetTargetProperty(growY, new PropertyPath("RenderTransform.ScaleY"));
}
//shrink
{
DoubleAnimation shrinkX = new DoubleAnimation
{
Duration = secondTime,
To = 1 - changePercent
};
storyboard.Children.Add(shrinkX);
Storyboard.SetTargetProperty(shrinkX, new PropertyPath("RenderTransform.ScaleX"));
DoubleAnimation shrinkY = new DoubleAnimation
{
Duration = secondTime,
To = 1 - changePercent
};
storyboard.Children.Add(shrinkY);
Storyboard.SetTargetProperty(shrinkY, new PropertyPath("RenderTransform.ScaleY"));
}
//back to normal
{
DoubleAnimation normX = new DoubleAnimation
{
Duration = thirdTime,
To = 1
};
storyboard.Children.Add(normX);
Storyboard.SetTargetProperty(normX, new PropertyPath("RenderTransform.ScaleX"));
DoubleAnimation normY = new DoubleAnimation
{
Duration = thirdTime,
To = 1
};
storyboard.Children.Add(normY);
Storyboard.SetTargetProperty(normY, new PropertyPath("RenderTransform.ScaleY"));
}
BeginStoryboard(storyboard, HandoffBehavior.SnapshotAndReplace, false);
}

You could perhaps simplify things a little by moving your grow/shrink logic into its own method. This reduces duplication and provides a potentially more reusable code kibble.
public void Pulse()
{
var storyboard = new Storyboard
{
FillBehavior = FillBehavior.Stop,
RepeatBehavior = new RepeatBehavior(2)
};
double timeIncrement = .15;
double growPercent = 20;
double shrinkPercent = -20;
var firstTime = TimeSpan.FromSeconds(timeIncrement);
var secondTime = TimeSpan.FromSeconds(timeIncrement * 3);
var thirdTime = TimeSpan.FromSeconds(timeIncrement * 4);
var scale = new ScaleTransform(1.0, 1.0);
RenderTransformOrigin = new Point(.5, .5);
RenderTransform = scale;
storyboard = AddSizeChange(firstTime, growPercent, storyboard);
storyboard = AddSizeChange(secondTime, shrinkPercent, storyboard);
storyboard = AddSizeChange(thirdTime, growPercent, storyboard);
BeginStoryboard(storyboard, HandoffBehavior.SnapshotAndReplace, false);
}
public Storyboard AddSizeChange(TimeSpan animTime, double changePercent, Storyboard storyboard)
{
DoubleAnimation growX = new DoubleAnimation
{
Duration = animTime,
To = 1 + changePercent
};
storyboard.Children.Add(growX);
Storyboard.SetTargetProperty(growX, new PropertyPath("RenderTransform.ScaleX"));
DoubleAnimation growY = new DoubleAnimation
{
Duration = animTime,
To = 1 + changePercent
};
storyboard.Children.Add(growY);
Storyboard.SetTargetProperty(growY, new PropertyPath("RenderTransform.ScaleY"));
return storyboard;
}

That's a fine way of doing it, WPF does not provide methods or events to automatically pulse. Yours is simple and as you've created it, you know how to modify it as you wish.

Moving object animation in X and Y

I have created animation for moving object in X, but how do I add also Y?
TranslateTransform trans = new TranslateTransform();
Pointer.RenderTransform = trans;
DoubleAnimation anim2 = new DoubleAnimation(1, 500, TimeSpan.FromMilliseconds(325));
anim2.EasingFunction = new SineEase { EasingMode = EasingMode.EaseInOut };
anim2.Completed += new EventHandler(myanim_Completed);
trans.BeginAnimation(TranslateTransform.XProperty, anim2);

Use StoryBoard and add both animations as child:
Storyboard storyBoard = new Storyboard
{ Duration = new Duration(TimeSpan.FromMilliseconds(325)) };
DoubleAnimation anim2 = new DoubleAnimation(1, 500, TimeSpan.FromMilliseconds(325));
anim2.EasingFunction = new SineEase { EasingMode = EasingMode.EaseInOut };
anim2.Completed += new EventHandler(myanim_Completed);
Storyboard.SetTarget(anim2, trans);
Storyboard.SetTargetProperty(anim2, new PropertyPath(TranslateTransform.XProperty));
DoubleAnimation anim1 = new DoubleAnimation(1, 500, TimeSpan.FromMilliseconds(325));
anim1.EasingFunction = new SineEase { EasingMode = EasingMode.EaseInOut };
anim1.Completed += new EventHandler(myanim_Completed);
Storyboard.SetTarget(anim1, trans);
Storyboard.SetTargetProperty(anim1, new PropertyPath(TranslateTransform.YProperty));
storyBoard.Children.Add(anim2);
storyBoard.Children.Add(anim1);
storyBoard.Begin();

Figured out an answer:
TranslateTransform trans = new TranslateTransform();
Pointer.RenderTransform = trans;
DoubleAnimation animX = new DoubleAnimation(0, 750, TimeSpan.FromMilliseconds(325));
DoubleAnimation animY = new DoubleAnimation(0, 100, TimeSpan.FromMilliseconds(325));
animX.EasingFunction = new SineEase { EasingMode = EasingMode.EaseInOut };
animY.EasingFunction = new SineEase { EasingMode = EasingMode.EaseInOut };
animX.Completed += new EventHandler(myanim_Completed);
trans.BeginAnimation(TranslateTransform.XProperty, animX);
trans.BeginAnimation(TranslateTransform.YProperty, animY);

How to code a swivel type animation on a textbox in C# without using markup

I saw an example on how to create a glow effect when the image gets focus in mark-up.
Below is the C# code example i found that uses double animation for opacity of a rectangle, i need to perform a glow or swivel effect using C# and not markup since i am not comfortable with it.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

You can add this in your Main(), after InitializeComponent();
textBlock1.Text = "Mouse over me";
var effect = new DropShadowEffect();
effect.Color = Colors.Red;
effect.BlurRadius = 10d;
effect.Opacity = 0d;
effect.ShadowDepth = 0d;
textBlock1.Effect = effect;
textBlock1.MouseEnter += (s, e) => {
var anim = new DoubleAnimation(0d, 1d, new Duration(TimeSpan.FromMilliseconds(500)));
effect.BeginAnimation(DropShadowEffect.OpacityProperty, anim); };
textBlock1.MouseLeave += (s, e) => {
var anim = new DoubleAnimation(1d, 0d, new Duration(TimeSpan.FromMilliseconds(500)));
effect.BeginAnimation(DropShadowEffect.OpacityProperty, anim); };
But I'd suggest stop wasting time with C# for GUI code, XAML is so much more convenient.

Animating the height and width of an object in C#

I am trying to get these ellipses to grow but I cannot figure out how to start the animation. This is my first attempt at WPF animation and I don't quite understand how it all works.
private void drawEllipseAnimation(double x, double y)
{
StackPanel myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);
Ellipse e = new Ellipse();
e.Fill = Brushes.Yellow;
e.Stroke = Brushes.Black;
e.Height = 0;
e.Width = 0;
e.Opacity = .8;
canvas2.Children.Add(e);
Canvas.SetLeft(e, x);
Canvas.SetTop(e, y);
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 0;
myDoubleAnimation.To = 10;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
Storyboard.SetTargetName(myDoubleAnimation, e.Name);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Ellipse.HeightProperty));
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Ellipse.WidthProperty));
}

You don't need a Storyboard here. Just do
e.BeginAnimation(Ellipse.WidthProperty, myDoubleAnimation);
e.BeginAnimation(Ellipse.HeightProperty, myDoubleAnimation);
If you really need to do it with a Storyboard, you will have to add separate animations, one per animated property, to the Storyboard. And you have to call SetTarget instead of SetTargetName when you don't apply a name. Finally you'll need to start the Storyboard by calling Begin:
DoubleAnimation widthAnimation = new DoubleAnimation
{
From = 0,
To = 10,
Duration = TimeSpan.FromSeconds(5)
};
DoubleAnimation heightAnimation = new DoubleAnimation
{
From = 0,
To = 10,
Duration = TimeSpan.FromSeconds(5)
};
Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(Ellipse.WidthProperty));
Storyboard.SetTarget(widthAnimation, e);
Storyboard.SetTargetProperty(heightAnimation, new PropertyPath(Ellipse.HeightProperty));
Storyboard.SetTarget(heightAnimation, e);
Storyboard s = new Storyboard();
s.Children.Add(widthAnimation);
s.Children.Add(heightAnimation);
s.Begin();