Importing Graphic Assets into a Project
Support for designers in the Expression Studio does not end with Expression Blend, however. Very few web applications consist of nothing more than a combination of text and some form controls. To the contrary, almost every web application will require copious quantities of images, some vector and some bitmap. While the Expression Studio does include a vector graphics application (Expression Design) which a designer can use to create two-dimensional graphics from scratch, Photoshop and Illustrator still hold a commanding percentage of the image creation market share. Acknowledging the likely ongoing popularity of Photoshop and Illustrator, Microsoft has created a pathway to facilitate the use of Photoshop and Illustrator graphics in Silverlight and WPF.

In addition to Microsoft efforts in this respect, there is an interesting community supported tool for converting Illustrator vector art into XAML for use in a Silverlight or WPF project namely a XAML exporter created by Mike Swanson. This exporter is a standard plugin for Illustrator and can be obtained as a free download from Mike Swanson's website. I have used this exporter on numerous occasions in the past but to test it out for purposes of this article I selected one of the sample graphics that comes with Illustrator (Ruffmouse.ai). The following screenshots show what this image looked like in Illustrator, in Expression Blend after the conversion to XAML and in a running Silverlight application.

Figure 1. Ruffmouse Screenshot using Adobe Illustrator.

Figure 2. Ruffmouse Screenshot using Expression Blend after Using the Mike Swanson XAML Exporter.

The Microsoft supported way to convert an Illustrator .AI file into a XAML file is to open the file directly in Expression Design and then export it to XAML. Unfortunately, Expression Design could not handle the background of the Ruffmouse image, so care must be used when following this method.

Figure 3. Ruffmouse Screenshot using a Running Silverlight Application (Internet Explorer®).

Figure 4. Screenshot of Ruffmouse Image Opened in Expression Design.

Problems of this type are obviously image specific, as the Bedlam Ballroom Illustrator sample file converted nicely in Expression Design, as the following two screenshots show.

Figure 5. Screenshot of Bedlam Ballroom Image using Adobe Illustrator.

Figure 6. Screenshot of Bedlam Ballroom Image Opened in Expression Design.

Also, problems of this type would not occur for vector images created directly in Expression Design and then exported to XAML.

Once the image has been included into the project UI, a developer can add functionality through event handlers as this simple example illustrates. Animated Ruffmouse.

Expression Support for Bitmap Images
Another feature improvement in the Expression Studio which is intended to facilitate designers who choose to continue using Adobe products is the ability of Expression Web to directly convert .PSD files into .GIF, .JPG or .PNG formats. The following dialog box illustrates how EW2 permits a designer to choose which layers from the .PSD file to include in the new image file as well as various other optimizations.

Figure 7. Expression Web 2 Has a Built-in Capability to Convert .PSD Files into .GIF, .JPG or .PNG Files.

Even more interesting is that if the original .PSD file is modified, it is possible to pick up these changes simply by right clicking on the image and selecting the "Update from Source" entry on the context menu in Expression Web.

Figure 8. Screenshot Illustrating How to Update an Image that Has Been Modified in Photoshop.