Silverlight reference: 3D effect (perspective conversion)-msn

 

You can use perspective conversion to apply 3D effects to any SilverlightUielement. For example, you can create an illusion that the object is rotated toward you or away from you, as shown in.

Images converted from Perspective

Although it shows perspective conversion applied to a simple image, you can apply perspective conversionUielement, Including controls. For example, you can apply this effectGridAnd the latter includesTextboxAndButton. Despite rotating these controls, you canTextboxType the content and clickButton(Assuming these controls are visible ).

Another common case of perspective conversion is to arrange objects relative to each other to create 3D effects, as shown in.

Stack objects to create 3D Effects

In addition to creating a static 3D effect, you can also animation the perspective conversion attribute to create a moving 3D effect.

Description

Perspective conversions are not equivalent to 3D engines; however, they can be used to make 2D Silverlight content as it is drawn on a 3D plane.

Rotate an object on a 3D plane

To apply the conversion of a propertyUielement, PleaseProjectionObjectUielementSet propertyPlaneprojection.PlaneprojectionDefines how the conversion is presented in the space. The following example shows a simple situation.

 

 

Code

< Stackpanel Margin = "35" Background = "Gray" >
< Stackpanel. Projection >
< Planeprojection Rotationx = "-35" Rotationy = "-35" Rotationz = "15" />
</ Stackpanel. Projection >
< Textblock Margin = "10" > Type something below </ Textblock >
< Textbox Margin = "10" > </ Textbox >
< Button Margin = "10" Content = "Click" Width = "100"   />
</ Stackpanel >

 

 

In the preceding example,Rotationx,RotationyAndRotationzThis attribute specifies to rotate around an axis.Stackpanel. For example,RotationxThis attribute specifies the rotation around the horizontal axis of the object. DemonstratedRotationxThis attribute rotates an object around the X axis.

Rotatex = "-35"

In this figure, note how the Y and Z axes are displayed. All the vertices of these three axes are called the center of rotation.

RotationyThe property is rotated around the Y axis of the rotation center.

Rotatey = "-35"

RotationzThis property is rotated around the Z axis of the center of rotation (straight line through the object plane.

Rotatez = "-45"

These rotation attributes can specify a negative value, which rotates the object for a certain degree in the inverse direction. In addition, the absolute logarithm can be greater than 360, which will make the object rotate more than a complete rotation (that is, 360 degrees ). In the following exampleRotationx,RotationyAndRotationzAttribute test different values to see the effect.

Run this example

You can useCenterofrotationx,CenterofrotationyAndCenterofrotationzProperty to move the rotation center. By default, the rotation axis directly goes through the center of the object, causing the object to rotate around its center; however, if you move the center of the rotation to the outer edge of the object, the object rotates around the outer edge.CenterofrotationxAndCenterofrotationyThe default value is 0.5,CenterofrotationzThe default value is 0. ForCenterofrotationxAndCenterofrotationy, The value between 0 and 1 sets the axis in a certain position in the object. The value 0 indicates an object edge, and the value 1 indicates the edge of the opposite side. Values outside this range are allowed and the rotation center is moved accordingly. Because the Z axis of the center of rotation draws a plane that passes through the object,

CenterofrotationxMove the center of rotation along the X axis parallel to the object, whileCenterofrotationyMove the center of rotation along the Y axis of the object. This example uses different valuesCenterofrotationy.

Centerofrotationy = "0.5" (default)

Centerofrotationy = "0.1" (upper edge)

Note thatCenterofrotationyWhen the attribute is set to the default value 0.5, how the image rotates around the center and how it rotates close to the upper edge when it is set to 0.1. Before changingCenterofrotationxAttribute to moveRotationyWhen attributes rotate the object location, you will see similar behavior.

Centerofrotationx = "0.5" (default)

Centerofrotationx = "0.9" (right edge)

Use the following slider example to test the RotationResults of rotating objects at different locations in the center.

 

Locate object

So far, you have learned how to rotate objects in a space. In addition, you can use the following attributes to locate them in space relative to the locations of these rotated objects:

• LocaloffsetxTranslate an object along the X axis of the rotated object plane.

• LocaloffsetyTranslate objects along the Y axis of the rotated object plane.

• LocaloffsetzTranslate an object along the Z axis of the rotated object plane.

• GlobaloffsetxTranslate objects along the X axis of the screen.

• GlobaloffsetyTranslate objects along the Y axis of the screen.

• GlobaloffsetzTranslate objects along the Z axis of the screen.

Local offset

Localoffsetx,LocaloffsetyAndLocaloffsetzThis attribute is used to translate an object along the corresponding axis of the object plane after the object has been rotated. Therefore, the rotation of an object determines the direction of the Object Translation. To demonstrate this concept, the following example showsLocaloffsetxThe animation is processed from 0 to 400, andRotationyAnimation processing is from 0 to 65 degrees.

 

Global offset

Globaloffsetx,GlobaloffsetyAndGlobaloffsetzThis attribute is used to translate objects along the axis of the screen. That is to say, unlike the local offset property, the axis of the object moving along it is irrelevant to any rotation applied to the object. These attributes are useful when you just want to move an object along the X, Y, or Z axis of the screen without worrying about the rotation applied to the object.

 

Matrix3dprojection and matrix3d

You canMatrix3dprojectionAndMatrix3dType used for comparisonPlaneprojectionMore complex quasi-3D solutions are possible.Matrix3dprojectionProvides you with a complete 3D conversion matrix for anyUielementTo apply any model conversion matrix and perspective matrix to the Silverlight element. Remember that these APIs are the most simplified form. Therefore, if you use them, you will need to writeCode. ThereforePlaneprojectionIt is easier to use in a simple 3D solution.