We Keep Coding

Double Animation Forcing Translation

I am trying to implement a translation animation on a Grid in Windows Phone 8.
The behavior that I want to implement is that when the user drags from left to right a new panel comes from the left(in animation) and reverse happens when the user drags from right to left.
For this I have implemented the following code which is called on Manipulation_Completed :
public Storyboard AnimateContent(int direction)
{
DoubleAnimation animation = new DoubleAnimation();
if (direction == 1)
{ //content_trans is the object of composite transform of grid
animation.From =content_trans.TranslateX;
animation.To = 370;
}
else if(direction==0)
{
animation.From = content_trans.TranslateX;
animation.To = 0;
}
animation.Duration = new TimeSpan(0,0,0,0,500);
Storyboard.SetTarget(animation, Content);
Storyboard.SetTargetProperty(animation, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateX)"));
Storyboard sb = new Storyboard();
sb.Children.Add(animation);
return sb;
}
Now problem I am facing is that after calling this function(and calling begin() on storyboard object), when I am writing
content_trans.TranslateX=250;//or any other value of my choice
it is not being reflected on the screen.
I want to change these values because I writing this line of code in Manipulation_Delta , so that the user can have a feeling of dragging something, but it is not being reflected after animation.

This is because animated values take precedence over local values. See Dependency Property Value Precedence
If you want to set the value yourself, you will need to stop the animation first.
EDIT: If you want to be able to drag after the animation, then set the END location manually just before animating, and tell the animation to stop applying itself when it finishes with:
animation.FillBehaviour = FillBehaviour.Stop;
This means that when the animation finishes, your local values will apply.

Transform control in WinRt

I have several boxes from type Windows.UI.Xaml.Controls.Control with different sizes. I wanna transform a few of them vertically. Like shown in the picture.
I'm struggling doing this.I'm sure that should not be very difficult but I don't get it...
Btw. I wanna do that in code behind not in XAML.
Many thanks for your help.
Cheers
Daniel
edit:
DoubleAnimation scaleAnimation = new DoubleAnimation();
scaleAnimation.From = startHeight;
scaleAnimation.To = this.ClientHeight * Percentage;
scaleAnimation.Duration = TimeSpan.FromMilliseconds(500);
scaleAnimation.EasingFunction = new QuarticEase() { EasingMode = EasingMode.EaseOut };
Storyboard storyScaleX = new Storyboard();
storyScaleX.Children.Add(scaleAnimation);
Storyboard.SetTarget(storyScaleX, slice);
scaleAnimation.EnableDependentAnimation = true;
Storyboard.SetTargetProperty(storyScaleX, "Height");

You can apply a TranslateTransform to the LayoutTransform or RenderTransform of the element (depending on what you need). e.g.
element.LayoutTransform = new TranslateTransform(0, 100)
If the effect you require depends on the height of the element, use the element's ActualHeight as the value to translate by.

How to move a control in WPF

I have a control in WPF (which is a custom control containing a circle).
And I need to move it every 60ms.
I have an array of "Position" (Class with 2 attributes : X and Y) and I do this to move it :
timer_tick()
{
myControl.Margin = new Thickness { Left = MyArray[i].X, Top = MyArray[i].Y};
i++;
}
with a global variable.
But can I do it in a better way ? Using something like :
public static void MoveTo(this Image target, double newX, double newY)
{
var top = Canvas.GetTop(target);
var left = Canvas.GetLeft(target);
TranslateTransform trans = new TranslateTransform();
target.RenderTransform = trans;
DoubleAnimation anim1 = new DoubleAnimation(top, newY - top, TimeSpan.FromMilliseconds(60));
DoubleAnimation anim2 = new DoubleAnimation(left, newX - left, TimeSpan.FromMilliseconds(60));
trans.BeginAnimation(TranslateTransform.XProperty,anim1);
trans.BeginAnimation(TranslateTransform.YProperty,anim2);
}
in every tick ?
Thank you

Very close. But there is no need to call this in a timer. Let the animation do the work; that is what it is for. Just set the animations to go from the origin to the destination in a timespan for the desired speed. You can always interrupt the animation at any point if you need it to end early.

Someone else already posted the best way, which is to use an animation, so here's a different way that's less "good" but probably works ok.
If you're using variables like that indexer "i" (careful about calling it global - be specific about its scope) then why not make another one?
At the class level, create a variable...
Thickness awful_marg_variable;
And in your initializer, initialize it and assign the reference to the control's Margin:
awful_marg_variable = new Thickness { Left = MyArray[0].X, Top = MyArray[0].Y};
myControl.Margin = awful_marg_variable;
And then in your timer tick procedure, you can just manipulate that variable...
awful_marg_variable.Left = MyArray[i].X;
awful_marg_variable.Top = MyArray[i].Y;
Finally, you can revel in the horrible thing you've just done, or whatever. Never do this in large quantities. Some people would say never do this ever. But sometimes you just gotta get work done and this is one more way to do it.

Animation follows drag movement

