Tom Arah explains why the new Windows Presentation Foundation in Windows Vista is set to revolutionize computer-based design.

Recently I’ve looked at the history of computer-based design for both print and screen. It’s been a strange story with many twists and turns...

resulting in today’s current state of play in which Adobe, which effectively started the whole ball rolling back in 1985 with its invention of the PostScript PDL (page description language), has come to totally dominate. In particular, through its recent takeover of Macromedia, Adobe is now in the position to merge today’s three most important electronic design media – Acrobat PDF, Flash SWF and Web HTML - to create its new “Apollo” platform (since renamed to AIR the Adobe Integrated Runtime). This “Adobe Engagement Platform” promises the best of all worlds – highly designed documents, dynamic multimedia, rich interaction, advanced programmability and live content – provided through both browser-hosted internet applications and local desktop programs.

In Adobe’s Engagement Platform the future of design is a cross between interactive desktop application, live web site and rich document

With its current combination of underlying technologies and best-of-breed authoring applications it might look as if Adobe’s position is unassailable and that the company will single-handedly determine the future of cross-platform and cross-media design. However there is one other software giant with the developers, resources, vision and sheer market clout to take on Adobe on its own territory - and that is precisely what Microsoft is planning to do with the long anticipated and much delayed launch of Windows Vista.
What makes Vista so significant for designers is its next-generation screen and print display subsystem, Windows Presentation Foundation (WPF) previously known as Avalon. Whereas Windows XP’s GDI+ simply extended Windows’ longstanding GDI (Graphics Device Interface), WPF represents a total rethink and rewrite with a new focus on design in the round rather than just graphics handling. As such it introduces a whole host of crucial advances such as the core re-routing of all presentation tasks through DirectX to offload processing onto the graphics card and away from the CPU wherever possible.
The biggest change in WPF is even more fundamental, as Microsoft at last provides true vector-based screen rendering – just as Adobe attempted to provide with Display PostScript over 20 years ago. The resulting resolution and device independence finally enables WPF to offer true “DPI scaling” which means that as screen pixel density increases, vector icons and graphics and, crucially, text will all improve in quality rather than shrinking in size as is the case currently. This is hugely important as it will enable a designer to specify a particular size safe in the knowledge that that is what the end user will actually see. Or rather that this optimal version is what they will see when viewing at 100% and with the correct DPI setting, as the end user will always be able to override these settings for their own viewing comfort – a factor that is crucial for ensuring in-built accessibility.

More importantly, with modern technology capable of producing screens with over 200 ppi (pixels per inch), resolutions are rising to the stage where designers can move beyond those few dedicated fonts optimized for very low resolution 72dpi and 96dpi display. Particularly significant here is the fact that WPF not only supports in-built anti-aliasing - the grayscaling of glyph edges which dramatically improves their perceived quality and apparent resolution - but Microsoft’s proprietary screen rendering technology, ClearType. With ClearType it’s not just the luminance of each glyph’s edge pixels that is varied to produce smoother results, but the luminance of the individual red, green and blue phosphors that make up each pixel. The result of this sub-pixel rendering is smoother text and more precise onscreen positioning and line composition.

WPF features such as dpi-aware vector rendering and ClearType support will take onscreen typography to a new level

In short, WPF should finally provide the platform to enable onscreen design to move beyond today’s lowest common denominator, spidery screen fonts – the hegemony of Times and Helvetica may finally be drawing to a close. But for this to happen and for designers to turn to richer, more appropriate alternatives they need to know that the end user will actually be able to see the font as specified. Currently that’s just not possible as, to see a particular font, all end users would need to have it independently installed. With WPF however, the designer can simply embed any typeface for immediate free use anywhere within their application.
WPF not only provides rich typographic foundations, it builds on them. This will be apparent from the extensive support for advanced OpenType font features including extended character sets, ligatures, swashes, small caps, fractions and so on. WPF also provides support for advanced typographic text composition. In particular automatic hyphenation capabilities are built in to WPF along with compositional intelligence that looks at line endings throughout each paragraph to ensure that the use of hyphenation and glyph spacing is optimal - a factor that is crucial to readability. Previously such capabilities were the preserve of professional DTP software – now they will be automatically provided to the most humble WPF application and with no programming effort.
With vector-based, sub-pixel rendering and advanced text handling the increasingly high-resolution screen should at last become a typographically rich medium fit to play its role as the electronic paper of the future. But WPF also recognizes that the screen is an entirely different medium to paper with its own demands and possibilities. To begin with, unlike inherently static print, onscreen design can be dynamic.

