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 likea 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 importantthis 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.
Adding Gel Highlights
|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.||
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.