Today is Day #14 in my series 31 Days of Silverlight. Today, we’re going to talk about a new feature in Silverlight: Perspective 3D. It adds another dimension to how we can think about our user interface, and can provide some cool interactions as well.

Instead of building out an entire application today, we are going to use the application we built on Day #10, Styling Silverlight Controls. You can download the source for that project here.

Refreshing your memory

In case you’re working through this code for the first time, this application is just a simple form, which we moved all of the styles into StaticResources in our app.xaml file. For some extra polish, I also made the form capable of sending an email. Type your email address in the appropriate box, and it will send the contents of the form to you.

When you submit the form, the Sumbit button becomes disabled, and the text changes to the word “Sent!” Instead, we’re going to have the box rotate in 3D space so that it appears to fold into the side of the application. Let’s get started.

Understanding Cartesian geometry

I am going to be using Expression Blend 3 again for this, but there’s nothing stopping you from writing this XAML in Visual Studio. I just find it easier to drag shapes than to type markup.

In our initial application, we placed all of our elements in the root Grid of the page. For our new tasks, we’re going to want to make this something other than the primary element on the page. The easiest way to do this in Blend is to right-click on the Grid named LayoutRoot in the Objects and Timeline panel. Choose “Group Into” and choose Canvas. This will wrap a canvas around the element you selected. I changed the background color of the new Canvas to gray, just so it would look different from the white background of the form.

To create our 3D effect, we’re going to use a Projection transform. We can transform an object on its X, Y, or Z axis. The X axis is like there is a horizontal bar running through the middle of the element that it rotates around. The Y axis is as if there is a vertical bar running through the middle of the element that it rotates around. The Z axis is determined only by where the X and Y planes intersect, and extends towards you. You can also read more about Cartesian coordinates on Wikipedia. Here’s a visual of what that means:

Manipulating our Y axis

We are going to use a PlaneProjection to modify our form in our animation. So, I create my animation (like I did in Day #10’s demo), and move the Y axis to -101 in 1 second. I also created a second animation to return the form to normal. Here’s what the animations look like in XAML:

        <Storyboard x:Name="ClosePanel">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-101"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="OpenPanel">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-101"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

Calling our animation

Now it’s as simple as calling our animations from code. I’ve modified the original Page.xaml.cs file, so that our new animation, ClosePanel gets called when we click the Submit button. The OpenPanel animation gets called when our email service gives us a positive response. At this point, go ahead and run the application, and when you enter an email address and click Submit, your panel should rotate inward. Here’s the code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightStyling
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            Clicky.Click += new RoutedEventHandler(Clicky_Click);
        }

        void Clicky_Click(object sender, RoutedEventArgs e)
        {
            if (Email.Text == ""){
                Email.Focus();
            }
            else
            {
                ClosePanel.Begin();
                MailerReference.MailerSoapClient mailerClient = new MailerReference.MailerSoapClient();
                mailerClient.SendMailCompleted += new EventHandler<SilverlightStyling.MailerReference.SendMailCompletedEventArgs>(mailerClient_SendMailCompleted);
                string name = FirstName.Text.ToString() + " " + LastName.Text.ToString();
                string body = FirstName.Text.ToString() + "n" + LastName.Text.ToString() + "n" + Address.Text.ToString() + "n" + CityStateZip.Text.ToString();
                mailerClient.SendMailAsync("jeff@jeffblankenburg.com", Email.Text.ToString(), name, body);
            }
        }

        void mailerClient_SendMailCompleted(object sender, SilverlightStyling.MailerReference.SendMailCompletedEventArgs e)
        {
            OpenPanel.Begin();
            Clicky.Content = "Sent!";
            Clicky.IsEnabled = false;
        }
    }
}

Gratuitous use of 3D

Here’s when I have to my a <soapbox> statement. Just because you CAN move things in a 3D space does NOT mean that you should. Please don’t make this cool ability join the ranks of flaming logos and the <blink> tag. Be responsible. Now you know. And knowing is half the battle.

Summary

This was a relatively simple example of Perspective 3D, but it does demonstrate how simple it is to manipulate anything in a Silverlight app. Click here to download this Silverlight Perspective 3D example. Our example application is running below, but if you’re having trouble seeing it, you can see the Silverlight Perspective 3D example here.