RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Creating 2D Data-bound Applications with XAML and Expression

Gain graphics and data-binding power you've only dreamed of with the new capabilities in the Windows Presentation Foundation and the new Expression tool.

he previous article in this series supplied a grounding in the Windows Presentation Foundation (aka Avalon). In it, you saw how XAML, Cider, and Expression hang together to give you a complete GUI toolbox, and let you create applications such as Microsoft's "Microsoft Max" demonstration photo management application shown in Figure 1.

Figure 1. Microsoft Max: The figure shows the user interface for "Microsoft Max," a demonstration photo management application.
In this article, you'll take your Windows client development skills to the next level and build an application that looks and behaves similarly. You'll explore what it takes to build a rich client application that implements a store catalog. You'll primarily use Microsoft Expression, which is the most robust XAML/WPF toolkit presently available—and far more sophisticated than the basic Cider XAML editor that ships with Visual Studio 2005. Expression is a wonderful tool, and well worth learning if you are interested in developing Windows Forms applications with XAML, because it provides a powerful design and modeling environment. In fact, you'll implement the application you'll develop in this article without writing a single line of code on the client side. The server side, which provides data services to your WPF GUI, will be written using Visual Studio in the usual manner.

Figure 2. The Catalog Browser Sample Application: Here's the 2D version of the completed sample catalog browser interface.
In fact, this appears to be the direction that .NET applications are going to take over the coming years, with development split between the Expression family for client-side development, and the Visual Studio environment for server-side applications. After you've read through this article and built your first WPF 2D application you'll begin to gain a solid understanding of the exciting new tools with which you'll be able to build the best UIs you've ever built—and build them by writing less code!

The Application
The sample application is a simple catalog browser for an online store, complete with some nice user interface effects that give it a 'gel' 3D interface (see Figure 2). The application also includes an animation where, when a user selects a product, the selected image 'flies in' from behind the selection list.

In this article you will build the basic 2D version, which looks and feels like a standard Windows application. The next article will go further, showing you how to spruce the UI up 3D and animation effects to get the full WPF experience.

Building this UI with WPF is very easy—and a great way to start learning how to use the Expression Interactive Designer.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date