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:
- Clarity Consulting have created the “Windows Phone 7 Panorama Control” and published the source code for it under a Creative Commons license.
- Stephane Crozatier has also published an open source Panorama and Pivot controls on CodePlex under the Ms-PL. This is the one I have used and it does the job.
- Aimee Gurl shows how to simulate the same effect without code, using Blend.
- KoolKiz also has example on his blog on how to recreate the effect.
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.
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.