To bring its applications to life, WPF provides real-time, animation of properties such as position, size, colour and opacity right down to the individual glyph level. Significantly this animation is time-based rather than frame-based as it is in Flash. This makes the entire animation process much simpler to set up, control and later edit (though it does remove some flexibility). It also frees the animator from always catering to the lowest common denominator as the length of the animation is no longer dependent on the processor, with faster systems capable of providing smoother results.
Of course it’s not just text that is supported. WPF extends GDI+’s existing support for bitmap images from the obvious standards, such as BMP, JPEG and GIF, to include Microsoft’s impressive new multi-purpose WMPhoto specification (see RW144). In addition WPF provides its Windows Imaging Component (WIC), a dedicated API (Application Programming Interface) to enable third-party developers to write and add their own custom codecs in the same way. Once installed, each new codec immediately becomes available to all applications for reading and saving and also for conversion – particularly useful for handling new camera raw formats. WIC can also be used to add proprietary metadata to image files which ensures that the metadata never gets lost or separated.
It’s not just bitmaps - as you’d expect bearing in mind its new rendering engine, WPF’s vector graphic support is seriously enhanced. In fact it’s a total overhaul starting with support for shape primitives such as rectangles, ellipses and polygons and the ability to create your own geometries which are then handled just as efficiently. This same declare-once, use-many times approach is extended to formatting through the concept of “brushes” which are applied to geometries as fills and strokes. Each brush can be a solid colour, a linear or radial gradient (with multiple stops) or a vector drawing or a bitmap (these can be tiled or stretched as desirable) and each of these options can also be used as an opacity mask to offer fine control over transparency. In addition WPF provides in-built rotate, scale, skew, translate and customizable matrix transforms.
Crucially WPF also moves beyond the traditional GDI territory of static bitmap and vector images to provide full multimedia support to really bring applications alive. In particular WPF now supports both audio and video. At the moment just which codecs will be supported on release is unclear and sadly there’s no WIC-style extensibility for third-party formats to ensure maximum choice, efficiency and future proofing. However, Microsoft’s own popular and bandwidth-friendly WMA and WMV formats are certainly supported making it at as simple to add a soundtrack or video to a WPF project as it is to add a static image.

WPF doesn’t just bring audio and video into the mainstream, it does the same for 3D. The intention is to treat 3D as just a natural extension of 2D which, with WPF’s routing of graphical tasks through the Direct3D pipeline, is just what it becomes. As such, geometries, brushes and transforms are all supported in 3D with new concepts such as cameras, models, lights and materials grafted on top. For the insatiable demands of immersive gaming advanced Direct3D hardware support will still be desirable, but WPF’s in-built capabilities are sufficient for the important role of merging 2D and 3D content. This will be especially useful for adding spinning logos, rotatable ecommerce product displays and After Effects style 3D transitions between 2D content. No doubt this power will lead to horrible excesses – prepare for a blitz of spherical videos – but, when used sensibly, it can give a project real depth.

Native support for animation, audio, video and 3D will make WPF applications more engaging

Put WPF’s animation and advanced media support together and it’s clear that WPF design is not just typographically rich but fully dynamic. Just as important, and the other main difference between print and screen, is interactivity and end user engagement. This is where WPF’s extensive set of in-built user interface (UI) controls come into play. All the usual suspects are catered for with buttons, list boxes, combi boxes and so on, but these are just the start. In fact WPF provides dozens of in-built controls in total including menus, dockers, progress bars, resize grips and so on.
It’s not just the range of controls that is impressive, their handling is too. It’s possible to nest controls one within the other so that, for example, you can add buttons and list boxes within flowing text. The level of design control is especially advanced thanks to WPF’s rich typography, advanced formatting and effects. Moreover, as form and function are kept completely separate, it’s simple to create your own unique look while maintaining consistent and familiar operation while the use of design templates and styles makes it possible to take instant, centralized control over the entire look of a project
From the designer’s point of view, perhaps the most significant aspect of WPF’s new UI controls is that they can be adaptive. When applications are as likely to be accessed via handhelds as desktops, screen real estate varies widely and the application needs to take this into account. With WPF you can control whether controls and their contents resize horizontally, vertically, both or neither. Most impressive of all are the dedicated layout controls. Imagine designing a layout complete with flowing text and embedded graphics that can automatically switch between one, two, three or as many columns as needed depending on the width of screen on which it is viewed – and in real time if you resize the window! It’s not just addictive it’s absolutely fundamental to good design as line length is key to comfortable reading. And again WPF makes this extraordinary design power available to the humblest application with no programming effort required.

Adaptive layouts in WPF will make the most of screen real estate while ensuring good readability

WPF’s UI controls have another trick up their sleeve – simple data binding. Rather than having to hardwire all of a control’s properties in advance, databinding means that properties can be set at runtime. The most obvious use for this is to bind a text box’s content source to an XML (eXtensible Markup Language) file hosted on a server to ensure that the end user sees up-to-the-minute content. Thanks to data templates and styles it’s as simple to set up automatic rich formatting for the imported XML elements as it is to create the link in the first place. Databinding isn’t just useful for text – as all of a control’s properties can be databound, it’s just as straightforward to, say, drive a 3D bar chart using live share prices. Previously such advanced data driving was programmer-only territory, but WPF brings it into the orbit of the designer.

