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)
        private void ScaleAndRotate()
            var scaleTrn = new ScaleTransform();
            var rotateTrn = new RotateTransform();
            TransformGroup tg = new TransformGroup();

            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;


            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"));


Binary World is a Software Development company located in Atlanta, USA (since 2007). Binary World specialized in Business Intelligence, mobile, cloud computing and .Net Application Development.

Tagged with: , ,
Posted in .net, C#, XAML

Leave a Reply