Thoughts on WPF 4.0 from a novice

Anyone who still reminisce about Longhorn-era codenames will probably agree they are much better than their official counterparts. Not only did “Avalon” sound cool, it has a certain utopian ring to it. Now in it’s fourth revision, Windows Presentation Foundation 4.0 is pitched as the state-of-the-art framework for building graphically-rich desktop clients on Windows.

When I decided to build a modern Windows application kindled with animations, the choice to use either a nearly ten-years-old low-level graphics subsystem based on technologies dated even earlier, or an abstracted graphics framework that considers the expectation of user experiences in the current decade, was a no-brainer.

First and foremost, over just a couple of months, what we’ve achieved with MetroTwit was simple not possible without WPF considering the few precious midnight hours we put into it on most days. According to the rest of the team (the real developers), apparently I owe much to data-binding which I’ve been told is nothing short of a miracle.

Having said that, working with WPF has been somewhat of a rollercoaster ride. There is up – very high ups, but there is also down – pretty lows too.

I won’t bore you with all my gripes but I must say WPF can only be tamed with experience. Granted the MSDN documentation is required reading material and an exhaustive resource, I found only when I complimented it with others’ experiences on StackOverflow and the MSDN forums like study guides on SparkNotes I could then make sense of it all.

I constantly have the feeling there is a million different way to achieve the same effect in WPF and everything you do is wrong until it is proven otherwise. Flexibility is great but when a few thing work better one way over another, not because they are documented as such but because you find through experience, you begin to doubt everything else you do.

It must be said though WPF has come a long way in a relatively short period of time. What should be noted is that the significant drive behind its evolution appears to be when Microsoft decides to dogfood WPF. First it was the Expression suite of design applications (it still blows my mind they built the product using itself) and more recently with Visual Studio 2010. Hopefully this is a trend that will continue to deliver benefits to all WPF developers.

In the end, when rich and beautiful application have become the norm, I’m glad Windows Presentation Foundation is what it is today. Although it’s no stroll in the park, but at least it makes it not impossible.

