Develop Reference

Double Animation - What is TranslateTransform "Width Change" Definition in C# UWP?

I am using MSDN example to setup the animation of Width of a Rectangle in C3 UWP.
Here is the code of the sample:
private void Create_And_Run_Animation()
{
// Create a red rectangle that will be the target
// of the animation.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 0;
myRectangle.Height = 20;
SolidColorBrush myBrush = new SolidColorBrush(Colors.Yellow);
myRectangle.Fill = myBrush;
// Create the transform
TranslateTransform stretchTransform = new TranslateTransform();
stretchTransform.X = 0;
stretchTransform.Y = 0;
myRectangle.RenderTransform = stretchTransform;
// Add the rectangle to the tree.
DefaultLayout.Children.Add(myRectangle);
myRectangle.Name = "myWidthAnimatedRectangle";
// Create a duration of 2 seconds.
Duration duration = new Duration(TimeSpan.FromSeconds(2));
// Create two DoubleAnimations and set their properties.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(3000));
Storyboard justintimeStoryboard = new Storyboard();
justintimeStoryboard.Duration = duration;
justintimeStoryboard.Children.Add(myDoubleAnimation);
Storyboard.SetTarget(myDoubleAnimation, stretchTransform);
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
// Set the X property of the Transform to be the target property
Storyboard.SetTargetProperty(myDoubleAnimation, "X");
myDoubleAnimation.To = 300.0;
// Make the Storyboard a resource.
DefaultLayout.Resources.Add("justintimeStoryboard", justintimeStoryboard);
// Begin the animation.
justintimeStoryboard.Begin();
}
However, on Build, what it does is move the object and not change its width.
I need to animate width change.

However, on Build, what it does is move the object and not change its width. I need to animate width change.
Your code was used to animate the Rectangle's position, not its width. You could specify a default value for its width and animate its ScaleTransform.
If you have to use DoubleAnimation to animate its width, you need to set EnableDependentAnimation to true. Please check the following code sample:
private void Create_And_Run_Animation()
{
// Create a red rectangle that will be the target
// of the animation.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 10;
myRectangle.Height = 20;
SolidColorBrush myBrush = new SolidColorBrush(Colors.Yellow);
myRectangle.Fill = myBrush;
// Add the rectangle to the tree.
DefaultLayout.Children.Add(myRectangle);
myRectangle.Name = "myWidthAnimatedRectangle";
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(3000));
Storyboard justintimeStoryboard = new Storyboard();
Storyboard.SetTargetProperty(myDoubleAnimation, "(Rectangle.Width)");
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
myDoubleAnimation.To = 300.0;
myDoubleAnimation.EnableDependentAnimation = true;
justintimeStoryboard.Children.Add(myDoubleAnimation);
// Make the Storyboard a resource.
DefaultLayout.Resources.Add("justintimeStoryboard", justintimeStoryboard);
// Begin the animation.
justintimeStoryboard.Begin();
}

Images "sink" animation

I have my Storyboard animation which is moving images to specific (Canvas.SetTop) coordination. I wonder if there is an option to make those images go to specific coordination but make them sink NOT dissapear.
I am using DoubleAnimations in Storyboard.
DoubleAnimation myAnimation = new DoubleAnimation();
myAnimation.SpeedRatio = 3;
myAnimation.AutoReverse = false;
myAnimation.From = 0;
myAnimation.To = 700;
myAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));
myAnimation.BeginTime = beginTime;
this.beginTime += TimeSpan.FromMilliseconds(300);

Using DoubleAnimation code behind in WinRT (XAML)

I have some problem. This is my code behind:
var s = new Storyboard();
var dAnimation = new DoubleAnimation();
dAnimation.RepeatBehavior = RepeatBehavior.Forever;
dAnimation.AutoReverse = true;
dAnimation.EnableDependentAnimation = true;
dAnimation.From = 200;
dAnimation.To = 300;
Storyboard.SetTarget(dAnimation, viewBox);
Storyboard.SetTargetProperty(dAnimation, "Width");
dAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(2000));
s.Children.Add(dAnimation);
s.Begin();
viewBox is on Canvas and has just a few property: Canvas.Left, Canvas.Top, Height and Width. Code from codebehind working great with Opacity, but not working with Width or Height. Codebehind work when user pointer is entered. I want do it without triggers. Found some solutions for Silverlight and WPF:
WinRT/Metro Animation in code-behind
they are not working. I dont undersstand why it work with opacity and didn't work with Width and Height Any ideas?

You cannot animate Width with a DoubleAnimation, you need to use a DoubleAnimationUsingKeyFrames.
var animation = new DoubleAnimationUsingKeyFrames();
var frame = new EasingDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(2000)), Value = 300});
animation.KeyFrames.Add(frame);
Storyboard.SetTargetProperty(animation, "(FrameworkElement.Width)");
Storyboard.SetTarget(animation, viewBox);
Storyboard.Children.Add(animation);

