Tom Arah looks at Microsoft’s upcoming Expression Studio and its underlying WPF and XAML-based strategy.

Key to understanding Microsoft's future plans is an appreciation of Windows Vista’s new presentation subsystem, Windows Presentation Foundation (WPF)...

This is a total rewrite and rethink of the operating system’s design duties offering resolution-independent, vector-based graphics and font handling, in-built multimedia support, native databinding, adaptive onscreen layouts, fixed print-based documents, animation, 3D, and so on. In short: whenever you want to move beyond the design limitations of today’s static HTML web pages, Microsoft wants you to turn to WPF. So how do you go about putting this design power to use?
Perhaps the most significant feature of WPF is its intrinsic and complete support for XAML (eXtensible Application Markup Language). XAML (pronounced zammel) lets the average designer take advantage of all WPF features through a comparatively straightforward markup language. Crucially XAML is declarative rather than procedural so that you only need to declare what you want to see – a title this big here, a user form here and so on – without worrying about how this will actually be achieved.

XAML is a markup language for describing WPF content

In this regard XAML is very like HTML whose declarative text markup is interpreted by the web browser. Look at a XAML file, for example and you will see a bunch of tags and attributes in angled brackets surrounding the actual textual content. In theory this means that you could write XAML code in a text editor but in practice that isn’t feasible – with dozens of tags and attributes, XAML is far more complicated than HTML and also far stricter and less forgiving – make an error and the whole project will fail.
To take advantage of WPF via XAML then you need dedicated tools. The potential here is enormous as XAML is an open standard so expect a flood of new authoring solutions to appear along with new XAML export capabilities for existing applications. In fact the first solutions are already out of the gate such as Mobiform’s Aurora XAML designer and Michael Swanson’s XAML exporter for Illustrator. Inevitably though Microsoft has a massive head start on third-party developers and a massive strength in terms of controlling where WPF and XAML go in the future and it is determined to press home its advantage. Alongside the launch of Vista and WPF then Microsoft is launching its new Expression suite of applications aimed directly at the designer.

First up is Microsoft’s Expression Web (formerly Expression Web Designer) which is built on Microsoft’s experience with the user-friendly but standards-unfriendly FrontPage. However, with a new focus on rigorous adherence to XHTML and CSS standards, Expression Web is intended to leapfrog Adobe Dreamweaver to seize the web developer high ground. As such, Expression Web’s interface and working approach is more reminiscent of a professional programming environment such as Visual Studio in which you drag controls from the main Toolbox onto the page layout and then control all attributes in the Tag Properties palette. This property setting approach is largely overkill for XHTML with its basic tags and attributes, but is well suited for CSS and comes into its own for dealing with Microsoft’s data-driven ASP.NET 2.0 controls.

Microsoft Expression Web is focused on authoring XHTML, CSS and ASP.NET 2.0 – at least for now

The Expression Web environment would also make a natural home for XAML editing, but XAML support is noticeable only by its absence (at least in the current beta). With a bit more thought though, this makes sense. The Web depends on cross-platform standards and there would be very little point producing a XAML page that would only be viewable on WPF-enabled systems unless these were near universal. It’s a useful reminder of the limits of Microsoft’s dominance and of the central importance of the humble but universal web page. The cross-platform XHTML/CSS standards will remain the main way of providing information over the internet for a while yet and, with Expression Web, Microsoft is determined to prove that it can support these crucial open standards.

The second of the new Expression applications is Microsoft Expression Graphic Designer (since renamed Expression Design). This will seem familiar to some users as it is a reworked version of Creature House’s longstanding artistic drawing package, Expression. What has always made Expression unique is its focus on vector-based brushes and this remains, but Microsoft has boosted the program’s bitmap credentials too. In fact in the original announcement hype, Expression Graphic Designer was called both a Photoshop and Illustrator killer! In fact the program’s ambitions are much more down-to-earth and realisable and it is best seen as a rival to Adobe Fireworks, creatively mixing vector and bitmaps to produce high-impact graphics and rollovers for use in the other Expression applications.
As such, images can be exported for use in Expression Web as JPEGs and GIFs complete with HTML table and Javascript rollover. Alternatively, you can export your image to XAML. At first it might seem strange outputting graphics to a text-based markup language, but in fact mark-up languages are very capable of handling vector graphics as SVG (Scalable Vector Graphic) has long shown. Moreover describing many simple graphics as vectors, especially typical flat or gradient filled navigational buttons, proves more efficient than using bitmap-based GIFs or JPEGs. XAML could function as a replacement for SVG then, especially as SVG’s ambition to become a universal standard has been thwarted by Microsoft’s refusal to natively support the format within Internet Explorer (IE) the market-defining browser. And surprise, surprise - although the soon-to-be-released IE7 still ignores SVG, it does support XAML. Simply double click on your exported Expression Graphic Designer XAML file and your image is interpreted and rendered within what will undoubtedly become the planet’s favourite browser.

Expression Graphic Designer can export its images to XAML

