How to Create 3D Cube in Sliverlight with Visual Studio 2010

Introduction

In this article I will show, how to create projection (rotating) 3D Cube in Silverlight with Visual Studio 2010. The Silverlight is great technologies to create graphics, 3D motions and objects.

Implementation

As usual open visual Studio 2010 and create Silverlight type project and the target .Net framework will be 4.0 

In order to create this projection 3D cube, need some images to use in cube. So just create a folder call Images in solution explorer and add images from file directory.

Then we have to modify the XAML in main.xaml in order to create projection images in page as like below,

And also add two grid objects and support rotation as like below,

The XAML modification is finished now navigate to code behind and write code in MainPage constructor as like shown in below,

C# Code

private Point pt;public MainPage()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

 Then write code within page load to register MouseMove and Rendering event as like below,

C# Code

void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            LayoutRoot.MouseMove += new MouseEventHandler(LayoutRoot_MouseMove);
            CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
        }

Then write code within the mouse move event as like below,

C# Code

void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
        {
            pt = e.GetPosition(LayoutRoot);
        }

 And then important point is code for rendering event, because this event is make rotating and set angles to object.

C# Code

void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            Image1Projection.RotationY += ((pt.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
            Image2Projection.RotationY += ((pt.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
            Image3Projection.RotationY += ((pt.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
            Image4Projection.RotationY += ((pt.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
            Image5Projection.RotationY += ((pt.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
            Image6Projection.RotationY += ((pt.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
            Image1Projection.RotationX += ((pt.Y - (LayoutRoot.ActualHeight / 2)) / LayoutRoot.ActualHeight) * 10;
            Image2Projection.RotationX += ((pt.Y - (LayoutRoot.ActualHeight / 2)) / LayoutRoot.ActualHeight) * 10;
            Image3Projection.RotationX += ((pt.Y - (LayoutRoot.ActualHeight / 2)) / LayoutRoot.ActualHeight) * 10;
            Image4Projection.RotationX += ((pt.Y - (LayoutRoot.ActualHeight / 2)) / LayoutRoot.ActualHeight) * 10;
            Image5Rotation.Angle -= ((pt.Y - (LayoutRoot.ActualHeight / 2)) / LayoutRoot.ActualHeight) * 10;
            Image6Rotation.Angle += ((pt.Y - (LayoutRoot.ActualHeight / 2)) / LayoutRoot.ActualHeight) * 10;
        }

The Complete code for the Main.xaml.cs,

C# 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 _3DCube
{public partial class MainPage : UserControl
    {private Point pt;public MainPage()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            LayoutRoot.MouseMove += new MouseEventHandler(LayoutRoot_MouseMove);
            CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
        }void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            Image1Projection.RotationY += ((pt.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
            Image2Projection.RotationY += ((pt.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
            Image3Projection.RotationY += ((pt.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
            Image4Projection.RotationY += ((pt.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
            Image5Projection.RotationY += ((pt.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
            Image6Projection.RotationY += ((pt.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
            Image1Projection.RotationX += ((pt.Y - (LayoutRoot.ActualHeight / 2)) / LayoutRoot.ActualHeight) * 10;
            Image2Projection.RotationX += ((pt.Y - (LayoutRoot.ActualHeight / 2)) / LayoutRoot.ActualHeight) * 10;
            Image3Projection.RotationX += ((pt.Y - (LayoutRoot.ActualHeight / 2)) / LayoutRoot.ActualHeight) * 10;
            Image4Projection.RotationX += ((pt.Y - (LayoutRoot.ActualHeight / 2)) / LayoutRoot.ActualHeight) * 10;
            Image5Rotation.Angle -= ((pt.Y - (LayoutRoot.ActualHeight / 2)) / LayoutRoot.ActualHeight) * 10;
            Image6Rotation.Angle += ((pt.Y - (LayoutRoot.ActualHeight / 2)) / LayoutRoot.ActualHeight) * 10;
        }void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
        {
            pt = e.GetPosition(LayoutRoot);
        }
    }
}

 That's all, now run application and see how is work.

Live Demo

Live 3D cube Demo

Note:You have to install Silverlight plugin in order to view motion.

Download Sample Project

Sample Project source - 5 MB

Summary

In this article you have learned how to create 3D cube in Silverlight using visual studio 2010 with projection. Hopes help and thank you for reading.