Our Blog

where we write about the things we love



WPF and Silverlight: not just eye candy

In my earlier days of programming when learning the C language, I came across the following quote, which captures the appeal of software development for me: "Look at your computer screen. Imagine something happening there. Anything. As long as you know how to program a computer, what you imagine will take place." - Dan Gookin

As software has evolved over the years, so has its interface. We've gone from monochrome text to graphical user interfaces, and also introduced plenty more colours (up to 16,777,216 to be precise). Along the way, our software has gradually become more pleasing to look at, which has translated into a more positive user experience - a phenomenon known as the Aesthetic-Usability Effect, which has been observed through a number of studies such as this one. This evolution took another step in 2006 when Microsoft introduced Windows Presentation Foundation (WPF), a relatively new UI framework that changes the way of doing things.

Prior to that, desktop applications typically looked rather plain, aptly described by some as 'battleship grey':

In the .NET world, the underlying technology is known as WinForms. Since WPF, it is now easier to present a more vibrant user interface:

So what does WPF have to offer, and how can businesses justify investing in it?

In short: flexibility.

Flexibility is a good thing. You may want the interface to be flexible enough to apply corporate branding - not just colours, but shapes and textures. This is the most obvious, since applications do not have to be battleship grey, though WPF doesn't force you to abandon battleship grey completely either. Here are a few other areas where WPF offers greater flexibility:

  • Flexible layout. In the WinForms example, can the user resize the window? If so, what would a larger window look like? Chances are, the layout would be quite inflexible unless the developers implemented a complex solution to arrange the elements appropriately. WPF offers a number of layout panels to do this automatically depending on how they are configured; there's also the option to define custom panels. What this allows is an interface that can display its content effectively regardless of how big the window is, and that translates to greater usability. No longer should users be forced to work with text in a tiny text box in a similar manner to viewing the world through a cardboard tube.
  • Flexible input/output. Typically in a well-architected WinForms application, developers would have to maintain routines that copy data from the form controls to the underlying domain entities before performing some processing operation, and vice-versa when an operation completes. WPF allows the use of 'data binding', where the interface is automatically updated to changes in the entities and vice-versa when changing values on-screen. Apart from potential cost-savings, this reduces the risk of defects from inconsistencies in synchronising data.
  • Flexible controls. WPF provides a separation between how a control looks and how it behaves. Styling aside, this means that I can completely rearrange the components of a control and still use the same behaviour. This can be very useful for optimising the layout of elements in the window, for example causing items in a list to be displayed in a tiled grid instead of a straight vertical list - thereby reducing the need to scroll.
  • Flexibility to work with existing applications. WPF is an interface technology, in the same way that WinForms is an interface technology. That means WPF applications can use the same business logic and other back-end functionality as WinForms applications (assuming this logic has been well-architected to remain separate from the user interface), so the critical implementation doesn't need to be discarded. There is also support for integrating legacy WinForms components in WPF applications, and support for integrating WPF components into WinForms applications.

Since 2006, WPF's web equivalent, Silverlight, has seen steady progress in technical capability and popularity. It shares similar advantages with WPF:

  • Flexible layout
  • Flexible input/output (data binding)
  • Flexible controls (separation of appearance from behaviour)
  • Flexibility to interact with the rest of the page - both HTML content and JavaScript
  • Flexible styling

The major difference, being web-based, is that it competes with reasonably competent technologies for implementing visual designs – HTML and CSS, with a bit of JavaScript (let alone jQuery) on the side for that interactive factor. Although these technologies weren’t designed specifically for web applications with a complex visual design, visual design alone is no justification for using Silverlight.

Eye candy alone does not enhance a user’s experience.

Where Silverlight really helps is in creating interactive web applications that help site visitors to achieve what they want more effectively, which translates into a more positive user experience. Here are a few examples how:

  • The entire application can be contained on one page, so round-trips to the server (and associated delays / page refreshes) are minimised. This also allows navigation through the application without disrupting the navigation of the rest of the site, particularly page entries in the browser’s Back button history.
  • More processing can be done in the visitor’s browser, relieving the load on the server and demanding less communication across the network. For the visitor, that means having a snappy interface that gets results faster.
  • Visitors can see more, and more clearly from Silverlight’s layout capabilities and ability to scale content appropriately. Variable content is therefore less likely to ‘break’ the layout of the page.
  • Complex interactions can be defined more easily and consistently, enabling less reliance on scripting (which can be error-prone, and has other issues in terms of cross-browser compatibility). Instead of having to perform many button clicks to arrange items in a list, visitors can drag the items directly, for example.

Yes, it is possible to achieve similar results with other technologies; after all, WPF is built on the same GDI foundation as WinForms, for instance. However both WPF and Silverlight add such a level of abstraction that makes it easier to create an interface with truly helpful features for your end users. By common sense, if it’s easier to do it, more people will do it.

Look at your computer screen. Imagine something happening there. With WPF and Silverlight in your toolbox, it is now easier for what you imagine to take place.

Posted by: Daniel McGaughran, Developer | 06 April 2010

Tags: Silverlight, WPF, Software Development

Blog archive

Stay up to date with all insights from the Intergen blog