Silverlight 3d Carousel Effect Tutorial

Silverlight 3D resembles the movement of a merry-go-round carousel.

The 3D carousel is an interface used to present web material or photographs. The format of the interface is such that the material is presented much like an actual carousel, as the material rotates in a circular fashion from the front to the back of the screen. This interface is used in Microsoft’s Silverlight application, which utilizes a Javascript language format for programming purposes.


1. Open Microsoft Visual Studio to get started using Silverlight. Once the program opens, create a new file by clicking on “File,” then “New” and finally “Project.”

2. Choose between Visual C# or Visual Basic as your programming language. Select Silverlight as the type of project to be completed at this point as well. Choose each of these options by pointing and clicking on them in the new project screen. Once highlighted, select “Ok” to move on to the next screen.

3. Give your project whatever name you like. On the same screen, chose the project type from the drop-down menu and choose the version of Silverlight you are using. You can also set up your project using a test page or do it within your own website.

4. Open the Solution Explorer interface by clicking on “View” and then “Solution Explorer,” if Solution Exploreer does not automatically open for you. Select the “HelloWorld3D” from within Solution Explorer to get started on the 3D interface. DirectX SDK must be installed for you to use the HelloWorld3D solution.

5. Open the “Default.html” file within Solution Explorer. Ensure that the “EnableGPUAcceleration” command is enabled. You have to have this enabled to be able to use the draw function in Silverlight. Add the DrawingSurface control by inserting code into MainPage.xaml:

READ  Determine What Graphics Card Is Installed

Then add the following code:

txt.Dispatcher.BeginInvoke(() =>{txt.Text = string.Format(“Delta Time: {0}mstTotalTime: {1}”, e.DeltaTime.TotalMilliseconds, e.TotalTime);});

6. Manage your current graphics device using GraphicsDeviceManager. This device manager is necessary for 3D rendering. Adding “GraphicsDeviceManager deviceManager = GraphicsDeviceManager.Current; txt.Text = string.Format(“Render Mode: {0}tReason: {1}”, deviceManager.RenderMode, deviceManager.RenderModeReason);” to MainPage.xaml.cs will enable the ability to use 3D rendering. To make this effective, set the enableGPUAcceleration to “False,” then run the program. Once the program runs, set it so that it is enabled by changing the setting to “True.”

7. Create your 3D rendering using GraphicsDeviceManager. Clear the device manager before trying to use it by entering the following code:

“device.Clear(ClearOptions.Target | ClearOptions.DepthBuffer, new Color(0, 0, 0, 0), 10.0f, 0);”

8. Use VertexDeclaration to size and format your data. Use VertexPositionColor to define the color and VertexPositionTexture for more advanced applications. However, you may also use Microsoft.Xna.Framework.Graphics.Extensions for some predefined vertex structures, rather than constructing your own.