52 insightful thoughts

  1. As a developer building a custom application for a touchscreen kiosk, I completely agree with the sentiment of this article. I especially thought “…everything you do is wrong until it is proven otherwise” is so true! This was last year, but I remember spending an entire weekend creating a “master page” template/pattern for our kiosk that needed to also have design-time support, i.e. designers could see what they were doing on the template itself. Rewarding, but exhausting.

  2. It would be great, when you find time, to do a detailed drill down into the problems you came across with WPF code, and how you sorted it. Perhaps even highlight the way you would have done something in GDI and WinForms etc.

    I know about 0.00001% of C#, and have barely scratched the surface of Expression Blend, so what you have achieved with MetroTwit is astounding to me. Most certainly not possible on WinForms, and the performance despite it being dot NET and WPF is amazing! Your UI observations of the Metro guidelines and the Zune app, really show.

  3. 100 ways to do anything and they start you off with a blank slate.

    MetroTwit is very well done, the problem I have is as a developer – what “look” do you target? Is it traditional menu/toolbar, or Ribbon (if you pick ribbon, is the the first office 2007 one, or the WPF one, or Office 2010 one?), or do you go Aero and use a bunch of glass like the new Firefox/Chrome, or do you go Metro, or do you go Windows Live and do some very bizzare mix of all of them?

    I love design, its what I live for. However, if you are building an App for windows at this point no matter what you do if a user has another application open at the same time chances are they will look out of place together. How about mobile? Do MS’s mobile offerings look like they came from the same company? If I put my WinMo phone next to windows will it jive? How about WP7? No, not at all.

    Starting most developers out with a blank screen is just a bad idea. I have dabbled with Apple’s interface designer and without even trying, I had an that looked like it belonged, while enforcing a programming mindset (MVC) at the same time. You almost have to stand back in awe. Anything they make, desktop, phone, tablet feels like it was made by one team. The apps made for them by others feel like they were made in house.

    I love the power of WPF, but it’s power without any sense direction. You are perfectly able to build an app similar how you would with WinForms, or you can use the MVVM approach, or you can use one of the many other approaches. You make a new app and its just a blank box. Its just a mess.

    1. I guess you’re unfamiliar with Microsoft’s “Metro” design language.

      In response to your primary point: you wouldn’t give Leonardo Da Vinci someone’s half-used canvas, would you.

    2. I am very familiar with it, my point is it is one of at least 5. Windows as it sits today has no single design language that people can grab onto and go. Under the hood they have no single blueprint on how you should develop your app.

      Apple has both. I can tell you how 99% of OSX and iOS are made. Apple is doing very well, literally back from the dead. They have developer mindshare right now as well. They have direction and vision. Granted – they have other issues, they always have, I am just saying in this part of “what it means to be a platform” they have it nailed.

      Respectfully, the Da Vinci reference is off-base. A desktop application should not be a standalone work of art. It needs to mesh with the chrome and base opperating system. People need to be able to use the knowledge they have using other programs to new ones. I love Metro, but it really clashes with Aero as a look. I would be fine if they said “OK, we are porting Office, Explorer, and IE, and VS to Metro”. But the are not. Its just one more idea that gets put on a shelf.

      Right now, I have IE, FireFox, Explorer, Office 2010, Visual Studio, SQL 2008 Studio, Zune, Photoshop, and Windows Messenger open. NONE OF THEM LOOK GOOD TOGETHER. On their own, fine, but we dont use one app at a time. This situation is really now just a windows problem. Take the those applications or their counterparts on OSX, they look like they all fit, the least of which happens to be the Office for mac!

      http://www.aerotaskforce.com/ this is an issue, the third highest item is the one I wrote.

    3. WIndows Live and Zune are coming together as is Windows Phone 7 – you can see that from the use of typohgraphy alone.

      You missed the point of the “Da Vinci” reference btw – the artist never really mattered.

      Windows and the applications that run on it share many common elements. I think for this discussion, style needs to be seperated from the essensce of the interface, what it is at it’s heart.

    4. I was chatting with one of the developers over at the Live blog about this issue. I asked him point blank why Live Wave 4 has some Metro elements, but didnt go all they way. His response was basically they are targeting Aero and Metro really hasn’t found its place yet in the desktop outside of heavy media apps. He was skeptical of actually using Metro in something like Office.

      Why should style be separated? Personally I think that is all that is left. The major platforms today have the bases covered. They all have a browser, a word processor, a concept of buttons, textboxes, dropdowns, pointers, taskmanagers, development tools/frameworks. At this point what is really left is style & taste.

    5. @Tommo: I guess you’re unfamiliar with Microsoft’s development tools, aren’t you. What RyanLM said was perfectly valid.

      Apple’s design tools for UIs, especially for iPhone, are idiot-proof. No matter how your drag the controls around, it will look right. All the buttons and title bars have regular sizes that ensure usability, and it’s hard to drag a button that deviates from norm. Unless the developer intentionally try to make a irregular control, there is no way you can make an ugly UI.

      Microsoft’s development tools, on the other hand, is the complete opposite. You can drag and position things virtually anywhere you want. The result? If the developer has no sense of design (i.e. if the developer is not Long Zheng), it will make something extremely incoherent.

      Adding to the problem RyanLM mentioned about Microsoft’s lack of direction in UI design, Windows is quite a mess to develop for in terms of UI. As the designer of one famous Windows product (Google my name), I’ve definitely been ‘tricked’ by this quite many times and tried to predict what would fit Windows in the coming years. It’s not until the recent 2 years Aero Glass finally rises up from the ashes of Fisherprice Windows XP, with the growing popularity of Windows 7 and Vista.

      Of course, combined with Adobe AIR apps such as Tweetdeck, the whole Windows desktop is a clusterfsck. And Windows Live and Zune aren’t looking like anything consistent either. Zune has not Aero frame while all WL apps has. Zune is beige and WL is white and blue while Media Center is all blue. There isn’t even consistency within Metro for Christ’s sake!

    6. @Pak I’m surprised you needed that many words. It’s a matter of perspective: Microsoft gives developers the opportunity to be really creative or innovative or both! While Apple seem to constrain them and baby them as they do with anyone using their products.

      Pixel perfectionists like myself would appreciate a selection of templates to retain consistency across things like dialog boxes but considering how easy it is to get up and coding, I’ll make do with what I have for the time being.

    7. @Tommo: The problem is that they give the wrong tool to the wrong people. Yes, if the whole Microsoft developer community are greater UI designers, hell yes, go for it. Freedom and creativity all the way. However, it’s not. There just aren’t enough pixel perfectionists like you in the platform to make sure things look great.

      Microsoft development tools is like giving you pieces of steel and expecting you to make a car out of it, while Apple tools is like giving you all the door, engine, and other assemble cars and expecting you to make a car out of it. Of course, creatives will complain about how they cant make a weird door using Apple tools, but at least these tools guarantees users usable cars in the end. Apple shows you what the finished cars will look like, and yes, they are boring, but it’s not as disorienting as Microsoft, which shows you a rocket, a bus and an upside down car. Meanwhile, in Microsoft’s camp, perhaps only those guys from American Chopper can bang something awesome out, while most of the rest looks like two wheels strutted to a piece of I-beam.

      Wow, I love making metaphors.

  4. As a designer, I can appreciate that there is something to be said for consistency and the “one size fits all” UI where everything fits together. However, it does depend on where you place Windows in your mindset. Apple’s OS is like a tall skyscraper, where everything inside it conforms making the building seem cohesive. However, Windows is like a country, with many different buildings, and it is those buildings which stand out uniquely, from each other, but all share similar identifyers like street signs and numbers on the front of the building.

    Office is one district, and everything in office belongs together.
    Media Centre, Zune, Windows, Windows Live, these are all districts or towns in the country.

    This analogy works when you compare Apple and Microsoft’s market share. Apple’s almost 4% PC share, to Microsoft’s 90%+

    The Windows Desktop is too vast to use the one size fits all mentality, but it provides the ability to make your app belong, and gives you the controls and UI constructs to try to fit in.

    A full screen kiosk app, does not need to conform to anything but the location the kiosk is in. Same with Medical and Hospital applications. I like things “belonging” together. If I am at a London Underground station, and I notice a sign not using the proper colours, style and New Johnston typeface, I will get annoyed. But I wouldnt go to birmingham or manchester and complain it does not conform to London’s style. (even though London Transport’s design styles are superior, and places like NY would benefit from adopting it!) :)

  5. Why is the Windows desktop too vast to have at the very least a “theme”, a sense that “there was actually thought” put into how things work, look and act together? I ask this because I want to know how many thousands of apps you need to have before this becomes impossible. Other vendors have done this well. I would argue that you shouldnt set your baseline on what the incompetent do.

    I kiosk app does not have to play by any rules, the idea is that is the only thing the user has to interact with, most often there is not a mouse. All of my commentary has been about normal desktop/mobile situations where you are using apps from many different vendors.

    More to the point, Metro vs Aero – not small differences, its completely different. It’s like how iTunes looks on Windows, it feels out of place.

    Keep in mind, I am not saying all apps have to look identical. I am saying that they should “fit” in. On OSX this is usually acheived by a grey toolbar, realistic icon sets, and minimalistic look. Yet there are thousands of apps that you can recognize at a glance.

    Maybe I am just anti chaos.

    1. I can’t ID most Mac apps from a glance… And what happened to Itunes for Windows? It’s sluggish and it does indeed look very out of place.

  6. Interesting point, Ryan, but conversly, the sameness of Apple apps and Winform apps can be a little offputting from an aestic point of view. Also, I find that when apps have a distinctive look, it often enhances, rather than detracts from the experience. Take a couple of your examples: the Zune client and Office. While vastly different in look and feel, each serves its intended function beautifully. The fluid, chrome-less Zune interface makes playing media files very enjoyable while the more structured, ribbon interface of Ofiice is focused on getting work done. While adopting a single design sounds logical from a design sense on the surface, actually focusing on the needs/goal of the user makes even more. If Office took on Zunes look or Zune adopted the ribbon, I think usability would suffer. an is it just me or is anyone else sick of seeing that NiQuil blue scroller bob in Apple apps?

    1. I don’t think consistency means you need to rigidly lay out every app the same way. It wouldn’t make sense. Notepad doesn’t need a ribbon. Zune doesn’t need one either.

      But consistency can be achieved by, yes, typography. One major factor that makes Windows Phone 7, Mac OS X or iPhone looks consistent is the consistent choice of fonts, i.e. one font, and font sizes.

  7. Cliff, it can be. Many iApps look cookie cutter. But at the same time, some people manage to blow you away with their creativity. My problem is most developers are not designers, at all. Often times you end up with “bob’s” interface because out of the box, you don’t get any direction.

    I used to think something like Metro was the answer, but I am not sure anymore. It failed the “Mom” test. She was a bit lost when she sat down to use Zune (windows app). (Yet what she can do in Excel amazes me). She did get used to it after a week, but things were not obvious. As a design language, it really, and I mean really, relies on motion. I have been developing some apps for Windows Phone 7 (they really need a better name) and it feels really flat, bordering on boring at times. It may just be too little, really its basically a font.

  8. The Zune software, has to work with the Zune Website and the Zune devices. It is more important that they maintain a consistent UI, than to worry about fitting into Windows 7.

    Metro is designed for Touch displays and small form portable devices, until Windows ditches the mouse and keyboard, and goes touch only, it would not make sense to use this in place of Aero. Just like how Aero would not work on a portable small screen.

    There is also a Metro UI style for Large screens to be controlled by remote or controller. This is used on Media Centre, and will also be replacing the Xbox dashboard to some degree.

    Microsoft has a 3 Screens and the Cloud, philosophy now, this is Metro Touch, Metro Large, and Aero. It is possible that one day Aero will be replaced with a form of Metro like the Zune software, but not yet.

    As for mentioning Office. Office uses Aero, but has a Ribbon UI aswell. It is not seperate to Aero, it is part of it. Just like how the Ribbon can be used in Windows 7 third party apps.

    1. The Zune software stood out without Aero Glass because it was designed at the time Windows Vista was falling out of grace. This gives the Zune team an excuse not to conform with Vista (a weak brand) and try to make its own independent innovations with no strings attached.

      But now that Windows 7 is strong again, you see that more and more third party apps begin to conform and support the Aero scheme better, and within Microsoft as well. Microsoft Office 2010, Windows Live Essentials all use the same Ribbon and Aero scheme, while third party apps such as Chrome, Firefox, Opera and Trillian 5 all uses Aero Glass as the defining UI.

      Back to Zune, I can actually foresee how the next update of Zune desktop app may resemble apps like Windows Live Sync, with a white background and blue decals, and typography that is more fit with Aero instead of Metro, as Zune hardware player fades in prominence (and as J Allard had left) and official Windows Phones are supported. The latest version of Zune desktop app had already rid of its original patterned backgrounds by default.

  9. Yes, I agree with the reasoning.

    However – these were all corners MS backed themselves into. On the other end of the spectrum you have Apple who managed to hit those same screens without having UI whiplash switching between them.

    You can hold an iPhone up to OSX and see the same people made them.

    The truth is MS’s UI vision has never been great. They tried to do a tablet for years before Apple, it failed. They tried to cram touch into the Windows UI and it failed.

    The iPad has apps that feel like their OSX counterparts, i mean, really feel like them, and it works. It works very well. They are not identical, they are obviously made for touch, the point is, they didnt have to start over like MS is doing with Metro. Worse, Metro isnt doing anything yet that isnt already done in iOS.

    1. Well, to be fair, OSX apps are sometimes just as bad. While OSX does look way more consistent than Windows in terms of all having the same window frame, that is really the only consistent frame. OSX is also filled with inconsistency – Not until Leopard, some apps have brushed aluminum while some have stripes, some have the blue left categories while some don’t. And iPad takes inconsistency to a new level with the realistic looks, e.g. iBooks look like a book, Calendar app look like a calendar, etc.

      The only reason OSX looks more tied together is because most apps are developed by not only programmers but also designers. Meanwhile, in Windows, it’s not usually the case, except a few, like, well, Trillian 5. :p (Sorry, I can’t really think of anything else.)

      With designers to make sure things look great, consistency almost doesn’t matter. That is the case with outlandish products like Zune.

      I think the problem of Metro also is that it looks /way/ too different from Aero. In OSX Aqua’s case, the evolution is gradual. Each version of OSX is like snake shedding its skin: this version loses the stripes, this version gains a darker gradient, and so on. A jump from Aero to Metro will be way too abrupt, and I don’t see Microsoft fully adopting Metro for Windows 8. It’s not like WP7 which its predecessor had hit such rock bottom they can reboot the platform altogether. However, I think we will see Metro slowly in more and more places – with an Aero window frame.

  10. Apple doesn’t have over 10 years worth of backwards compatibility to maintain. Windows Phone 7 is a fresh start, so they came up with the new UI to suit that screen. Media Centre and the Xbox are also fairly new, and so they dont have to worry about backwards compatibility.

    Windows is the loose thread in this, and until they take the “VERY” brave step of ditching the old in Windows, some things just will not be changed enough.

  11. At some point MS is going to have to make the same choice Apple did with OSX. They did actually do a complete reset almost 10 years ago. New UI, New under the hood. With that they also have jumped platforms from Risc to Intel, and 32 bit to 64 bit. Unlike dealing with it in Windows, it wasn’t painful.

    Maybe it is time to clean house? Win32 is old, its showing it’s age, people giggle at it now. UI as we have been discussing has more than normal issues. At some point the backwards compatibility card cannot be used as an excuse. How far do you go back? At what cost? Again, Apple did the smart move, emulated the old (yes I know of WoW), Win7 saw XP Mode. Time to bite the bullet. No more excuses, just a modern api & ui ready for the next 20 years.

    1. I think Microsoft’s issue is that they pivot too slowly. Like a tanker the size of two football fields, its a dangerous maneuver and takes a lot of time to complete (subtle BP reference). I just put my mom in front of a laptop with Windows 7 (after spending 2 hours getting rid of the extra crap that’s always on a new Windows machine) and it took her awhile to get used to the way things work.

      I recently moved from Windows –> Ubuntu, and I have to say, the UI conformity is refreshing in Gnome applications. All the volume sliders are the same — the only difference is whether they go up-down or left-right. Direction aside they conform and are nice to look at. I suppose its Canoncial’s meddling, but the new breed of Gnome applications aren’t too shabby. Probably would’ve gotten a Mac if I weren’t on such a tight budget, though.

  12. From just looking at MetroTwit in Snoop, it’s still much too heavy visually. You need to optimize your visual tree, and your framerate will go up as a result. For example, there’s no need to have a RichTextBox for *every* item in the List.

    Use a DataTemplateSelector and only show the RichTextBox when the mouse is hovered over it. For everything else, use a TextBlock which still maintains the formatting.

    There’s also a gratuitous use of Grids where StackPanels would use. Grids are heavier visually than StackPanels, and their Layout passes are much more complex.

    Freeze resources, use BitmapCaching where applicable, etc.

    WPF has many ways to do things, but generally only a few work really well. It’s inherent in the flexibility of the platform.

  13. Learning WPF is painful and infuriating. I’ve spent so many angry hours fighting WPF, and failed an uncountable amount of times. That said, when I had an array of simple Note objects (with only a pitch, duration, and accidental property), bound it to a ListBox, and managed to get WPF to display it as a vector-based musical staff with all the notes in their correct shape on the correct ledger lines without writing a single line of C# code, my mind was blown.

    I still have a love-hate relationship with WPF, but I wouldn’t dream of using anything else now.

  14. is it possible that if the design esthetic that microsoft used across all its platforms was totally coherently unified, consumers and developers would then complain that it is too monolithic, they want something original?

    msft is involved in so many areas, why not leave some diversity.

    why not just put metro on the desktop in order to give you the basic interface for interacting with your programs. when you drill down into the hub for say “software development”, you see the diverse esthetic worlds fo the different programs you are working with at that time.

    i don’t think it should be assumed that esthetics of all platforms and programs should be the same, any more than all the people in your people hub should have similar personalities or looks.

    1. Wearing a tuxedo is easy to match everything. It’s highly unlikely you can match a tie, a t-shirt, a unitard, a dress and go-go shoes, unless you are a fashion designer or a freak, which in many cases can be the same person. :p

      LOL

  15. “is it possible that if the design esthetic that microsoft used across all its platforms was totally coherently unified, consumers and developers would then complain that it is too monolithic, they want something original?”

    No. Again, this was #3 on the Aero bitch list over at Aero Task Force.

  16. It’s been my observation that much of the UI inconsistency across Windows applications over the years has been largely due to Microsoft half-assing its UI frameworks. Microsoft’s UI frameworks are very API-focused: you get a few standard controls and styles, plus all the APIs you need to create the more powerful or stylish controls that you actually want. Yay!

    Suppose I want to build an application that fits in well with the Vista/7 Explorer. What do I have to work with? Well, I have a rudimentary toolbar control with bland, gray styling that looks nothing like the toolbar in any recent Microsoft application. It’s certainly a far cry from the glossy blue toolbar in Explorer. If I want to reproduce that, then I need to do heavy restyling, which includes lots of color matching with an eye dropper tool. Since I’m on my own to recreate that look and feel, it will almost certainly look slightly different. Even if I match it perfectly, the styling will almost certainly change with the next Windows release, so my app will look out of place on half my users’ machines. What about that Explorer breadcrumb control? They give me nothing even remotely similar. How about the extended glass chrome found in Explorer and various Aero wizards? If I want to mimic that, then I need to dig into the Win32 APIs. WPF didn’t even ship with a date picker or calendar control. And would it kill them to throw in a half-decent collection of stock icons and graphics? The library that ships with Visual Studio is always one or two generations out of date.

    Compare all this to Apple, where the UI designer’s control library includes almost every variation of every control seen throughout the Mac platform. The button control alone has about a dozen different variations for use in different contexts. The button in WPF has a default style and a style for use in toolbars. That’s about it. No split button, “UAC elevation required” button, etc.

    Microsoft writes the core UI framework, throws in a minimal set of core controls, and calls it a day. It’s no wonder Windows applications all look different. They don’t even give us what we need to blend in with Microsoft’s own applications, including the OS itself! They’re doing the same thing with Windows Phone 7, too: there’s no panorama control, no pivot control, etc. We may get some of those missing controls by RTM, but by that point, many developers will have created their own, all of which will look and work differently. Here’s a tip: if your platform’s most heavily demoed features aren’t in the SDK yet, then you shouldn’t be releasing it.

    /rant

  17. What about for making *native* looking apps that fit in well with the rest of the operating system and not tellie tubbie apps with their own ugly skins?

    All the WPF apps I have seen so far (including visual studio’s code editor) opt for UGLY custom colours and skins rather than giving the application a native look.

    I know Microsoft and other Windows developers are notorous for not following standards and HIG guidelines but the WPF developers seem to be the worst offenders. I guess they all get their panties in a bunch getting excited about the custom skinability of WPF that lets them make tellie tubbie style interfaces easily.

    It is ok to create a skinned “Gadget” but for a desktop application, I believe should look native by default.

    http://msdn.microsoft.com/en-us/library/aa511258.aspx

    1. Amen. It doesn’t help that most developers make terrible designers. Truth be told, half the designers out there aren’t very good at the “differentiated UX” thing either. We can only blame the framework insofar as it makes UX differentiation relatively trivial to accomplish. Of course, the fact that half of Microsoft’s own sample apps have a heinously ugly UX doesn’t do much to discourage this sort of thing.

  18. Well Office is never going to see itself or even its parts written in .NET as long as Microsoft cares about backward compatibility. And Windows, most certainly not, but I wouldn’t say never for some components.

  19. Good work! Just wondering, is there any reason why you didn’t (or are not going to) make this app a Silverlight 4 app? It just seems that there isn’t much that couldnt be done in that platform and you get to run it on Mac as well (Mac people love things that look good!).

  20. Pingback: Enio de Aragon
  21. It is very interesting reading these comments after 1 year has passed.

    The Metro “look” has now become the Metro “platform” in Windows 8, which is still over half a year away but still lacks good UI design and is just a reaction to iOS. Nothing wrong with reacting but coming from a company that used to lead, it is just “too little too late”.

    One can argue the pros and cons of Windows vs OSX or iOS in design and development, but Apple have shown that it is possible to deliver simple, functional, beautiful, robust, consistent, and technologically advanced products that appeal to the masses. It is absolutely clear who the leader is right now.

Leave a Reply