{"id":478,"date":"2013-11-01T16:58:42","date_gmt":"2013-11-01T20:58:42","guid":{"rendered":"http:\/\/binaryworld.net\/blogs\/?p=478"},"modified":"2013-11-02T12:42:46","modified_gmt":"2013-11-02T16:42:46","slug":"wpf-animation-on-projection-property-using-code-or-xaml","status":"publish","type":"post","link":"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/","title":{"rendered":"WPF Animation on Projection Property using code or XAML"},"content":{"rendered":"<p>If you try to define DoubleAnimation on Projection property then you will see lot of challenge. Here is How to fix.<\/p>\n<p>First make sure you create Name Attribute on Projection property like below for whatever UI element you want animate. So in below Example If I want to change Projection of Image then I will need Name for Image.Projection<\/p>\n<pre class=\"brush: xml; gutter: true; first-line: 1; highlight: []; html-script: false\">\r\n\r\n                &lt;Image Margin=&quot;11&quot; Name=&quot;Image1&quot; Source=&quot;\/Assets\/Images\/Tile_Fruits.png&quot; Height=&quot;200&quot; &gt;\r\n                    &lt;Image.Projection&gt;\r\n                        &lt;PlaneProjection x:Name=&quot;Image1Projection&quot; RotationX=&quot;0&quot; RotationY=&quot;0&quot; RotationZ=&quot;0&quot;  \/&gt;\r\n                    &lt;\/Image.Projection&gt;\r\n                &lt;\/Image&gt;\r\n<\/pre>\n<p>If you using C# code to create Storyboard then try this code<\/p>\n<pre class=\"brush: csharp; gutter: true; first-line: 1; highlight: []; html-script: false\">\r\n        public static void FlipImage(Image img)\r\n        {\r\n\r\n            Storyboard _storyBoard = new Storyboard();\r\n            DoubleAnimation animation = new DoubleAnimation()\r\n            {\r\n                From = 0,\r\n                Duration = new Duration(TimeSpan.FromSeconds(2)),\r\n                To = 60,\r\n            };\r\n            Storyboard.SetTarget(animation, img);\r\n            Storyboard.SetTargetProperty(animation, new PropertyPath(&quot;(UIElement.Projection).(PlaneProjection.RotationY)&quot;));\r\n            _storyBoard.Children.Add(animation);\r\n            _storyBoard.Begin();\r\n\r\n            return;\r\n        }\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>If you try to define DoubleAnimation on Projection property then you will see lot of challenge. Here is How to fix. First make sure you create Name Attribute on Projection property like below for whatever UI element you want animate. &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/\"> <span class=\"screen-reader-text\">WPF Animation on Projection Property using code or XAML<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":488,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49,66,84,28,56,74],"tags":[83,38,159,82],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>WPF Animation on Projection Property using code or XAML - 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\/wpf-animation-on-projection-property-using-code-or-xaml\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"WPF Animation on Projection Property using code or XAML - BinaryWorld Blog\" \/>\r\n<meta property=\"og:description\" content=\"If you try to define DoubleAnimation on Projection property then you will see lot of challenge. Here is How to fix. First make sure you create Name Attribute on Projection property like below for whatever UI element you want animate. &hellip; WPF Animation on Projection Property using code or XAML Read More &raquo;\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/\" \/>\r\n<meta property=\"og:site_name\" content=\"BinaryWorld Blog\" \/>\r\n<meta property=\"article:published_time\" content=\"2013-11-01T20:58:42+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2013-11-02T16:42:46+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml.png\" \/>\r\n\t<meta property=\"og:image:width\" content=\"167\" \/>\r\n\t<meta property=\"og:image:height\" content=\"167\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\/wpf-animation-on-projection-property-using-code-or-xaml\/\",\"url\":\"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/\",\"name\":\"WPF Animation on Projection Property using code or XAML - BinaryWorld Blog\",\"isPartOf\":{\"@id\":\"https:\/\/binaryworld.net\/blogs\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml.png\",\"datePublished\":\"2013-11-01T20:58:42+00:00\",\"dateModified\":\"2013-11-02T16:42:46+00:00\",\"author\":{\"@id\":\"https:\/\/binaryworld.net\/blogs\/#\/schema\/person\/77cf0a9a512dd22bff93c6a1b6374fe0\"},\"breadcrumb\":{\"@id\":\"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/#primaryimage\",\"url\":\"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml.png\",\"contentUrl\":\"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml.png\",\"width\":\"167\",\"height\":\"167\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/binaryworld.net\/blogs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WPF Animation on Projection Property using code or XAML\"}]},{\"@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":"WPF Animation on Projection Property using code or XAML - 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\/wpf-animation-on-projection-property-using-code-or-xaml\/","og_locale":"en_US","og_type":"article","og_title":"WPF Animation on Projection Property using code or XAML - BinaryWorld Blog","og_description":"If you try to define DoubleAnimation on Projection property then you will see lot of challenge. Here is How to fix. First make sure you create Name Attribute on Projection property like below for whatever UI element you want animate. &hellip; WPF Animation on Projection Property using code or XAML Read More &raquo;","og_url":"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/","og_site_name":"BinaryWorld Blog","article_published_time":"2013-11-01T20:58:42+00:00","article_modified_time":"2013-11-02T16:42:46+00:00","og_image":[{"width":"167","height":"167","url":"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml.png","type":"image\/png"}],"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\/wpf-animation-on-projection-property-using-code-or-xaml\/","url":"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/","name":"WPF Animation on Projection Property using code or XAML - BinaryWorld Blog","isPartOf":{"@id":"https:\/\/binaryworld.net\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/#primaryimage"},"image":{"@id":"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/#primaryimage"},"thumbnailUrl":"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml.png","datePublished":"2013-11-01T20:58:42+00:00","dateModified":"2013-11-02T16:42:46+00:00","author":{"@id":"https:\/\/binaryworld.net\/blogs\/#\/schema\/person\/77cf0a9a512dd22bff93c6a1b6374fe0"},"breadcrumb":{"@id":"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/#primaryimage","url":"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml.png","contentUrl":"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/xaml.png","width":"167","height":"167"},{"@type":"BreadcrumbList","@id":"https:\/\/binaryworld.net\/blogs\/wpf-animation-on-projection-property-using-code-or-xaml\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/binaryworld.net\/blogs\/"},{"@type":"ListItem","position":2,"name":"WPF Animation on Projection Property using code or XAML"}]},{"@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\/478"}],"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=478"}],"version-history":[{"count":0,"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/posts\/478\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/media\/488"}],"wp:attachment":[{"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/media?parent=478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/categories?post=478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/tags?post=478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}