Again though we hit the same problem that we did with Expression Web – no-one is going to output web graphics and navigational devices as XAML if they can only be seen in some browsers – even if the one browser that does support it happens to be the most popular. On the Internet everyone has to play it safe and universal – that’s why SVG has never taken off and why those few technologies that have hit the necessary critical mass, namely Acrobat PDF, Flash SWF, Java and of course (X)HTML/CSS, are so fundamental and important. As such, while it’s handy to be able to view XAML images in IE7 just as you can view JPEGs, the main suggested use of Expression Graphic Designer’s XAML export is to provide an exchange format that can be loaded directly into the third of Microsoft’s new design applications, Expression Interactive Designer.

So far it might seem that XAML has been something of a damp squib – promising much but delivering comparatively little. However with the third Expression application, Microsoft Expression Interactive Designer (since renamed Expression Blend), XAML moves from occasional middleman to full centre stage. In fact Expression Interactive Designer is best seen as a dedicated XAML authoring package. Crucially though, from the designer’s perspective, this doesn’t means that you’re necessarily expected to get your hands dirty directly editing the code in Interactive Designer’s Code View. Instead, as with Expression Web, you can simply drag on preset controls such as text boxes and media holders from the Library and then set attributes in the Properties palette or, in the case of text and graphics, in dedicated formatting palettes.
So if you aren’t actually expected to touch the XAML directly why is it so important? The primary advantage is that by entirely separating the form of the resulting application from its function the designer can be fully incorporated into the development process rather than simply producing the initial graphical mock-ups. In particular the designer can control the end user experience throughout the project in Interactive Designer leaving the Visual Studio programmer to write the “code-behind” logic in any .NET supporting language which currently means VB.NET or the industrial strength C#. Both XAML interface and .NET logic can then be compiled together to produce the final EXE – the same process used to create Expression Interactive Designer itself.
XAML is the key to bringing designers into the heart of application development and so to enriching the end user experience. So just what creative power is put at their disposal? In short: all of the WPF capabilities that we looked at last month (remember that WPF was previously called Avalon and XAML originally stood for eXtensible Avalon Markup Language). In particular Expression Interactive Designer offers advanced design features such as embedded fonts, strong bitmap and vector graphic handling, in-built animation, extensive support for bandwidth-friendly audio and video, preset and themeable user interface controls and simple data-binding for managing live server-side content.

Interactive Designer is a rival to Flash Professional

This list might well seem familiar: it could be a description of the design capabilities in Adobe Flash Professional. Of course that’s not a coincidence as Microsoft has Flash very much in its sights (hence Interactive Designer’s original codename - Sparkle). Crucially, although Expression Interactive Designer allows designers to work hand-in-hand with programmers, this isn’t necessary. For relatively simple, Flash-style, content-focused applets, the average designer should be able to add the little logic necessary either as XAML Trigger properties (which act rather like Flash’s old TellTarget commands) or via VB.NET snippets just as they currently add ActionScript in Flash. The resulting application can then be output as a partial trust, sandboxed, SWF-style XBAP (XAML Browser Application) ready for web deployment.

And Expression Interactive Designer moves beyond Flash to offer the designer a number of compelling advantages thanks to its deep tie-in to WPF. In terms of typography, for example, a WPF application can take advantage of full OpenType support, professional text compositing and resolution-independent, subpixel vector rendering. In addition WPF supports more popular and more efficient audio and video formats than Flash. WPF also supports 3D for handling effects such as spinning logos and video projections to really make projects stand out, along with the in-built support for hardware acceleration necessary to ensure smooth playback. Most impressive of all, to my mind at least, is the support for adaptive layouts in which text and graphics can be automatically presented in paginated form across increasing numbers of columns as the width of the application window increases – so ensuring optimum line length and readability.
But hang on – haven’t we forgotten something? Surely we hit exactly the same problem that we did earlier when we saw why Expression Web wasn’t intended for XAML output? Even if the XBAP is technically superior and provides a better end user experience, comparatively few designers are going to choose to produce a web application which can only be seen on Windows Vista WPF-based systems running IE7 rather than a SWF which can be seen, via the Flash player, on any Windows, Mac or Linux browser and, via Flash Lite, on an increasing number of non-desktop devices. While Vista is the future of Windows and Windows is the most important web platform, the web is larger still – and with ever-increasing internet access via handhelds and set-top boxes, Windows’ central desktop role is actually set to diminish.
Ultimately then, while maximizing the end user experience is the designer’s main job, maximizing the audience is even more important. It’s something that Microsoft is very much aware of – which is why, although WPF is integral to Windows Vista it isn’t actually tied to it. In particular WPF is not just part of Vista but is going to be included as part of the next .NET Framework 3.0 runtime. Crucially this means that the vast Windows XP (SP2) userbase will be able to update their systems to run WPF desktop EXEs. This massively increases the potential reach of WPF applications – but it’s also a crucial proof of concept. If .NET-based programming languages and XAML-based interfaces can be ported to an earlier version of the operating system, what’s to stop them being ported to other platforms entirely?
This is exactly what Microsoft is working on with its WPF Everywhere (WPF/E) initiative (since renamed to the slightly catchier Silverlight). This is a cross-platform project designed to provide support for both WPF and the .NET Common Language Runtime (CLR) as browser plug-ins. And in a surprising turn Microsoft is actively working not only to produce Opera and FireFox plug-ins under Windows but plug-ins for Safari and FireFox on the Mac while releasing source code to help third-parties on all platforms. In other words Microsoft is producing its own player for WPF content designed to become a new must-have download alongside the existing giants, Adobe Reader and Flash Player. In fact if Microsoft gets its way its player will actually replace Adobe’s as WPF/E will no doubt offer XPS fixed document viewing as well as rich, Flash-style design, media and interaction so making PDF and SWF redundant.

