Silverlight 3D: Using Plane Projection

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

Posted via email from Jasper-net