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:

• 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 changes?all the changes take place in the XAML UI layer without affecting the underlying application.

Creating a Gradient Background
The first thing that you’ll do is to create a gradient background with lighting effects. To begin, select the DocumentRoot item in the timeline. When it’s selected, you’ll see a yellow border around the DocumentRoot image on the design surface. The timeline should look like Figure 3 when the DocumentRoot item is properly selected:

With the DocumentRoot item selected, find the Appearance palette on the right side of the screen (you can see it minimized in Figure 2, below the properties and above the layout), and open it. You’ll see a tool that looks like Figure 4:

	?
Figure 3. Selected Document Root: Here’s how the DocumentRoot item looks when selected in the timeline.

	?
Figure 4. The Appearance Palette: The figure shows the expanded Appearance palette.

In Figure 4, the Appearance palette shows the background as solid white. Select the gradient brush (the button in the middle with black-to-white gradient). As soon as you select it, you’ll see a gradient background appear with black on the left and white on the right (see Figure 5).

To change the direction of the gradient you will have to use a brush transform. You achieve this with the brush transform tool in the tools palette. It looks like this:

When it is selected, you’ll see the transform adorner (see Figure 6) appear above your application.

? Figure 5. Initial Gradient Background: When you first apply a gradient background, you’ll see this black-to-white gradient appear.

? Figure 6. Transform Adorner: Here’s a cutaway section of the designer showing the transform adorner.

By dragging the adorner around you can change the direction of the gradient. Experiment until you find something pleasing.

Note that by working with the gradient brush, you are actually generating XAML code. Here’s an example of the XAML that creates a background gradient.

	?
Figure 7. Setting Color Gradients: On this figure, you can see how the adorner sets the direction of the color gradient fill.

You can experiment with different colors by using the appearance palette. Figure 7 shows an example of how the application looks after setting both gradient colors and direction.

Creating Gel Effects
To create the 3D Gel effects around the content controls, you will use the concept of control templates. These templates are exactly what they sound like?a way to define a common look and feel for controls on the page. Building control templates in Expression is simple.

	?
Figure 8. Creating a Control Template: The figure shows the Create ControlTemplate Resource Dialog in Expression.

On the timeline, find the Master pane, select it, and then right click and select “Edit Template.” Select “Edit a Copy of the Template” from the popup menu, and you’ll see the Create ControlTemplate Resource dialog in Figure 8.

You use the Create ControlTemplate Resource dialog to create your template. You need to give it a name (ListTemplate in this case) and specify where the document is defined and the target type. The target type is important?this example targets ContentControl controls.

When you select OK on this dialog, you will see a new set of template items on the timeline (see Figure 9).

	?
Figure 10. Adding a Grid: The figure shows the timeline with the template and the Grid control that fills it completely.

As the ContentControl that you based this template on already had a control in it (the List control), the template has a child ContentPresenter item. Delete this item, and you will see the list control disappear from the designer. Note that you are not deleting the control from your application, just from the template, because it isn’t necessary.

	?
Figure 9. Timeline Template Items: When you create a new template, the timeline displays a new set of items.

When you finish the template and apply it to the application, the List control will acquire the template styling, because it’s still present in the content panel that is being templated. Don’t worry if this is all a little confusing at the moment, all will become clear as you work with Expression.

With the template still selected, double click the “Grid” entry in the toolbox to add a Grid control that completely fills the template. You can see the grid and the timeline containing the grid in Figure 10.

Make sure that the grid is selected (double click it in the timeline) and draw a rectangle inside the grid (the rectangle tool is in the Tools palette) so that it completely fills the grid. Use the Appearance palette to fill the rectangle with a gradient color. Figure 11 shows an example using a red-to-blue vertical gradient.

Select the arrow tool so you can see the adorners for the rectangle. Select the corner adorners and use them to create rounded corners for the rectangle as shown in Figure 12.

? Figure 11. Filling the Template Background: Here’s the template, showing the Grid control containing a rectangle with a red-to-blue vertical gradient fill.

? Figure 12. Rounding the Corners: Use the adorners to create rounded corners for the gradient-filled rectangle.

? Figure 13. Adding the 3D Gel Effect: You achieve the Gel effect by placing a smaller rectangle with a gradient fill and setting the alpha values.

