No Built-in Page Transitions in WP7

So according to the latest Windows Phone 7 UI and Interaction Guides there is no way to use the built in animations in the OS:

“Built-in screen transitions and animations are system-reserved and developers cannot access them but may mimic them. If developers want to implement transitions or animations within their application, they must use Silverlight or XNA Framework to create them.”

This worries me.  Months ago I posted about the problem of not having common Panorama and Pivot controls

The problem with leaving it up to developers to implement these common things just leads to multiple inconsistence implementations, which ultimately degrades the user experience as a whole.

Applications should be allowed be implement their own UI.  If an application implements a custom UI badly that reflects badly on that app.  But if an application adopts the common system wide UI paradigms and metaphores and implements them badly it reflects badly on the system UI as a whole.  Users won’t know whether to blame the app or the OS.

When it comes to UI, consistency is king and by leaving such a core elements of the UI in the hands of individual developers to create is guaranteed too lead to hundereds of slightly different implementation.  The built in effects and transitions have been built by expert designers and include are some very subtle touches, which a developer looking to mimic the effect is unlikely to even notice, let alone remember to replicate.

We need to have a common control suite in Silverlight for Windows Phone 7.


Official WP7 Pivot and Panorama Controls On Their Way

Of course one of the most compelling and unique aspects of the Metro UI on Windows Phone 7 is that nifty Panorama, where the UI surface a virtual canvas which is divided into columns.  The phone screen provides a viewport onto one column at a time.
Windows Phone Panorama

Games Hub using a Panorama

Microsoft call this the Panorama effect (unsuprisingly) and discuss it in some length in the WP7 Design and Interaction Guide:

“Panorama applications are a part of the core Windows Phone OS 7.0
visual experience. Unlike standard applications that are designed to fit
within the confines of the phone screen, these applications offer a unique
way to view controls, data, and services by using a long horizontal canvas
that extends beyond the confines of the screen. These inherently dynami
applications use layered animations and content so that layers smoothly
pan at different speeds, similar to parallax effects.”

Thats sounds great.  How do I go about creating this effect in my application?

You can’t!  Ah…fallen at the first hurdle.  To quote the Design and Interaction Guide again:

Microsoft will provide a control and design template to support
building Panoramas at a later date. Microsoft recommends that designers
and developers wait to implement Panoramas until final guidance is

Well yes this is only a CTP, so I guess we just have to wait…..or at build it ourselves.  Unprisingly a few people have done just that:       

While these all ostensibly solve the problem they all do suffer from the same drawback.  They are a best a temporary solution. 

But why?  If they work why do we need to bother with the official Microsoft version when it comes out? 

Well the truth is while they are all broadly similar to each other and to the built in Panoramas, there are subtle differences between each of these implementations.  They don’t neccessarily all scroll at the same speed.  The columns aren’t exactly the same widths.  The title text margins aren’t exactly the same. The thing is if the Panorama is going to such a pervasive UI paradigm it has to be consistently implemented everywhere – in the OS and in apps – right down to the little docking animations and the speed and sensitivity of the scrolling.   These may sound like small things but it all adds up to give the user a consistent experience and make the UI feel familiar and intuitive.       

Following Microsoft’s advice to just not implement Panoramas until later just isn’t practical.  We’re developing applications now – we can just leave out something so fundametal to our UI designs – so for now any of the above solutions are workable.  I would suggest using one of the 2 ready built open source controls as a) they are easy enough get started with and b) are not likely to be too far removed from the final version that Microsoft ships.

But please, for the love of God, don’t forget to switch to the official version when it comes out.  And not just because it’s better to use the supported version but because, as I mentioned, the Panorama experience needs to look and work consistenly across the wider environment, including in your application.

UPDATE 24/06/2010:

Windows Phone Beta 1 has dropped but alas the panorama and pivot controls didn’t make it.  It looks like they are coming in the next few weeks, presumably in the form of an out-of-band download, or maybe they are planning on open sourcing it on CodePlex. is confusing

Is it just me or is the Paint .NET web site super confusing? I really like and use fairly often but when ever I go to the site it always takes me a while to find the right place to download it.

The site is full of ads, which ok is fair enough I don’t mind the ads – its a free product after all.  Problem is the ad’s have way more prominent download buttons the the actual site itself.  Look at this screen shot.  Where would your first instinct be to click if you wanted to download the product?

Would it be the big red “Download Now” button?  Well no that would be an ad for AVS Image Converter, and you’ve just fallen into their trap!  You should have chosen the small bit of text up in the top right hand corner.

Then you get to the actual download page and scrolling past more ads (which again offer you the tempting big red “Download Now” option, if you didn’t fall for it on the front page you probably would now given this is the Download page) you get this:

So again without thinking about it, which is your gut rection to click.  Well to me the big white box looks like an advert again and the blue link is the link to download.   Wrong again!  The blue text is actually a link to more information about the mirror host (an ad) and the nice image which looks like an ad is actually the link to download the app.

Now don’t get me wrong I like itself.  It is a great product.  But the web site is so confusing and I can’t but help wonder if it is intentional – there are many shall we say less salubrious sites on the net that use techniques like this to try and trick users into clicking ads.  I have a “friend” who says torrent sites are notorious for this.

I know they make their money through the ads but you would hope that the folks at are above such tactics and that this is just down to poor user interface design but it has been this way for so long now I’m beginning to wonder.