Product Reviews

Expression Blend is the central component of the new Expression Studio suite and of Microsoft's drive to become a major player in the world of design software. In particular, Expression Blend is targeted at the RIA space that Microsoft sees as the natural evolution of today's desktop applications, enabling them to offer a richer end-user experience and greater reach through increasingly internet-based delivery. It's new territory for Microsoft, but it brings the company head-to-head with software giant Adobe and the current market-defining RIA product, Flash.

Designing with XAML

To compete with Flash, Expression Blend needs to offer something special, and it does. XAML is a new markup language that may eventually approach the significance of that other markup language, HTML. While HTML is concerned with describing the semantic content of a web page, XAML goes far beyond it to describe the presentational surface of an application. This ties in directly to the new Windows Presentation Foundation (WPF) that underpins much of Microsoft's work on Vista and enables easy control of all those design-rich features that Flash pioneered (vectors, bitmaps, text, audio, video, interactivity, server-side integration and animation), and throws in a couple of brand-new capabilities (adaptive layouts and 3D) for good measure.

As a text-based XML language, XAML can be viewed and edited in Expression Blend's dedicated XAML view. However, Expression is a design tool and designers are generally uncomfortable with code, so such direct editing will be a relatively rare option, especially since any mistake means your entire application disappears from the Design view until it's fixed. Instead, designers will primarily take advantage of the hands-on toolset.

Bitmaps and vectors

Using the Rectangle, Ellipse, Line and Pen tools, you can quickly add core shapes and then control them using the main Properties panel running down the right of the screen. Formatting control is extensive, with the ability to apply solid, gradient and tiled brushes to fills, strokes and opacity masks. Other options include applying transforms such as rotations, and managing grouping, alignment, distribution and stacking order. You can also quickly add non-destructive blur, drop shadow, emboss, glow and bevel bitmap effects. For more advanced vector-based creativity, you can import or copy and paste XAML-based artwork from the Expression Design application.

To move beyond vectors to add external bitmaps, audio and video, you must first add the files to the Project panel and then insert them onto the artboard. All formats that are supported by Windows Media Player 10 can be imported, including all the main standards: JPEG, TIFF, PNG, MP3, WMA, WAV, AVI, MPEG and WMV. You can also add 3D models in the Wavefront OBJ format and then use the Camera Orbit tool to position and rotate them in 3D space. Similar 3D camera-based control is also offered for imported bitmaps. Most impressive visually is the ability to apply any existing elements as a brush, which is great for creating subtle shadow and reflection effects - just beware the coming invasion of 3D video projections.

Getting animated

All design elements can also be brought to life using timelines. To create an animation, simply add and name a new timeline, which automatically switches on timeline recording. You can then move the timeline playhead to a given time, change any properties to automatically create keyframes and then, optionally, right-click on the resulting animation bars to set a repeat count. This property-based keyframe approach to animation is far easier to set up and edit than Flash's awkward tween-based approach, but it isn't suited for frame-by-frame animations.

Laying it all out

Expression Blend is certainly graphically rich, but its real focus is on creating complex applications, and this is where the program's range of controls come into play. First up, there's the familiar collection of user interface controls such as buttons, checkboxes, combo boxes, sliders and so on. The great strength of these is that they're easily customisable. To begin with, you can change parameters such as fills, font, text and bitmap effect in the Properties panel. For absolute control over appearance, you can simply right-click and select the Edit Control Parts (Template) command and drill down to create an entirely new skin that can then be used as a shared resource elsewhere.

Expression Blend also offers a range of five dedicated controls - Canvas, Grid, Dock, Stack and Wrap - for managing the layout of your application. Each control is a container that can contain other nested controls, so you can quickly build up advanced layouts. Particularly impressive is the ability to control whether these layout controls should automatically resize horizontally or vertically (or not at all), so you can create interfaces that intelligently adapt depending on the screen space available to them. Equally important on this front is the fact that WPF applications created with Expression Blend are automatically DPI-aware, so higher-resolution screens offer higher-quality results rather than smaller.

Expression Blend's advanced text handling is also managed via dedicated controls, starting with the simple TextBlock and Label for fixed, author-defined text. More power is offered by the TextBox, which enables the end user to add text, and by the RichTextBox, which supports embedded formatting and images. Most powerful are the FlowDocument controls, which let you add typographically rich text and embedded graphics in multicolumn layouts, complete with scrolling or automatic page-based navigation. Again, these controls are adaptive so that, if you resize the window, the number of columns and size of images automatically

ADVERTISEMENT

change to accommodate.

Getting interactive