The purpose of the code below is that a thumb follows a horizontal mouse movement. The code is called upon a mouse event, so the target value of the animation gets updated continuously.
In the code, offset is the current mouse horizontal position. The problem is, that the animation of the thumb doesn't fully animate to the specified offset, but always seems to be stopping at a value smaller or higher (depending if the mouse is dragged left or right).
The SeekAlignedToLastTick() influences the behavior of the animation, although I couldn't figure out what this function does by reading the documentation.
How can I animate the thumb, so that it follows smoothly the drag event?
private Storyboard _thumbStoryboard;
private DoubleAnimation _thumbAnimation = new DoubleAnimation();;
private CompositeTransform _thumbTransform = new CompositeTransform();
private void UpdateUserInterface(double offset)
{
var thumbItem = Thumb as FrameworkElement;
if (_thumbStoryboard == null)
{
Storyboard.SetTarget(_thumbAnimation, _thumbTransform);
_thumbStoryboard = new Storyboard();
_thumbStoryboard.Children.Add(_thumbAnimation);
thumbItem.RenderTransform = _thumbTransform;
_thumbStoryboard.Duration = new Duration(TimeSpan.FromMilliseconds(100));
_thumbAnimation.EasingFunction = new ExponentialEase();
}
double from = _thumbTransform.TranslateX;
_thumbStoryboard.Stop();
Storyboard.SetTargetProperty(_thumbAnimation, new PropertyPath("TranslateX"));
_thumbAnimation.From = from;
_thumbAnimation.To = offset;
_thumbStoryboard.Begin();
_thumbStoryboard.SeekAlignedToLastTick(TimeSpan.Zero);
}

I've tried to solve your issue, So I've created a Silverlight application and added a Border element for testing.
<Border x:Name="Thumb" VerticalAlignment="Top" HorizontalAlignment="Left" Width="50" height="25" Background="#ff0000" />
There was no need to set the "From" Property, since the DoubleAnimation object could automatically continue from the current Value to the "To" Property.
And you were setting the Duration to the Storyboard, which causes the DoubleAnimation to Cutoff its animation without reaching the "To" Value, You need to set the Duration Property to the DoubleAnimation itself instead.
Also there was no need to call _thumbStoryboard.Stop(), because it will reset the current animation to the first TranslateX Value.
Here is the updated "UpdateUserInterface" function code with comments:
private void UpdateUserInterface(double offset) {
var thumbItem = Thumb as FrameworkElement;
if ( _thumbStoryboard == null ) {
// UpdateLayout Method is update the ActualWidth Properity of the UI Elements
this.UpdateLayout();
// Applying the CompositeTransform on "thumbItem" UI Element
thumbItem.RenderTransform = _thumbTransform;
// Setting the Render Transform Origin to be the Center of X and Y
thumbItem.RenderTransformOrigin = new Point(0.5d, 0.5d);
// Setting the target of the DoubleAnimation to be the Thumb CompositeTransform
Storyboard.SetTarget(_thumbAnimation, _thumbTransform);
// Setting the Targeted Properity of the DoubleAnimation to be The "TranslateX" Properity
Storyboard.SetTargetProperty(_thumbAnimation, new PropertyPath("TranslateX"));
// Used QuinticEase instead of ExponentialEase
// and Added EaseOut to make the animation be more smoother.
_thumbAnimation.EasingFunction = new QuinticEase(){ EasingMode = EasingMode.EaseOut };
// Initializing the Storyboard
_thumbStoryboard = new Storyboard();
// Specifing the Duration of the DoubleAnimation not the StoryBoard
_thumbAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(500));
// Adding the DoubleAnimation to the Children of the Storyboard
_thumbStoryboard.Children.Add(_thumbAnimation);
}
// Calculate the New Centered Position
double newPos = offset - (thumbItem.ActualWidth / 2);
// Set the New DoubleAnimation "To" Value,
// There is no need to set the "From" Value since it'll automatically continue from the current TranslateX Value
_thumbAnimation.To = newPos;
// Begin the animation.
_thumbStoryboard.Begin();
}
Hope that helps you :)
Regards,
Monir Abu Hilal

WindowsPhone7: How to animate position of UIElement with code?

It seems like it should be so simple. I've read dozens of links and I can't get anything to animate the position. I believe the closest code I can write so far is this:
Storyboard storyboard = new Storyboard();
TranslateTransform trans = new TranslateTransform() { X = 1.0, Y = 1.0 };
myCheckbox.RenderTransformOrigin = new Point(0.5, 0.5);
myCheckbox.RenderTransform = trans;
DoubleAnimation moveAnim = new DoubleAnimation();
moveAnim.Duration = TimeSpan.FromMilliseconds(1200);
moveAnim.From = -1;
moveAnim.To = 1;
Storyboard.SetTarget(moveAnim, myCheckbox);
Storyboard.SetTargetProperty(moveAnim, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)"));
storyboard.Completed += new System.EventHandler(storyboard_Completed);
storyboard.Children.Add(moveAnim);
storyboard.Begin();
No errors are thrown.
The completion callback does get called.
If I animate opacity in a similar fashion it works fine.
How can I simply animate a UIElement's position with code??

The comment from xyzzer was correct. The cause of the confusion was because the coordinates for RenderTransformOrigin use (0,1) relative to the element. The actual transforms (e.g. TranslateTransform) use pixels as units.