Silverlight On Mobile : 3D on your Windows Phone 7 with Silverlight

With my last “Hello World” post, I am sure you must be in position to write some basic apps for your Windows Phone 7. Now we already spend some time to explore basics of Phone and other Development Environment. Now from this article onwards let’s try to look further.

3D in Silverlight is nothing new to us now since it has been made available to us by Microsoft from Silverlight Version 3. Since most of the features of version 3 are well supported on phone, 3D is one of them. Open a new Windows Phone Project and Open a Blend Instance to design your app. My 3D app look like this :

To demonstrate 3D, I have a simple Stack Panel over here and I have put one cool Super Mario Image inside that (Image is taken from Internet and have its own respective copyrights). To showcase 3D, I have taken 3 scrolls which will allow us to rotate the Image along X,Y and Z axis. Initial values for all of the three will be 0 like this :

<StackPanel.Projection>
                <PlaneProjection
                   RotationX="0"
                   RotationY="0"
                   RotationZ="0"/>
</StackPanel.Projection>

3D in Silverlight is mainly achieve by “Plane Projection” class under System.Windows.Media namespace.Plane Projection Class gives you certain Methods and Properties, Plane Projection helps you to set orientation across X,Y and Z axis with properties like RotationX,Y and Z respectively.Now UIElement have property as Projection. You can even set the Center of Rotation with CenterOfRotationX,Y and Z property respectively.

XAML Code :

<Grid x:Name="ContentGrid" Grid.Row="1" Grid.ColumnSpan="5" Grid.RowSpan="3">
           <TextBlock Margin="22,0,0,0" Foreground="Black" VerticalAlignment="Top" HorizontalAlignment="Left" Width="31"><Run Text="X:"/></TextBlock>
           <Slider Margin="8,7,0,0" x:Name="Slider1" Maximum="360" Minimum="-360"  ValueChanged="Slider1_ValueChanged" Height="78" VerticalAlignment="Top" HorizontalAlignment="Left" Width="201" />
           <TextBlock Margin="120,42,0,0" Foreground="Black" VerticalAlignment="Top" HorizontalAlignment="Left" Width="25"><Run Text="Y:"/></TextBlock>
           <Slider Margin="106,46,173,0" x:Name="Slider2" Maximum="360" Minimum="-360" ValueChanged="Slider2_ValueChanged" Height="80" VerticalAlignment="Top" />
           <TextBlock Margin="215,79,0,0" Foreground="Black" VerticalAlignment="Top" HorizontalAlignment="Left" Width="24"><Run Text="Z:"/></TextBlock>
           <Slider Margin="202,86,91,0" x:Name="Slider3" Maximum="360" Minimum="-360" ValueChanged="Slider3_ValueChanged" Height="80" VerticalAlignment="Top" />
           <StackPanel x:Name="MyStack" Margin="0,232,0,0">
               <StackPanel.Projection>
                   <PlaneProjection
                  RotationX="0"
                  RotationY="0"
                  RotationZ="0"
                  />
               </StackPanel.Projection>
               <Image x:Name="MyImg" Source="real-mario-face.jpg" Stretch="UniformToFill" Height="418" Canvas.Top="194"/>
           </StackPanel>
       </Grid>
   </Grid>

C# Code :

using System.Windows;
using System.Windows.Media;
using Microsoft.Phone.Controls;

namespace Demo_3D_Home
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void Slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            ((PlaneProjection)MyStack.Projection).RotationX = e.NewValue;
        }

        private void Slider2_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            ((PlaneProjection)MyStack.Projection).RotationY = e.NewValue;
        }

        private void Slider3_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            ((PlaneProjection)MyStack.Projection).RotationZ = e.NewValue;
        }
    }
}

Once you execute application,It will look like this on emulator :

Now once you start scrolling for corresponding X,Y and Z axis, You will get following outputs for X,Y and Z respectively.

So, This is how you can implement 3D on your Windows Phone 7 with the help of Silverlight on Mobile. In reality you can plug this 3D feature on your phone for some Object Representation or Images.This module can be further enhance by adding some animations to it. So its upto your creativity now, Sky is the limit !

Hope you like this feature and I assume you will start putting it in your apps. I am soon covering some more and odd features and then I will go for DataBinding and Service calls etc. which falls in Business Applications category.

Vikram.