XAML Animation – How to Scale and Rotate Object (Multiple Transformations)

In this post I want to share snippet which shows simple technique to implement multiple transformations on same object.

You will notice that in order to achieve this I have used TransformationGroup along with StoryBoard and DoubleAnimation

        private void Rotate_Click(object sender, RoutedEventArgs e)
        {
            ScaleAndRotate();
        }
        private void ScaleAndRotate()
        {
            var scaleTrn = new ScaleTransform();
            var rotateTrn = new RotateTransform();
            
            TransformGroup tg = new TransformGroup();
            
            tg.Children.Add(scaleTrn);
            tg.Children.Add(rotateTrn);

            Image1.RenderTransform = tg;
            Image1.RenderTransformOrigin = new Point(0.5,0.5);

            Duration mytime = new Duration(TimeSpan.FromSeconds(5));
            Storyboard sb = new Storyboard();

            DoubleAnimation danim1 = new DoubleAnimation();
            DoubleAnimation danim2 = new DoubleAnimation();

            //danim1.From = 1;
            danim1.To = -1;
            //danim2.From = 0;
            danim2.To = -360;

            danim1.Duration = mytime;
            danim2.Duration = mytime;

            sb.Children.Add(danim1);
            sb.Children.Add(danim2);

            Storyboard.SetTarget(danim1, tg.Children[0]);
            Storyboard.SetTargetProperty(danim1, new PropertyPath(ScaleTransform.ScaleXProperty));
            //Storyboard.SetTargetProperty(danim1, new PropertyPath("ScaleX"));

            Storyboard.SetTarget(danim2, tg.Children[1]);
            Storyboard.SetTargetProperty(danim2, new PropertyPath(RotateTransform.AngleProperty));
            //Storyboard.SetTargetProperty(danim2, new PropertyPath("Angle"));

            sb.Begin();
        }