How to make translation animation for both axes (X, Y) at the same time?

Question

I am doing something similar in the Storyboard method, but I cannot achieve the desired result. I want to play this animation after loading the page.

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { CreateTranslateAnimation(image1); } private void CreateTranslateAnimation(UIElement source) { Storyboard sb = new Storyboard(); DoubleAnimationUsingKeyFrames animationFirstX = new DoubleAnimationUsingKeyFrames(); source.RenderTransform = new CompositeTransform(); Storyboard.SetTargetProperty(animationFirstX, new PropertyPath(CompositeTransform.TranslateXProperty)); Storyboard.SetTarget(animationFirstX, source.RenderTransform); animationFirstX.KeyFrames.Add(new EasingDoubleKeyFrame() { KeyTime = kt1, Value = 20 }); DoubleAnimationUsingKeyFrames animationFirstY = new DoubleAnimationUsingKeyFrames(); source.RenderTransform = new CompositeTransform(); Storyboard.SetTargetProperty(animationFirstY, new PropertyPath(CompositeTransform.TranslateYProperty)); Storyboard.SetTarget(animationFirstY, source.RenderTransform); animationFirstY.KeyFrames.Add(new EasingDoubleKeyFrame() { KeyTime = kt1, Value = 30 }); sb.Children.Add(animationFirstX); sb.Children.Add(animationFirstY); sb.Begin(); } 

To cut it ...

I want to write .cs code equivalent to this code

  <Storyboard x:Name="Storyboard1"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="image1"> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="image1"> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="30"/> </DoubleAnimationUsingKeyFrames> </Storyboard> 

Answer 1

You set source.RenderTransform twice. The first transformation animation refers to a CompositeTransform object that was removed from the UIElement during the animation.

Get source.RenderTransform = new CompositeTransform(); second source.RenderTransform = new CompositeTransform(); and you will get better results.

"Cut and paste the source is a source of great coding of evil" :)