Adding Gel Highlights
Next, you’ll create another rectangle on top of the first one that implements the Gel highlight. To do that, create a smaller rectangle with a gradient brush fill, and white as its color. On the gradient swatch, set the left arrow to an alpha of 1 and the right arrow to an alpha of 0. Figure 13 shows this in action. Note the alpha value (the A: field) in the Appearance palette.

Adding Content
At this point, you’re ready to add the content element of the page back in. To do this, make sure that the grid is still activated and double click “Content Presenter” in the Library palette. You should see your list reappear in the Master Details pane. You’ll need to move and resize it so that it fits within the Gel header. Note that you aren’t really laying out a list box here (despite appearances)?you are laying out a content presenter so that all other controls that derive from this template will know to lay out their controls in the same way. The content control within the grid on which you based the original template was a list; therefore, you see a list here.

	?
Figure 14. The New Transparent List: Here’s how the product list should look after applying the template.

You are now done with editing the template to get the Gel effects. Click the “Return to Root” button on the Timeline toolbar to leave template editing mode.

You’ll see that the ProductList control is white against its nice new background. You’ll have to change this; thankfully, doing so is very simple. Just set its Background and BorderBrush properties to “No Brush,” and set its Foreground property to a solid white brush. You’ll see the result in Figure 14.

Finally, you can apply the new template settings to the details list. Simply right click “Details” in the timeline, select “Edit Template,” select “Apply Resource,” and then select “List Template.” That causes the details pane to get the same Gel effect. Finally, test the application by pressing F5. Your results should be similar to Figure 15.

Creating a Reflection Effect.
A reflection effect shows a reflected image of existing content. With Expression, creating a reflection effect is very simple. First draw a new rectangle on the document root. Call this rectangle “Reflection.” You’ll probably need to rearrange your screen a little to make room for it; you can see an example in Figure 16, where the application has been moved towards the top of the document, and the new rectangle drawn underneath it.

? Figure 15. The Application with 3D and Gel Effects: Although your styling may differ, after applying the 3D and Gel effects, your application should look similar to this.

? Figure 16. Drawing the Reflection Rectangle: Moving the existing content upward in the document makes room for the reflection rectangle.

? Figure 17. Reflection Rectangle Appearance: Here’s how the Appearance settings for the reflection rectangle fill should look.

Set the Fill and Stroke for the reflection rectangle to “No Brush,” and make the OpacityMask an all-white linear gradient. Give the left hand brush an alpha setting of 0.7 and the right hand brush an alpha setting of 0 (see Figure 17).

Finally, using the Transform palette, find the “Flip” tab, and select “Flip Y,” which will turn the reflected content upside down.

Finally, you need to instruct this rectangle to copy the contents of the ProductGrid control so it can reflect them. The flip transform and the opacity will take care of the rest. To do this, you need to write a little C# code.

Within the projects tab, you will see your scene (called Scene1.xaml). Open this up to reveal the file Scene1.xaml.cs. Double click that, to enter the code editor. You will add the fill to the reflection rectangle upon application initialization.

Here’s the complete code:

   using System;   using System.IO;   using System.Net;   using System.Windows;   using System.Windows.Controls;   using System.Windows.Data;   using System.Windows.Media;   using System.Windows.Media.Animation;   using System.Windows.Navigation;      namespace DevxBrowser   {      public partial class Scene1      {                  public Scene1()         {                     }         
?
Figure 18. Final Application: This screenshot shows the finished application, including the Reflection effect.
         protected override void OnInitialized(            EventArgs e)         {            Reflection.Fill = new               VisualBrush(ProductGrid);         }      }   }

Now when you can run your application you’ll see the reflection effect as shown in Figure 18.

As you can see, Expression is a very powerful tool that hugely simplifies generating XAML applications. As a developer, you should start using and playing with Expression today, to get ready to build the new runtimes based on the Windows Presentation Foundation. The “Cider” plug-in for Visual Studio.NET promises some of this sophistication in the future, but for now it’s far behind Expression.

In this article you saw how you can use Expression to take your user interfaces into the next dimension, easily creating three-dimensional applications with Gel effects and reflection?using almost no code. As you can see, the final result is far more pleasing to the eye than the typical Windows application, and with Expression, XAML, C# and the Windows Presentation Foundation it was actually very easy!