Information for designers and interactive developers - Issue 3 - September 2008
home  |  articles  |  register for the newsletter  |  Issue 1  |  Issue 2  |  Issue 4  |  Issue 5  |  Issue 6
Designing Beautiful Applications with Microsoft Expression - part 1
by Michael Köster
Article Series: Designing Beautiful Applications with Expression
  • Module 1: Getting Started
  • Module 2: UI Styling - Data Binding, Data Templates and Control Templates/Adding/Interactivity/Deploying your Application

In this set of articles, we will walk through the process of designing and building a working WPF desktop application from start to finish. Although the application itself is rather simplistic (from a functional perspective), the concepts and principles used to build it are the same as you would encounter in a more complex software development project. This series of articles is targeted at designers and focuses on the creative process and design aspects. But I hope that developers will find the content valuable as well, even if it just serves as a glimpse into the world of UI design.

First, I would like to introduce you to The Agency. The Agency is a (fictional) design and development shop that builds applications for the desktop and the web. Today is an exciting day at The Agency: a new customer has come by for a project meeting. This prospective customer is a famous museum, and they are looking for an interactive catalog application for their exhibition. This application should run on the information kiosks in the museum so that visitors can access detailed information about the art on display. For starters, the application will just display text and static images, but the museum has great plans for the future - so the application should also be able to handle audio and video data without necessitating a complete re-write at a later stage.

This sounds like an exciting project, so The Agency assigns a developer and a designer to build a prototype.

The project team does some brainstorming and defines the basic parameters for this project:

  • This will be a C# WPF desktop application, displaying dynamic data from an XML data source.
  • Some data filtering functionality is desired by the customer.
  • The application should have a clean, distinctive design and the UI should be easy to use, intuitive and interactive.
  • The screen size will be 1024x768 and the window size 800x600.
  • The application should be implemented in a way so that it can grow with the customer's demands going forward, especially regarding integration of audio/video and later deployment as a web site.
  • The prototype assets - artwork and code - should be re-usable when the project starts.

The tools used to build this application will be Expression Design, Expression Blend and Visual Studio 2008. Expression Design allows a Designer to create graphics and UI elements and then export those in a form that WPF and Silverlight understand. Expression Blend is a production tool for designers. It allows a designer to create user interfaces for WPF and Silverlight applications.

An application, though, is more than just design and pretty visuals so the developers working on the functionality will be using Visual Studio which offers a comprehensive feature set for development tasks. The Expression tools and Visual Studio are pretty powerful applications by themselves but the real magic shows when they work together.

Our designer already has some ideas how the application should look and begins by laying out the application window and UI elements in Expression Design. Expression Design offers a comprehensive set of vector tools and import filters for all major bitmap and graphics formats so a designer does not need to abandon much-loved tools or re-learn already gained knowledge. Expression Design allows the designer to collect all the individual graphic elements for the user interface and then bring them together before exporting the result to XAML - a human-readable, XML-derived markup language that contains a textual description of each and every UI element in our application. XAML can be shuttled back and forth and shared between designer and developer and the tools they use. Not unlike CSS, XAML is easy to learn but can be hard to master � that is why a robust, visual designer toolset is so important. Finally, XAML lies at the heart of both WPF desktop applications and Silverlight web applications, allowing for easy re-use of designer/developer skills and sharing of assets and code.

Here is what our application UI looks like after the designer has finished working creative magic ...

Now it's your turn! You can use the trial versions of Expression Studio to follow along the exercises. Download them here. The finished application source code can be downloaded here. The assets for building the application (images, artwork, data files) can be downloaded here.

Exercise 1 - Creating and exporting artwork from Expression Design

  1. Select Start | All Programs, Microsoft Expression | Microsoft Expression Design.
  2. From the main menu, select File | Open ...
  3. Navigate to the ASSETS folder that you have downloaded and open the APP_LAYOUT.design file.

    This is a simple application layout that you should use for following the tutorials in this article series but you can also create your own design!

  4. Explore the design.

    Note the 2 layers and the UI elements inside each layer. Also note how this layout is a combination of bitmap images and vector art elements. You can modify all elements, give them different colors or select different fonts. You can also add new elements using the tools palette on the left side.

  5. From the main menu, select File | Export ...
  6. In the Export Properties window, select XAML WPF Canvas in the format drop-down menu.
  7. Tick both checkboxes.
  8. Select Editable Textblock and Rasterize all.


  9. Check if the Export name is APP_LAYOUT.XAML and the target directory (Desktop).
  10. Minimize Expression Design and look at your desktop. Right-click the exported app_layout.xaml file and select Open With | Notepad from the context menu.

    Note how all bitmap images referenced inside the code are also exported - after exporting as XAML, the APP_LAYOUT_Files folder contains the background image, the statue image and the rasterized drop shadow image. Take a look at the XAML code and note how easy it is to identify the individual UI elements.

