{"id":473,"date":"2013-11-01T16:23:20","date_gmt":"2013-11-01T20:23:20","guid":{"rendered":"http:\/\/binaryworld.net\/blogs\/?p=473"},"modified":"2013-11-01T16:24:54","modified_gmt":"2013-11-01T20:24:54","slug":"projection-in-xaml-wpf-silverlight","status":"publish","type":"post","link":"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/","title":{"rendered":"Create 3D Effect using Projection in WPF\/SilverLight"},"content":{"rendered":"

If you ever noticed then every FrameworkElement in WPF has property called Projection<\/p>\n

This property is very powerful if you use it right way. You can give 3D effect of any UI including Images in WPF\/Silverlight<\/p>\n

Here is sample code which Produces 3D Effect of Image. I used 3 slider controls to Bind to Projection property of Image. But you can mimic same thing using Code.<\/p>\n

\r\n        <StackPanel>\r\n            <Grid>\r\n                <Grid.ColumnDefinitions>\r\n                    <ColumnDefinition \/>\r\n                    <ColumnDefinition Width="100" \/>\r\n                <\/Grid.ColumnDefinitions>\r\n                <Grid.RowDefinitions>\r\n                    <RowDefinition \/>\r\n                    <RowDefinition \/>\r\n                    <RowDefinition \/>\r\n                <\/Grid.RowDefinitions>\r\n                <TextBlock Text="X" \/><Slider Grid.Column="0" Grid.Row="0"  Name="sX" Minimum="-100" Maximum="100" Value="{Binding ElementName=pnlProjection, Mode=TwoWay, Path=RotationX}" Margin="5,0,0,0" ><\/Slider>\r\n                <TextBox Grid.Column="1" Grid.Row="0" Text="{Binding ElementName=sX, Mode=TwoWay, Path=Value}"><\/TextBox>\r\n\r\n                <TextBlock Text="Y" Grid.Row="1"\/>\r\n                <Slider Grid.Column="0" Grid.Row="1"   Name="sY" Minimum="-100" Maximum="100" Value="{Binding ElementName=pnlProjection, Mode=TwoWay, Path=RotationY}" Margin="5,0,0,0" ><\/Slider>\r\n                <TextBox Grid.Column="1" Grid.Row="1"  Text="{Binding ElementName=sY, Mode=TwoWay, Path=Value}"><\/TextBox>\r\n\r\n                <TextBlock Text="Z" Grid.Row="2"\/>\r\n                <Slider Grid.Column="0" Grid.Row="2"   Name="sZ" Minimum="-100" Maximum="100" Value="{Binding ElementName=pnlProjection, Mode=TwoWay, Path=RotationZ}" Margin="5,0,0,0" ><\/Slider>\r\n                <TextBox Grid.Column="1" Grid.Row="2"  Text="{Binding ElementName=sZ, Mode=TwoWay, Path=Value}"><\/TextBox>\r\n            <\/Grid>\r\n            <Image Margin="11" Name="Image2" Source="\/Assets\/Images\/Tile_Fruits.png" Height="200" >\r\n                <Image.Projection>\r\n                    <PlaneProjection x:Name="pnlProjection" RotationX="0" RotationY="0" RotationZ="0"  \/>\r\n                <\/Image.Projection>\r\n            <\/Image>\r\n        <\/StackPanel>\r\n<\/pre>\n
\"\"<\/a><\/p>\n
\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
If you ever noticed then every FrameworkElement in WPF has property called Projection This property is very powerful if you use it right way. You can give 3D effect of any UI including Images in WPF\/Silverlight Here is sample code …<\/p>\n
  Create 3D Effect using Projection in WPF\/SilverLight<\/span> Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":474,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49,66,28,56,74],"tags":[159,82],"yoast_head":"\r\nCreate 3D Effect using Projection in WPF\/SilverLight - 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\/projection-in-xaml-wpf-silverlight\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Create 3D Effect using Projection in WPF\/SilverLight - BinaryWorld Blog\" \/>\r\n<meta property=\"og:description\" content=\"If you ever noticed then every FrameworkElement in WPF has property called Projection This property is very powerful if you use it right way. You can give 3D effect of any UI including Images in WPF\/Silverlight Here is sample code … Create 3D Effect using Projection in WPF\/SilverLight Read More »\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/\" \/>\r\n<meta property=\"og:site_name\" content=\"BinaryWorld Blog\" \/>\r\n<meta property=\"article:published_time\" content=\"2013-11-01T20:23:20+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2013-11-01T20:24:54+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/projection-xaml-silverlight-wpf-1.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"241\" \/>\r\n\t<meta property=\"og:image:height\" content=\"240\" \/>\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=\"2 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/\",\"url\":\"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/\",\"name\":\"Create 3D Effect using Projection in WPF\/SilverLight - BinaryWorld Blog\",\"isPartOf\":{\"@id\":\"https:\/\/binaryworld.net\/blogs\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/projection-xaml-silverlight-wpf-1.jpg\",\"datePublished\":\"2013-11-01T20:23:20+00:00\",\"dateModified\":\"2013-11-01T20:24:54+00:00\",\"author\":{\"@id\":\"https:\/\/binaryworld.net\/blogs\/#\/schema\/person\/77cf0a9a512dd22bff93c6a1b6374fe0\"},\"breadcrumb\":{\"@id\":\"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/#primaryimage\",\"url\":\"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/projection-xaml-silverlight-wpf-1.jpg\",\"contentUrl\":\"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/projection-xaml-silverlight-wpf-1.jpg\",\"width\":\"241\",\"height\":\"240\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/binaryworld.net\/blogs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create 3D Effect using Projection in WPF\/SilverLight\"}]},{\"@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":"Create 3D Effect using Projection in WPF\/SilverLight - 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\/projection-in-xaml-wpf-silverlight\/","og_locale":"en_US","og_type":"article","og_title":"Create 3D Effect using Projection in WPF\/SilverLight - BinaryWorld Blog","og_description":"If you ever noticed then every FrameworkElement in WPF has property called Projection This property is very powerful if you use it right way. You can give 3D effect of any UI including Images in WPF\/Silverlight Here is sample code … Create 3D Effect using Projection in WPF\/SilverLight Read More »","og_url":"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/","og_site_name":"BinaryWorld Blog","article_published_time":"2013-11-01T20:23:20+00:00","article_modified_time":"2013-11-01T20:24:54+00:00","og_image":[{"width":"241","height":"240","url":"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/projection-xaml-silverlight-wpf-1.jpg","type":"image\/jpeg"}],"author":"Binary World","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Binary World","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/","url":"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/","name":"Create 3D Effect using Projection in WPF\/SilverLight - BinaryWorld Blog","isPartOf":{"@id":"https:\/\/binaryworld.net\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/#primaryimage"},"image":{"@id":"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/#primaryimage"},"thumbnailUrl":"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/projection-xaml-silverlight-wpf-1.jpg","datePublished":"2013-11-01T20:23:20+00:00","dateModified":"2013-11-01T20:24:54+00:00","author":{"@id":"https:\/\/binaryworld.net\/blogs\/#\/schema\/person\/77cf0a9a512dd22bff93c6a1b6374fe0"},"breadcrumb":{"@id":"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/#primaryimage","url":"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/projection-xaml-silverlight-wpf-1.jpg","contentUrl":"https:\/\/binaryworld.net\/blogs\/wp-content\/uploads\/2013\/11\/projection-xaml-silverlight-wpf-1.jpg","width":"241","height":"240"},{"@type":"BreadcrumbList","@id":"https:\/\/binaryworld.net\/blogs\/projection-in-xaml-wpf-silverlight\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/binaryworld.net\/blogs\/"},{"@type":"ListItem","position":2,"name":"Create 3D Effect using Projection in WPF\/SilverLight"}]},{"@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\/473"}],"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=473"}],"version-history":[{"count":0,"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/posts\/473\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/media\/474"}],"wp:attachment":[{"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/media?parent=473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/categories?post=473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binaryworld.net\/blogs\/wp-json\/wp\/v2\/tags?post=473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}