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
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:
public partial class Scene1
protected override void OnInitialized(
Reflection.Fill = new
|Figure 18. Final Application: This screenshot shows the finished application, including the Reflection effect.|
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 reflectionusing 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!