Silverlight3 simulates 3D pivoting

 

3D pivoting support in Silverlight allows developers to use 2D content to create 3D experiences. 3D pivoting is also a good way to make better use of the screen space. Let's take a look at how a simple graphic browsing application uses 3D pivoting to improve its appearance and make better use of its screen space. Different from displaying only one image at a time, we will display a major full-resolution image and other fluoroscopic images from different angles.

To perform 3D Projection on an image, you must set the Projection attribute of the image to PlaneProjection. PlaneProjection provides a set of attributes that make elements look like shapes in 3D spaces. Set the RotationY attribute to 70, that is, rotate the object 70 degrees along the Y axis or the vertical axis. This will make the rotated elements look perpendicular to the screen. Next, we need to move this element back and right to free up space for other images. To achieve this goal, we need to set the GlobalOffsetX and GlobalOffsetZ attributes. The inputs and events of 3D projection elements operate as expected. Therefore, the DataGrid or text box after 3D projection has the same functions as normal controls. We will continue and add the other 4 images and implement a slightly different perspective conversion to complete this procedure. You can set different GlobalOffsetX attribute values to move these images to the left or right.

This is the final result:

Data Binding Improvement
ElementName binding allows developers to bind one UIElement to another in XAML without writing an event handler. There is a new attribute named ElementName in the Binding class of Silverlight 3. When ElementName is set, the binding engine uses the specified element as the data source for binding. The Path attribute is the attribute of the data source bound to the UIElement. If ElementName points to DependencyProperty, the binding engine listens for changes to DependencyProperty and updates the binding accordingly. Here is a XAML snippet that shows how a slider uses ElementName binding to control the opacity of a central image:

The following page is displayed for the above XAML. Move the slider to change the image of the Blue Dragon from completely transparent to completely opaque: