I have a TextBox(toAnimate) and an Button(toClick).
When i click the button, the TextBox disappears.
But it should move on the X Position 20 units.
What did i do wrong?
//double left = Canvas.GetLeft(toAnimate); Returned wrong value.
TranslateTransform tanl = new TranslateTransform();
Vector pos = VisualTreeHelper.GetOffset(toAnimate);
double left = pos.X;
toAnimate.RenderTransform = tanl;
DoubleAnimation doua = new DoubleAnimation((left + 20), left, TimeSpan.FromSeconds(3));
tanl.BeginAnimation(TranslateTransform.XProperty, doua);
Related
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();
}
I am trying to draw a rectangle on top of an image when I hold right click and move the mouse across the image.
At the moment of the mouse click a boolean is changed to true and when the mouse move event occurs and the bool is true, I have the next code:
// currMouselocation - the current mouse location rightClickTrackLocation - the point where the user right clicked
trackRect.Visibility = Visibility.Visible;//making the rectangle visible
var xPos = Math.Min(currMouselocation.X, rightClickTrackLocation.X);
var yPos = Math.Min(currMouselocation.Y, rightClickTrackLocation.Y);
var w = Math.Max(currMouselocation.X, rightClickTrackLocation.X) - xPos;
var h = Math.Max(currMouselocation.Y, rightClickTrackLocation.Y) - yPos;
trackRect.Width = w;
trackRect.Height = h;
Canvas.SetLeft(trackRect, xPos);
Canvas.SetTop(trackRect, yPos);
The problem is that the Rectangle is drawn from the center of the image and not from the clicked point.
I'm newbie to C# and I'm trying to do a simple application which have elements that move a lot on the screen. After some research I found a code that moved a button. The problem is the button returns to it's original state (although invisible). When I click the button it moves outside the screen (just as I wanted), but when I click it back (it should do the reverse animation) but instead, it just magically appears on the screen again.
I also tried to make it change position after the animation ended, but that didn't work either. Here's my code:
private void ButtonOnClick(object sender, RoutedEventArgs e)
{
if (nextSlideMoving)
return;
nextSlideMoving = true;
KinectTileButton target = (KinectTileButton)sender;
Vector offset = VisualTreeHelper.GetOffset(target);
if (nextSlideHidden)
moveAnimation(target, 0, offset.Y);
else
moveAnimation(target, -target.ActualWidth, offset.Y);
}
private void moveAnimation(KinectTileButton 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.FromSeconds(0.5));
trans.BeginAnimation(TranslateTransform.YProperty, anim1);
DoubleAnimation anim2 = new DoubleAnimation(0, newX - left, TimeSpan.FromSeconds(0.5));
anim2.Completed += new EventHandler(finishedAnimation);
trans.BeginAnimation(TranslateTransform.XProperty, anim2);
}
public void finishedAnimation(Object sender, EventArgs e)
{
nextSlideMoving = false;
nextSlideHidden = !nextSlideHidden;
Console.WriteLine(nextSlideHidden);
if (nextSlideHidden)
nextSlide.Margin = new Thickness(-(SystemParameters.VirtualScreenWidth * 0.2), SystemParameters.VirtualScreenHeight * 0.2, SystemParameters.VirtualScreenWidth * 0.8, SystemParameters.VirtualScreenHeight * 0.2); // (LEFT, TOP, RIGHT, BOTTOM)
else
nextSlide.Margin = new Thickness(0, SystemParameters.VirtualScreenHeight * 0.2, SystemParameters.VirtualScreenWidth * 0.8, SystemParameters.VirtualScreenHeight * 0.2); // (LEFT, TOP, RIGHT, BOTTOM)
}
You seem to be asking for FillBehavior. Take a look at following link:
http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.fillbehavior(v=vs.110).aspx
Also take a look at AutoReverse property:
http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.autoreverse(v=vs.110).aspx
If those properties doesn't help you any futher I would gladly take a look at your example just please upload it online.
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);
}
I have a rectangle where i am using a story board to rotate it up like a needle in a car gauge( mph). What i want to do is be able to pause it. In addition i would also like to get its location when i want to. Like get its current value as its rotating up to the end position that i specified. Can this be done?
What i want to do is use that to calculate the tachometer and move the tachometer needle according to the mph story board.
DoubleAnimation da = new DoubleAnimation();
da.From = 0 * 6;
da.To = 60;
da.Duration = new Duration(TimeSpan.FromSeconds(5));
RotateTransform rt = new RotateTransform();
rt.CenterX = 35;
rt.CenterY = 0;
rec3.RenderTransform = rt;
rt.BeginAnimation(RotateTransform.AngleProperty, da);
DoubleAnimation tack = new DoubleAnimation();
tack.From = 0 * 6;
tack.To = 30;
tack.Duration = new Duration(TimeSpan.FromSeconds(5));
RotateTransform tackneedle = new RotateTransform();
tackneedle.CenterX = 30;
tackneedle.CenterY = 0;
rec4.RenderTransform = tackneedle;
tackneedle.BeginAnimation(RotateTransform.AngleProperty, tack);
You can add your animations to a Storyboard which will allow you to pause and resume the animation. You should also be able to access the rotate transforms and get the value of their centers.
A different way might be more appropriate:
Make a class that calculates/generates the value.
Bind the needle to the value (use a value converter to get from amount to angle if needed)
that way you can control the value more easily and you can always stop the animation by pausing the generation of the value.
You have to think about what you need: do you need to know the value of the animation or should the needle follow/display the value?