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. 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
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”/>
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>
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