The Silverlight 3D Controls project

Introduction

The last months I’ve been playing with the ideas for a few Silverlight Controls using 3D effects. Movement, animation and Depth in various controls for various purposes. The entire project, including the sourcecode and demos, will be available on CodePlex: http://SL3DControls.codeplex.com.

DepthCanvas

The DepthCanvas is the first control in the collection. The DepthCanvas stacks layers on top of each other, and rotates the whole slightly when the mouse moves. This adds a feel of depth to your UI. It is used as a regular canvas, but adds a few attached properties.

First lets look a small demo app.

As the mouse moves the application is update. By placing different elements at different depths, some elements start standing out a bit more.

Using the DepthCanvas

Start by adding a reference to the library to your project and adding the reference to the top of your usercontrol:

xmlns:SL3DControls="clr-namespace:SL3DControls;assembly=SL3DControls"

In the body of the usercontrol, define the DepthCanvas. By giving it a speed of 100, the rotation is very small. I suggest you should experiment with this value and try values like 5, 25 or 250 to see what is happening.

<SL3DControls:DepthCanvas Speed="100">
 
Next, add different Canvasses to the control. Each Canvas will be on top of the last. The depth of the canvas is provided by an attached property ZDepth. The closer this value is to 0, the smaller the effect of the rotation. Try keeping a distance between the depths to ensure visibility of the effect.
 
<Canvas x:Name="Layer" SL3DControls:DepthCanvas.ZDepth="20">
...
</Canvas>