SilverLight 3D Effects to Images

Applying 3D effects to the Controls to the Images

To apply the 3D effects in general we use projection class and plane projection class. This plane projection class con not be implemented directly with controls rather we need to implement with container like stock panel or flow layout or grid layout etc. This plane projection class will allow to rotate the given layout in 3 directions s, y, and z

Properties with plane projection class

• Centre of rotation x
• Centre of rotation Y
• Centre of rotation z
• Rotation X
• Rotation Y
• Rotation Z

Centre of rotation X:- This property is used to rotate the  centre in x direction. Centre of rotation Y:-  used to rotate the centre of  the plane in Y direction. Centre of Rotation Z:-  used to rotate the centre of the plane in Z direction.   The values of centre of rotation X, centre of rotation y and centre of rotation Z should be form 0 to 1   Rotation X:  Used to set a value that plane should be rotated in x direction Rotation Y : used to set a value that the plane should be rotated in Y direction er, y – a x is Rotation Z:- Used to set a value that the plane should be rotated in z-axis The values of rotation x, rotation Y and rotation Z should be from 0 to 30

Syntax to Apply  3d Effects to a Plane in Layout

<Layout class> <layout class. Projection> <plane projection centre of rotation X = “value” centre of rotation Y = “value” centre of rotation Z = “value” rotation x= “value” rotation Y= “value” Rotation Z = “value”/> </layout class. Projection> Code to create controls within layout </layout class>

Example with 3d Effects to a Stack Panes

  Create a new silver light application

       ↓

Go to xaml source of the page

       ↓

write the following code   <Grid vi name= <stack panel margin = “60” fill = “gray “> <stack panel. Projection> <plane projection Rotation x = “-20” Rotation Y = “-20” Rotations z = “35”/> </stack panel.Projection> </stack panel>  

Example to  Implement 3D Effects with Images

Go to design create the controls within the stock panel then Run the application and check

     ↓

Create a new silver light page

     ↓

go to xaml source. 

     ↓

write the following code. <Stack panel margin = “60” fill= “gray”> <stack panel. Projector> <plane projection centre off rotation X = 0.9 Rotation Y = “90”/> </stack panel. Projection> </stack panel> Go to design

     ↓

Go to tool box

     ↓

double click on Image control

     ↓

This will create image 1

     ↓

Select image 1

     ↓

Go to properties

     ↓

Go to source property in common category

     ↓

click on ellipses button

     ↓

select the required image file to be displayed

     ↓

click on open

     ↓

click on ok  

     ↓

Run the application and check