In this article, we will see how to use 3D Plane Projection in Silverlight. For this demonstration I am using the following controls – 1) Border 2) DataGrid 3) Chart control from Silverlight toolkit and 4) Hyperlink button.
I am also using two story boards for creating a ‘Double Animation’.
So the first step is to create a Silverlight project. I am fond of Microsoft Expression Blend, although I am not a good designer :) Anyways, once you create a Silverlight project, add a class with the name ‘CustomerSales’ and add few properties to the same class as shown below –
In this demonstration I am showing some sales records for different cities. Once you click the row, the total sales for Q1, Q2, Q3 and Q4 is shown in a chart format with some nice animation using Silverlight Plane Projection.
Now let’s import two namespaces in our sample as shown below –
Now go to your MainPage.xaml and replace <Grid></Grid> with the code shown below –
<UserControl.Resources>
<Storyboard x:Name="salesDGRowSelected">
<DoubleAnimation Duration="0:0:3" To="-50"
Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)"
Storyboard.TargetName="dgAllSales" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:3" To="0"
Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)"
Storyboard.TargetName="border" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:3" To="1"
Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border"
d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:3" To="-30"
Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)"
Storyboard.TargetName="border" d:IsOptimized="True"/>
Read more: DevCurry