Expression Blend 1 review

Filed under:

Expression Blend opens up a whole new world of rich application design

VERDICT: Radical improvement of the production workflow for desktop application development - and of the results that can be achieved.

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 Rich Internet Application (RIA) space that Microsoft sees as the natural evolution of today’s desktop applications enabling them to offer greater richness in terms of 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 another software giant, Adobe, and the current market-defining RIA solution, Flash.
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 and ubiquity 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 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.

Expression Blend’s power is built on XAML code...
Expression Blend’s power is built on XAML code...

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 as any mistake means that your entire application disappears from the Design view until it is fixed. Instead designers will primarily take advantage of the hands-on toolset. So just what power is on offer?

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 simply copy and paste, XAML-based artwork from Expression Design (see separate review).

… but it provides a design rich environment for producing design rich applications
… but it provides a design rich environment for producing design rich applications

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 the model in 3D space. Similar 3D camera-based control is also offered for imported bitmaps. Visually most impressive is the ability to apply any existing elements as a brush which is great for creating subtle shadow and reflection effects – but beware the coming invasion of 3D video projections.
All design elements can also be brought to life using timelines. To create an animation you 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.
Expression Blend is certainly graphically rich, but its real focus is on creating rich applications and this is where the program’s wide range of controls come into play. First up here is the familiar collection of user interface (UI) controls such as buttons, check boxes, combo boxes, sliders and so on. The great strength of these is that they are easily and completely customisable. To begin with, you can quickly 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.

Advanced features include 3D handling, timeline animation and XML databinding
Advanced features include 3D handling, timeline animation and XML databinding

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 which 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 that you can create interfaces that intelligently adapt depending on the screen real estate 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 multi-column 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 changes to accommodate – truly amazing.
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 a 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, Booleans as checkboxes and so on.
With its 2D and 3D graphics, advanced media handling, animation timelines, UI controls and data binding all the design elements are in place – what’s needed now 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 through 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.

A great deal can be achieved in terms of content handling and rich end user experience with absolutely no coding thanks to triggers, but for rich programmatic interaction there’s no avoiding it, someone is 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 (a copy of the Standard version for standalone users worth $295 is bundled with Blend) this will then open up your application’s associated .cs or .vb file depending on whether you are targeting C# or VB.NET, 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.

A bundled copy of Visual Studio 2005 Standard takes care of logic programming
A bundled copy of Visual Studio 2005 Standard takes care of logic programming

This is slightly bizarre – Expression Blend’s whole purpose is to create applications but it has no in-built coding power itself with all logic managed externally in “code-behind” files. In fact this proves to be one of Expression Blend’s greatest strengths. Because the presentation of the application and its logic are kept strictly separate, it enables developers to work on functionality 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 hand-in-hand on exactly the same live project. The result is a massive boost both to workflow efficiency and the design quality of the end results.
For existing development teams the separation of presentation and logic in Expression Blend is a radical and exciting breakthrough – but for the current Flash designers that Microsoft is hoping to attract it’s a mixed blessing. These generally standalone users don’t have a programmer on hand and most will have picked up the ActionScript that they’ve needed 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 clear benefits in terms of industrial-strength debugging and end performance – but it’s a major ask. Occasional coders are probably best advised to see what version 2.0 brings in terms of simple, integrated coding as it’s fairly clear that the current bundling of Visual Studio Standard is a temporary stop-gap measure.

Once both presentation and logic have been finalized, your project can be compiled to a WPF-based desktop EXE that will run natively under Vista. Crucially, it will also run on the vast base of XP systems so long as they have the .NET 3.0 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 Rich Internet Applications? This web-based access is enabled by an entirely new form of deployment – the browser-hosted XBAP (XAML Browser Application). Again for current Windows desktop developers this browser hosting is a major advance as it means that a single copy of the latest version of a RIA can instantly be deployed throughout an organization and accessed from any supporting desktop or notebook.

The compiled result is a WPF-based design-rich EXE
The compiled result is a WPF-based design-rich EXE

However XBAPs have two fundamental limitations. Firstly, each XBAP is a full-blown - though sandboxed - EXE file which is overkill for most design needs where a lightweight and integrated extension to the hosting web page would make more sense. Secondly, XBAPs can only be accessed via IE 6 or 7 again running under Windows Vista or XP with the .NET 3.0 runtime installed and, while Windows’ Firefox support is promised, there is 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 with its lightweight web page integration and near-universal 98% player penetration. The result is that, while XBAPs signal another breakthrough for current desktop developers, they offer little for current web designers.
These are major drawbacks but should prove temporary as, with the launch of Expression Studio, Microsoft also launched its “Silverlight” beta. Silverlight is a cut-down subset of XAML and .NET functionality that will be viewable via cross-platform, cross-browser players and so 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 (they can get an early idea of what’s in store as an alpha CTP of Blend 2 is already available).
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 here is an excellent way of enhancing your workflow efficiency, your deployment options and, most importantly, the end quality of your work. Perhaps most impressive of all, Expression Blend manages to achieve all this while making the new RIA authoring process visual, simple, creatively satisfying and downright enjoyable.

EASE OF USE 6/6
FEATURES 5/6
VALUE FOR MONEY 5/6
OVERALL 5/6

Recommended Further Reading

Below is further reading on the subject, as recommended by amazon.com users.

Click here to find similar recommendations from amazon.co.uk

To search directly please use these links: amazon.com and amazon.co.uk



Filed under:

Tom ArahTom Arah is the webmaster of designer-info.com. He has been a professional designer working with computer software since 1987. He also offers training and consultancy and since 1997 has been the contributing editor covering design issues for PC Pro, the UK's biggest-selling (and best) computer monthly.

Home | Web Design | Publishing | Bitmap (Photo) | Vector Drawing | 3D
Site Info | Site Map | Search | Contact | Guestbook |

For older content (over 300 reviews and articles) please click here

To support the site please shop via these links: Amazon.com & Amazon.co.uk