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 xmlns namespace declaration in it:

<Canvas xmlns="">
   . . .
   . . .
   . . .
   . . .

Sample ScreenCast

Download the code (Silverlight 3 beta)

No Comments