But how? It’s clear that WPF is an extremely strong design platform but how can the average designer put the power to use? In the past the only route to take advantage of the API in Windows GDI was to procedurally program your application from the ground up in a development environment such as Visual Studio. That’s still very much an option, with each WPF element mapped to its own class, but it’s hardly relevant to the average designer. For the full potential of WPF to be realized its power needs to be made much more accessible. As such the most significant introduction of all in WPF is the introduction of XAML (eXtensible Application Markup Language, previously eXtensible Avalon Markup Language).
As its name implies, XAML (pronounced “zammel”) is a markup language and, as such, it will immediately seem familiar to web designers based as it is on tags in angled brackets surrounding textual content. The difference is that rather than marking up semantic text content features as HTML does (headings, quotes and so on), XAML tags go much further, describing all the WPF elements (fonts, vector graphics, UI controls, animation and so on) that together produce the final output that is presented to the end user.
This declarative approach is far more intuitive and intelligible - in fact you could theoretically write the XAML describing your interface in a text editor such as Notepad just as you can produce web pages with HTML. However the real strength of XAML, and its separation of form and function, is unleashed with a dedicated wysiwyg editor – most obviously Microsoft’s own Expression Interactive Designer. This provides a truly wysiwyg, design-friendly environment in which you can drag and drop controls onto your layout, add vector elements, import images and other media files, format text and objects, set and databind properties, add animation timelines and so on, leaving the program to transparently build the necessary XAML code behind the scenes.

Expression Interactive Designer makes XAML-based application design a visual experience

Once the underlying presentational framework of your end user interface is ready you can then add any logic required with VB.NET or C#. If you’re producing a complex desktop application this will be a major job best handed over to full-time programmers, but for simple, content-oriented applications designers can add the necessary snippets of code themselves just as they currently add ActionScript to Flash projects. Once the presentation and logic are both completed they are ready to be compiled together with the author free to choose between producing either a full trust standalone desktop EXE or a partial trust, web-hosted Flash-style XAML Browser Application (XBAP).
XAML has another very important role to play. So far I’ve been talking about screen output but WPF is also responsible for print presentation and again this has been rewritten from the ground up. As such the native format for Vista’s new print stream and print spooler is Microsoft’s new XPS (eXtensible Paper Specification) which is a PDL written in XML. In fact XPS turns out to be a subset of XAML which, with its tie-in to WPF, provides the format’s ability to handle images and, crucially, fonts.
The core difference to screen-oriented XAML is that, in XPS, text is described with the most granular Glyphs element which means that XPS describes a layout that is fixed. This fixed nature can be very useful in its own right and, with its Open Packaging Convention (OPC), Microsoft provides a mechanism (essentially zipping) to compress and wrap up the XPS and its resources and so to turn the print stream into a document format. By then making the ability to write to XPS available to any WPF application and providing a dedicated viewer complete with digital signature support, it means that XPS can move beyond print to be used for document exchange and archiving – with document annotation and review in the pipeline.

XPS adds advanced print control to WPF’s feature set

This is probably sounding very familiar - XPS is effectively acting as both PostScript PDL and PDF document exchange format. In fact the whole WPF/XAML project has been sounding strangely familiar throughout with its combination of PostScript/PDF-inspired high quality typography, Flash-inspired animation, media handling, programmability and UI-based controls and HTML-inspired server-side integration. Put it all together and WPF becomes a platform that promises the best of all worlds – highly designed documents, dynamic multimedia, rich interaction, advanced programmability and live content – provided through both browser-hosted internet applications and local desktop programs. Which is exactly how I described Adobe’s vision for “Apollo” at the start of this article.
Typical - you wait over twenty years for an integrated screen and print design platform to come along and then two do at once! Of course that’s no coincidence. Macromedia clearly recognized that its best hope of defence lay in attack and so combined forces with Adobe to create the strongest possible universal design solution. The resulting Adobe Engagement platform will be able to call on a huge army of developers, an impressive armoury of tools and decades of practical experience out in the field – and it’s important to remember that the arrival of WPF presents a massive opportunity for Adobe as well as a threat. Against this WPF/XAML is a next-generation, across-the-board solution, written from the ground up to take full advantage both of current hardware and of the lessons learned from personal computing’s growing pains – and history has shown that it’s rarely sensible to bet against Microsoft.
One thing’s for sure: 2007 is going to be a significant year for computer-based design and an exciting one for designers.

PostScript: WPF was developed for the next-generation Windows Vista but Microsoft’s ambitions for its design platform are much wider. To begin with, WPF will be part of the upcoming Microsoft .NET 3.0 Framework accessible to the vast existing XP userbase. Even more significant is Microsoft’s Windows Presentation Foundation Everywhere (WPF/E) initiative which sees a subset of WPF, XAML and .NET 3.0 functionality made available through browser plug-ins and native hosting. In short, Windows Vista is going cross-platform.