Along with using the out of the box Grid, StackPanel, Canvas etc. in Silverlight 2 you could create your own custom panel types to perform arbitrary layout. With Silverlight 3 you can combine custom panels together with the PlaneProjection to layout elements in 3D space. I’ll show you how.

First, having 3D elements jump from position to position is incredibly disconcerting. Its difficult to track the objects and so destroys the 3D illusion being created.

AnimatingProjectionPanelBase is the start point for understanding this – it uses similar techniques to animated 2D panels (here and here), but applies them to a Silverlight 3 PlaneProjection.

To make use of it, create a new panel deriving from this type e.g.

public class ProjectionOffsetPanel : AnimatingProjectionPanelBase

then in the ArrangeOverride(Size finalSize) function, call the provided SetLocation method on each child.

protected override Size ArrangeOverride(Size finalSize)
{
    foreach (UIElement child in Children)
    {
        PlaneProjection projection = CreateYourPlaneProjection(…);
        base.SetLocation(child, yourDefaultProjection, projection);
    }
    return finalSize;
}

The sample code includes two panels that make use of this.

ProjectionOffsetPanel allows you to layout elements by setting a start projection that is applied to the first element, and adding an offset to each each subsequent element.

<three:ProjectionOffsetPanel> 
    <three:ProjectionOffsetPanel.ProjectionZero> 
        <PlaneProjection 
            RotationY="37" 
            GlobalOffsetY="208" 
            GlobalOffsetX="236" 
            RotationX="-28" 
            RotationZ="-3" /> 
    </three:ProjectionOffsetPanel.ProjectionZero> 
    <three:ProjectionOffsetPanel.ProjectionOffset> 
        <PlaneProjection 
            RotationY="0.5" 
            GlobalOffsetY="-20" 
            GlobalOffsetZ="-20" /> 
    </three:ProjectionOffsetPanel.ProjectionOffset>

this gives an effect similar to the Windows Vista Flip3D feature

ProjectionPathPanel arranges elements along a path in 3D space that is defined by fixed points along this path, each point can be set up from xaml

<three:ProjectionPathPoint Position="0" > 
    <three:ProjectionPathPoint.Projection> 
        <PlaneProjection 
            GlobalOffsetX="236" 
            GlobalOffsetY="208" 
            GlobalOffsetZ="25" 
            RotationX="-28" 
            RotationY="37" 
            RotationZ="-3" /> 
    </three:ProjectionPathPoint.Projection>
</three:ProjectionPathPoint>

This allows arbitrary 3D paths to be laid out on screen

As these present as Silverlight Panels, both can be used in Expression Blend and support use either to hold static content but they really light up when used with a databound  ObservableCollection into which you are adding and removing content.

Download the sample.