WPF/E takes XAML authoring beyond Windows and IE

Of course this is easier said than done. Adobe’s technologies and authoring tools have proved themselves and are well-entrenched while no-one has yet seen WPF/E in serious action and its player penetration will be starting from zero. Most importantly, Microsoft can’t simply provide every WPF and .NET feature for cross-platform playback – the player would be enormous and no-one would download it. Instead Microsoft is aiming at shoe-horning as much functionality as it can into a 2MB player which inevitably means dropping many of those features, such as 3D and adaptive layouts, which would have enabled WPF/E to stand out against Flash. Moreover, by the time WPF/E is delivered some time next year, Adobe will almost certainly have released another more powerful version of Flash as well as its Apollo runtime which is designed to make it possible to easily merge PDF, SWF and HTML content and to run content offline and from the desktop as well as online in the browser.
Microsoft clearly has a lot to do - but I still can’t see how it can fail when it comes to developers. Thanks to the richer design possibilities and the greater productivity and flexibility that the separation of XAML form and .NET function offers, the natural evolution towards WPF development will undoubtedly be attractive to those professional programmers already using Visual Studio to produce their desktop applications. Especially as it’s possible for these developers to leverage their existing work by putting a new XAML interface on top of their existing code. Even better, thanks to WPF/E it becomes possible to use the same tools to target development for other platforms. In fact, as WPF/E will also be provided as cross-platform runtime libraries that can be bundled with an application, it will also be possible to natively host WPF applications on platforms other than Windows – C# programming for the Mac. Put it all together and XAML-based authoring represents a massive advance enabling programmers to efficiently produce industrial-strength, design-rich applications ready for deployment not just to Windows but to all desktop platforms and to the universal browser-based web.

XAML-based authoring offers flexible deployment

But what about the designer? Here the central focus is on universality and so web deployment. Although Microsoft has to start from scratch, between Vista, .NET 3.0 and IE7 it’s clear that WPF capabilities will soon become near-universal in the Windows community. Even more significant is WPF/E which enables WPF, XAML and .NET to move beyond the Windows desktop onto other platforms and devices. Outside the Windows world Microsoft is generally viewed with suspicion, but again it’s hard to see WPF/E failing if a simple 2MB download will open up access to a whole new world of web content – especially if it also lets users view Office content and XPS fixed documents. And of course the wider the WPF/E player spreads, the more content is produced for it, producing a virtuous circle that eventually results in critical mass when the onus moves on to the end user to make sure that the player is installed.
And critical mass could trigger something very interesting. If the designer can take it as read that the end user has WPF/E capabilities then they could also assume that XAML code itself can be interpreted and rendered just as IE7 does already. That would make it feasible to use those SVG-style XAML graphics and rollovers produced with Expression Graphic Designer natively within web pages produced with Expression Web. More importantly Expression Web would be able to output the hosting web page itself as XAML. That would open up a whole new world of web design possibilities with dynamic animation and multimedia and typographically rich, embedded fonts displayed on high resolution screens and presented in fully scalable, accessible, onscreen layouts that automatically adapt to the screen real estate available to them.
It would also make full sense of Microsoft’s design-led XAML strategy. In particular it would make full sense and full use of a mark-up language that it should not only be compiled (together with .NET logic) to produce standalone desktop applications and browser-hosted applets, but also be interpreted directly (or more probably just-in-time compiled) to produce web graphics and web pages on-the-fly. It would also make full sense of Microsoft’s Expression suite if it turned out that Graphic Designer, Web and Interactive Designer were all ultimately best seen as XAML editors, each with its own focus on XAML images, XAML pages and XAML applications.
It would also be a stunning achievement. With XAML, Microsoft could come to rival or even replace all three of today’s main electronic design media: PDF, SWF and, astonishingly, even HTML - and you can throw in CSS, SVG and even Java for good measure! The result would be a single presentation-led markup language for designer and developer, document and application, print and screen, desktop and browser and Windows and beyond.

PostScript: XAML provides a modern XML-based markup language for describing and creating design-focused applications – but it’s not unique. In fact Adobe has something very similar in the form of MML (Macromedia Markup Language). This is going to be a major battleground for the future.