Silverlight 3 – Playing with Perspective 3D

Silverlight 3 allows you to apply 3D transformation to XAML elements.

I created a sample to try different settings (RotationX, CenterOfRotation, LocalOffset, …) on a picture.


Here is a basic sample to apply some rotations to a picture:

<PlaneProjection RotationX=”10″ RotationY=”20″ RotationZ=”30″/>
<Image Source=”Logo.png” />

This is also supported in Expression Blend:

Blend 3 Projection editor

The result:

Silverlight 3 Perspective 3D

Note you can apply 3D to any xaml objects like DataGrid or TextBox, and doing this user can still interact with them live!

Element-to-Element Binding

My sample do not use any code to apply 3D thanks to the new Element-to-Element Binding in Silverlight 3: you can link 2 elements declaratively.
I use this to bind my Sliders to each 3D properties (RotationX, RotationY, …). Here the Rotation value change while the user move the slider:

<Slider Value=”{Binding RotationX, Mode=TwoWay, ElementName=projection}” Minimum=”0″ Maximum=”360″/>

Dynamic XAML and OpenFileDialog

I also added the possibility to dynamically load XAML from a file. This is done via the OpenFileDialog control and the static Load() method of the XamlReader class.

private void LoadXAML()
OpenFileDialog ofd = new OpenFileDialog();
ofd.Multiselect = false;
ofd.Filter = “XAML Files (*.xaml)|*.xaml”;
if (ofd.ShowDialog().Value)
string xaml = ofd.File.OpenText().ReadToEnd();
UIElement elem = XamlReader.Load(xaml) as UIElement;

Note any dynamically loaded XAML file should have the /css>

.csharpcode, .csharpcode pre
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
background-color: #f4f4f4;
width: 100%;
margin: 0em;
.csharpcode .lnum { color: #606060; }

Sample ScreenCast

Download the code (Silverlight 3 beta)