Exercise 2 - Setting Up the Project in Expression Blend

  1. Select Start | All Programs, Microsoft Expression | Microsoft Expression Blend.

    You can either use Expression Blend 2 or one of the Expression 2.5. Preview editions.

  2. From the main menu, select File | New Project ...
  3. In the Create New Project dialog, select WPF Application, change the Name to ArtViewer and click OK.

    You can put the project folder on your desktop for easier access. Just be sure to remember the location for later!

  4. In the top right corner of Expression Blend, locate the Project panel.
  5. In the Project panel, find the Files panel and right-click the ArtViewer project node.
  6. Select Add Existing Item ... from the context menu.
  7. In the Add Existing Item dialog, navigate to the ASSETS folder.
  8. Select the following files in the folder and press Open to add them to the project:
    • catalogdata.xml is an XML file that contains test data.
    • APP_LAYOUT.xaml is the exported design file that contains our UI design.
    • Buttons.xaml which contains XAML code for close and drag buttons which we will add later.

    Note how any files referenced inside XAML code are also imported - the APP-LAYOUT_Files folder contains the background image and the drop shadow image that we imported in Expression Design earlier.

  9. In the Files panel, right-click the ArtViewer project node.
  10. Select New Folder from the context menu to create a new folder.
  11. Click once on the New Folder1 folder. After a short pause, the folder name will become editable.
  12. Change the name to images and press Enter.

    This folder will contain the bitmap images of individual art pieces referenced inside the catalogdata.xml file.

  13. Right-click the images folder and select Add Existing Item from the context menu.
  14. In the Add Existing Item dialog, navigate to the ASSETS\images folder.
  15. Select all files in the folder and press Open to add them to the project.
  16. Click on the white triangle next to the images folder to collapse it in the view. You may expand and collapse folders as needed throughout this lab.
  17. The project should now look similar to this screenshot.
  18. Right-Click on the topmost node in the Files tab (named Solution ArtViewer) and select Edit in Visual Studio from the context menu.
  19. Close Visual Studio and switch back to Expression Blend.
  20. Press F5 to test your application.

    Note the empty window of your application with the standard windows buttons. We will first modify this look.

Exercise 3 - Customizing the Application Window

  1. On the lower left side of Expression Blend, locate the Objects and Timeline panel.
  2. Click once on the Window node to select it.
  3. In the top right section of Expression Blend, click on the Properties tab to select it.
  4. In the Layout panel, change the Width property to 800 and the Height property to 600.
  5. Still in the Layout panel, change the Background to transparent by clicking the NoBrush button on the color palette.
  6. In the Appearance panel, tick the AllowTransparency box.
  7. Click on the Project tab to open it.
  8. Double-click on the APP_LAYOUT.XAML file to open it.
  9. In the Objects and Timeline panel, right-click on the Background group and select Copy from the context menu to copy it.
  10. Switch back to Window1.xaml using the breadcrumb navigation at the top of the artboard window.
  11. Click anywhere on the artboard outside the application window to de-select any previously selected items and press CTRL-V to paste.

    Note how the complete background, including all the graphic elements appears on your artboard.

  12. Press F5 to test the application. It should look similar to the screenshot. Close the window with ALT-F4.

Easy so far, isn't it? Don't worry, it will continue like this! In the next article, we will work with XML data and modify the look and feel of our application even further. The concept of Data Templates is very important in both WPF and Silverlight applications and you can bet on it that every WPF application or Silverlight web site you encounter will use that concept.

So, stay tuned for more. In the meantime, you can reach me for questions or suggestions on my blog or at mkoster@microsoft.com. Thank you very much for your interest!

50 screencasts on Silverlight
If you need some material to start learning Silverlight 2, check out this set of 50 short screencasts delivered by Mike Taulty and Mike Ormond, two evangelists from the UK.
Download a free trial of Expression Studio 2
Download a trial of the new Expression Studio. New features in Blend 2: Silverlight support, vertex animations and an improved user interface with a new split design/XAML view. Expression Web 2: now with PHP support, Photoshop import functionality, improved web standards compliancy, and ASP.NET Ajax server control support and more.
Laguna Coupé with Silverlight and Deep Zoom
Enjoy a Silverlight & DeepZoom experience with the Laguna Coupé microsite, from Renault.

Popfly Game Creator
Maybe you already know Popfly, the platform for building gadgets, mashups and web pages all in a visual way without any coding. Now there is a new feature launched: check out Popfly Game Creator, and build your own game without writing any line of code. Have fun!
Microsoft