{"id":468,"date":"2013-11-01T12:27:42","date_gmt":"2013-11-01T16:27:42","guid":{"rendered":"http:\/\/binaryworld.net\/blogs\/?p=468"},"modified":"2013-11-01T12:27:42","modified_gmt":"2013-11-01T16:27:42","slug":"xaml-animation-how-to-scale-and-rotate-object-multiple-transformations","status":"publish","type":"post","link":"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/","title":{"rendered":"XAML Animation &#8211; How to Scale and Rotate Object (Multiple Transformations)"},"content":{"rendered":"<p>In this post I want to share snippet which shows simple technique to implement multiple transformations on same object.<\/p>\n<p>You will notice that in order to achieve this I have used <strong>TransformationGroup<\/strong> along with <strong>StoryBoard<\/strong> and <strong>DoubleAnimation<\/strong><\/p>\n<pre class=\"brush: csharp; gutter: true; first-line: 1; highlight: []; html-script: false\">\r\n        private void Rotate_Click(object sender, RoutedEventArgs e)\r\n        {\r\n            ScaleAndRotate();\r\n        }\r\n        private void ScaleAndRotate()\r\n        {\r\n            var scaleTrn = new ScaleTransform();\r\n            var rotateTrn = new RotateTransform();\r\n            \r\n            TransformGroup tg = new TransformGroup();\r\n            \r\n            tg.Children.Add(scaleTrn);\r\n            tg.Children.Add(rotateTrn);\r\n\r\n            Image1.RenderTransform = tg;\r\n            Image1.RenderTransformOrigin = new Point(0.5,0.5);\r\n\r\n            Duration mytime = new Duration(TimeSpan.FromSeconds(5));\r\n            Storyboard sb = new Storyboard();\r\n\r\n            DoubleAnimation danim1 = new DoubleAnimation();\r\n            DoubleAnimation danim2 = new DoubleAnimation();\r\n\r\n            \/\/danim1.From = 1;\r\n            danim1.To = -1;\r\n            \/\/danim2.From = 0;\r\n            danim2.To = -360;\r\n\r\n            danim1.Duration = mytime;\r\n            danim2.Duration = mytime;\r\n\r\n            sb.Children.Add(danim1);\r\n            sb.Children.Add(danim2);\r\n\r\n            Storyboard.SetTarget(danim1, tg.Children[0]);\r\n            Storyboard.SetTargetProperty(danim1, new PropertyPath(ScaleTransform.ScaleXProperty));\r\n            \/\/Storyboard.SetTargetProperty(danim1, new PropertyPath(&quot;ScaleX&quot;));\r\n\r\n            Storyboard.SetTarget(danim2, tg.Children[1]);\r\n            Storyboard.SetTargetProperty(danim2, new PropertyPath(RotateTransform.AngleProperty));\r\n            \/\/Storyboard.SetTargetProperty(danim2, new PropertyPath(&quot;Angle&quot;));\r\n\r\n            sb.Begin();\r\n        }\r\n<\/pre>\n<p><a href=\"http:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml-animation.-scale-rotate-transformation.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml-animation.-scale-rotate-transformation.jpg\" alt=\"\" title=\"xaml-animation.-scale-rotate-transformation\" width=\"512\" height=\"167\" class=\"alignnone size-full wp-image-470\" srcset=\"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml-animation.-scale-rotate-transformation.jpg 512w, https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml-animation.-scale-rotate-transformation-300x97.jpg 300w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/\"> <span class=\"screen-reader-text\">XAML Animation &#8211; How to Scale and Rotate Object (Multiple Transformations)<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":470,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49,66,74],"tags":[83,52,82],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>XAML Animation - How to Scale and Rotate Object (Multiple Transformations) - BinaryWorld Blog<\/title>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"XAML Animation - How to Scale and Rotate Object (Multiple Transformations) - BinaryWorld Blog\" \/>\r\n<meta property=\"og:description\" content=\"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 &hellip; XAML Animation &#8211; How to Scale and Rotate Object (Multiple Transformations) Read More &raquo;\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/\" \/>\r\n<meta property=\"og:site_name\" content=\"BinaryWorld Blog\" \/>\r\n<meta property=\"article:published_time\" content=\"2013-11-01T16:27:42+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml-animation.-scale-rotate-transformation.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"512\" \/>\r\n\t<meta property=\"og:image:height\" content=\"167\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\r\n<meta name=\"author\" content=\"Binary World\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Binary World\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/\",\"url\":\"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/\",\"name\":\"XAML Animation - How to Scale and Rotate Object (Multiple Transformations) - BinaryWorld Blog\",\"isPartOf\":{\"@id\":\"https:\/\/binaryworld.net\/blogs\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml-animation.-scale-rotate-transformation.jpg\",\"datePublished\":\"2013-11-01T16:27:42+00:00\",\"dateModified\":\"2013-11-01T16:27:42+00:00\",\"author\":{\"@id\":\"https:\/\/binaryworld.net\/blogs\/#\/schema\/person\/77cf0a9a512dd22bff93c6a1b6374fe0\"},\"breadcrumb\":{\"@id\":\"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/#primaryimage\",\"url\":\"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml-animation.-scale-rotate-transformation.jpg\",\"contentUrl\":\"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml-animation.-scale-rotate-transformation.jpg\",\"width\":\"512\",\"height\":\"167\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/binaryworld.net\/blogs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"XAML Animation &#8211; How to Scale and Rotate Object (Multiple Transformations)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/binaryworld.net\/blogs\/#website\",\"url\":\"https:\/\/binaryworld.net\/blogs\/\",\"name\":\"BinaryWorld Blog\",\"description\":\"Tips and Tutorials for Microsoft SQL Server, SSIS, SSAS, Business Intelligence, C#, .net\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/binaryworld.net\/blogs\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/binaryworld.net\/blogs\/#\/schema\/person\/77cf0a9a512dd22bff93c6a1b6374fe0\",\"name\":\"Binary World\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/binaryworld.net\/blogs\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eaea47799daa577835eb53e64dfd3e13?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eaea47799daa577835eb53e64dfd3e13?s=96&d=mm&r=g\",\"caption\":\"Binary World\"},\"description\":\"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.\",\"url\":\"https:\/\/binaryworld.net\/blogs\/author\/admin\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"XAML Animation - How to Scale and Rotate Object (Multiple Transformations) - BinaryWorld Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/","og_locale":"en_US","og_type":"article","og_title":"XAML Animation - How to Scale and Rotate Object (Multiple Transformations) - BinaryWorld Blog","og_description":"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 &hellip; XAML Animation &#8211; How to Scale and Rotate Object (Multiple Transformations) Read More &raquo;","og_url":"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/","og_site_name":"BinaryWorld Blog","article_published_time":"2013-11-01T16:27:42+00:00","og_image":[{"width":"512","height":"167","url":"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml-animation.-scale-rotate-transformation.jpg","type":"image\/jpeg"}],"author":"Binary World","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Binary World","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/","url":"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/","name":"XAML Animation - How to Scale and Rotate Object (Multiple Transformations) - BinaryWorld Blog","isPartOf":{"@id":"https:\/\/binaryworld.net\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/#primaryimage"},"image":{"@id":"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/#primaryimage"},"thumbnailUrl":"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml-animation.-scale-rotate-transformation.jpg","datePublished":"2013-11-01T16:27:42+00:00","dateModified":"2013-11-01T16:27:42+00:00","author":{"@id":"https:\/\/binaryworld.net\/blogs\/#\/schema\/person\/77cf0a9a512dd22bff93c6a1b6374fe0"},"breadcrumb":{"@id":"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/#primaryimage","url":"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml-animation.-scale-rotate-transformation.jpg","contentUrl":"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml-animation.-scale-rotate-transformation.jpg","width":"512","height":"167"},{"@type":"BreadcrumbList","@id":"https:\/\/binaryworld.net\/blogs\/xaml-animation-how-to-scale-and-rotate-object-multiple-transformations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/binaryworld.net\/blogs\/"},{"@type":"ListItem","position":2,"name":"XAML Animation &#8211; How to Scale and Rotate Object (Multiple Transformations)"}]},{"@type":"WebSite","@id":"https:\/\/binaryworld.net\/blogs\/#website","url":"https:\/\/binaryworld.net\/blogs\/","name":"BinaryWorld Blog","description":"Tips and Tutorials for Microsoft SQL Server, SSIS, SSAS, Business Intelligence, C#, .net","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/binaryworld.net\/blogs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/binaryworld.net\/blogs\/#\/schema\/person\/77cf0a9a512dd22bff93c6a1b6374fe0","name":"Binary World","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/binaryworld.net\/blogs\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eaea47799daa577835eb53e64dfd3e13?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eaea47799daa577835eb53e64dfd3e13?s=96&d=mm&r=g","caption":"Binary World"},"description":"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.","url":"https:\/\/binaryworld.net\/blogs\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/posts\/468"}],"collection":[{"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/comments?post=468"}],"version-history":[{"count":0,"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/posts\/468\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/media\/470"}],"wp:attachment":[{"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/media?parent=468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/categories?post=468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/tags?post=468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}