he earlier articles in this series (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:
- XML application markup language (XAML)
- WinFX, the next generation of development APIs for Windows
- Avalon, aka the Windows Presentation Foundation (WPF), the collection of APIs and runtime technologies for user interfaces
- Expression, the new tool for developing with XAML and WPF
- Cider, the plug-in for handling XAML with Visual Studio 2005
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.||
|Figure 2. Initial Application: Here's how the sample application looks before you begin adding 3D and Gel 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 changesall the changes take place in the XAML UI layer without affecting the underlying application.