I didn't check ViewBox,but I can with DoubleAnimation for Grid.
Code is like below
var s = new Storyboard();
var widthAnim = new DoubleAnimation()
{
To = w,
Duration=new Duration(TimeSpan.FromMilliseconds(duration))
};
widthAnim.EnableDependentAnimation = true;
Storyboard.SetTarget(widthAnim,elem);
Storyboard.SetTargetProperty(widthAnim,"Width");
s.Children.Add(widthAnim);
s.Begin();

Slide image diagonally in windows phone 8

I am trying to make an image slide diagonally in windows phone 8 C#, i have tried some code, and gotten rid of an error i created - but when i doubletap the canvas, it is supposed to trigger the event, but nothing happens. Please take a look at my code:
private void Canvas_DoubleTap(object sender, System.Windows.Input.GestureEventArgs e)
{
//The canvas was doubletapped
//Create DoubleAnimation for x value
DoubleAnimation movedefenderxpositionAnimation = new DoubleAnimation();
movedefenderxpositionAnimation.From = 0;
movedefenderxpositionAnimation.To = 30;
movedefenderxpositionAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
movedefenderxpositionAnimation.AutoReverse = false;
//Create DoubleAnimation for y value
DoubleAnimation movedefenderypositionAnimation = new DoubleAnimation();
movedefenderypositionAnimation.From = 0;
movedefenderypositionAnimation.To = 15;
movedefenderypositionAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
movedefenderypositionAnimation.AutoReverse = false;
//Create StoryBoard
Storyboard movedefenderxpositionSB = new Storyboard();
movedefenderxpositionSB.Children.Add(movedefenderxpositionAnimation);
Storyboard movedefenderypositionSB = new Storyboard();
movedefenderypositionSB.Children.Add(movedefenderypositionAnimation);
//Set the timespan
movedefenderxpositionSB.Duration = new Duration(TimeSpan.FromSeconds(1));
movedefenderypositionSB.Duration = new Duration(TimeSpan.FromSeconds(1));
//Set the target
Storyboard.SetTarget(movedefenderxpositionAnimation, squaddefender1);
Storyboard.SetTarget(movedefenderypositionAnimation, squaddefender1);
//Set the target property
Storyboard.SetTargetProperty(movedefenderxpositionAnimation, new PropertyPath("(Canvas.Left)"));
Storyboard.SetTargetProperty(movedefenderypositionAnimation, new PropertyPath("(Canvas.Top)"));
//Start the animation
movedefenderxpositionSB.Begin();
movedefenderypositionSB.Begin();
}
And also, something i dont understand. How can i set the target property of the StoryBoard, and not the one i created, two times? I added this piece of code to iron out an error, which created a new one

WPF Animate width and Height with code behind (Zoom in)

I am able to animate the movement of a Border:
private void MoveTo(Border target, double newX, double newY)
{
Vector offset = VisualTreeHelper.GetOffset(target);
var top = offset.Y;
var left = offset.X;
TranslateTransform trans = new TranslateTransform();
target.RenderTransform = trans;
DoubleAnimation anim1 = new DoubleAnimation(0, newY - top, TimeSpan.FromMilliseconds(500));
DoubleAnimation anim2 = new DoubleAnimation(0, newX - left, TimeSpan.FromMilliseconds(500));
trans.BeginAnimation(TranslateTransform.YProperty, anim1);
trans.BeginAnimation(TranslateTransform.XProperty, anim2);
}
But I would like to be able to animate an increase in Height and Width as well as position to give the impression of enlarging an image(which is contained in a Border in my case and example above)).
Is this spossible with code behind?
OK, I tried the scale transform but it does not appear to do anything - do I need a storyboard?
private void Zoom(Border target)
{
TranslateTransform trans = new TranslateTransform();
target.RenderTransform = trans;
DoubleAnimation anim1 = new DoubleAnimation(1, 2, TimeSpan.FromMilliseconds(1000));
DoubleAnimation anim2 = new DoubleAnimation(1, 2, TimeSpan.FromMilliseconds(1000));
trans.BeginAnimation(ScaleTransform.ScaleXProperty, anim1);
trans.BeginAnimation(ScaleTransform.ScaleYProperty, anim2);
}

It is better to use scale transform for zooming, but if you insist on animating W/H you can do it, since these are normal DP you can animate them using standard DoubleAnimation/DoubleAnimationUsingKeyFrames
Something like
DoubleAnimation doubleAnimation = new DoubleAnimation(100, 200, new Duration(TimeSpan.FromMilliseconds(500)));
this.BeginAnimation(FrameworkElement.WidthProperty, doubleAnimation);

Use ScaleTransform, no need for Height & Width animations, the ScaleTransform will affect your Border's VisualTree so the inner image will be stretched as well.
private void Zoom(Border target)
{
ScaleTransform trans = new ScaleTransform();
target.RenderTransform = trans;
// if you use the same animation for X & Y you don't need anim1, anim2
DoubleAnimation anim = new DoubleAnimation(1, 2, TimeSpan.FromMilliseconds(1000));
trans.BeginAnimation(ScaleTransform.ScaleXProperty, anim);
trans.BeginAnimation(ScaleTransform.ScaleYProperty, anim);
}