Browse DevX
Sign up for e-mail newsletters from DevX


Take Avalon to the Next Dimension to Achieve 3D Effects : Page 4

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.

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!

Laurence Moroney is a freelance enterprise architect who specializes in designing and implementing service-oriented applications and environments using .NET, J2EE, or (preferably) both. He has authored books on .NET and Web services security, and more than 30 professional articles. A former Wall Street architect, and security analyst, he also dabbles in journalism, reporting for professional sports. You can find his blog at http://www.philotic.com/blog.
Thanks for your registration, follow us on our social networks to keep up-to-date