Of course, you'll need to have some text and images to display, and often you'll want this to be linked to a live source. Such data binding is child's play to set up in Expression Blend, so long as the data is in XML format. Simply add a new XML data source, such as an RSS feed's URL, to your project and you can then inspect its fields in the Data panel and drag-and-drop them onto the artboard or an existing control. Expression Blend automatically prompts with the most likely binding options, while, for maximum control, the Create Data Binding dialog lets you specify the target field, the direction of data flow, value conversion and so on. When binding arrays of data, the Create Data Template dialog automatically appears to let you specify how each field should be handled, treating names as text blocks, images as pictures and Booleans as checkboxes, where appropriate.

With its 2D and 3D graphics features, complex media handling, animation timelines, UI controls and data binding, all the design elements are in place - what's needed is a way to connect them with each other and with the end user. Such interactivity is possible thanks to a rich event model that covers everything from keyboard input and mouse actions, through to tooltip closing and control size changing. Using the Triggers panel, these events can be used to trigger property changes - for example, to create an instant rollover formatting effect - or to control timelines to produce static or animated effects.

Cracking the code

A great deal can be achieved in terms of content handling with triggers, creating a satisfying experience with no coding. But for rich programmatic interaction, someone's going to have to write some code. To do this, you first need to switch the Properties panel to Events mode and then type in a name for your event handler next to the appropriate event. If you use Visual Studio (the Standard version is bundled with Blend), this will open up your application's associated C# or VB file, with the event handler already set up for you. If you don't, the event handler is copied to the Clipboard ready to be pasted into your editor of choice.

This sounds slightly bizarre - Expression Blend's whole purpose is to create applications, but it has no built-in coding power, since all the logic is managed externally in "code-behind" files. In fact, it proves to be one of Expression Blend's greatest strengths. Since the presentation of the application and its logic are kept strictly separate, it enables developers to work on features in Visual Studio at the same time as the designers are working on presentation in Expression Studio. There's none of the usual roughing out of designs in Photoshop to be handed over to the programmer to see if and how these can best be implemented. Instead, both programmer and designer are full members of the development team, working on exactly the same live project. The result should be a massive boost to the workflow efficiency and design quality of the end results.

Mixed blessings

For existing development teams, the separation of presentation and logic is a radical and exciting breakthrough, but for the Flash designers Microsoft is hoping to attract it's a mixed blessing. Generally, these users don't have a programmer on hand, and most will have picked up ActionScript as they've gone along. For these occasional coders, the very words "Visual Studio" will strike a chill, which explains why Microsoft is playing down its importance and inclusion. Of course, for those willing to climb the C# learning curve, there are benefits in terms of industrial-strength debugging and end performance, but it's a major ask. Occasional coders should wait and see what version 2 brings in terms of simple, integrated coding. It's clear that the current bundling of Visual Studio Standard is a stop-gap measure.

Working with the web

Once both presentation and logic have been finalised, your project can be compiled to a WPF-based executable file that will run natively under Vista. Crucially, it will also run on the vast base of XP systems, as long as they have the .NET 3 runtime installed. This is great news for existing desktop developers, as it opens up a massive potential audience for the new breed of design-rich WPF application.But what about the promise of RIA? This web-based access is enabled by an entirely new form of deployment - the browser-hosted XBAP. Again, for current Windows desktop developers, this browser hosting is a major advance, since it means a single copy of the latest version of an RIA can instantly be deployed throughout an organisation and accessed from any supporting desktop or notebook.

However, XBAPs have two major limitations. First, each XBAP is a full-blown - although sandboxed - executable file that's overkill for most design needs. Second, XBAPs can only be accessed via IE6 or 7 running under Windows Vista or XP with the .NET 3 runtime installed and, while Firefox support is promised under Windows, there's no possibility of adding Mac or Linux support. These limitations go right against the page-based and cross-platform nature of the web and highlight the real strengths of Flash. The result is that, while XBAPs signal another breakthrough for desktop developers, they offer little for web designers.

The future

These are major drawbacks, but should prove temporary since, with the launch of Expression Studio, Microsoft also launched its Silverlight beta. Silverlight is a cut-down subset of XAML and .NET that will be viewable cross-platform and cross-browser, and can take on Flash head-to-head in terms of page-based deployment and universal access. The next version of Expression Blend - and Expression Web - will support Silverlight authoring and it's this release that existing web developers will want to weigh up.

The future certainly looks exciting, but this first release of Expression Blend already offers plenty of groundbreaking power. For current desktop application developers and designers, it's a great way of enhancing your workflow efficiency, your deployment options and, most importantly, the quality of your work. Perhaps most impressive of all, Expression Blend achieves all this while making the new RIA authoring process visual, simple, creatively satisfying and downright enjoyable.