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">

<Canvas x:Name="Layer" SL3DControls:DepthCanvas.ZDepth="20">
...
</Canvas>