Take Avalon to the Next Dimension to Achieve 3D Effects

Find out how to use Expression, Microsoft's new XAML design tool, to build advanced user interfaces that incorporate 3D effects and inheritable control stylingand still interact seamlessly with your Visual Studio projects.

by Laurence Moroney

May 8, 2006

Page 1 of 4

he earlier articles in this series (here and here) looked at how WPF works and how it fits in with the plethora of technologies that are available to build next generation applications. The articles discussed:

They then showed how to build a sample application that implements an online store using those technologies. But the sample application had a flat, two-dimensional user interface similar to interfaces you've seen (and built) for the past several years.

Now, get ready for change. With WPF you can easily go beyond flat 2D applications, adding animation, three-dimensional, and "gel" effects. This article shows you how to provide some of these UI enhancements to the previous sample application. The end result is that the finished sample application looks entirely different. Figure 1 shows the new 3D version, while Figure 2 shows the original 2D interface.

Figure 1. 3D Version of the Spy Store: The Spy Store application, extended with 3D, "gel," and reflection effects.

If you haven't already done so, I recommend that you read the preceding article in this series which explains how the application works and walks you through the process of creating it. That will give you the background you need to start adding the 3D and animation effects.

Figure 2 shows how Expression and the sample application from the previous article should appear before you begin. It's important to realize before you start that you won't need to modify the application's existing code to achieve these rather radical UI changesall the changes take place in the XAML UI layer without affecting the underlying application.