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.

PlaneProjection

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

<StackPanel>

    <StackPanel.Projection>

        <PlaneProjection RotationX=”10″ RotationY=”20″ RotationZ=”30″/>

    StackPanel.Projection>

    <Image Source=”Logo.png” />

StackPanel>

This is also supported in Expression Blend:

The result:

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;

        contentPanel.Children.Clear();

        contentPanel.Children.Add(elem);

    }

}

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)