Customising Panorama control #wpdev #wp7dev #wp8dev

This control is deemed like the showcase control in windows phone. Its simple, its elegant and non of the other platforms have anything similar. Its been described as being synonymous to a magazine cover. Dave Crawford’s design talk is a great intro to this

Most Modern UI stock templates use a very typographical layout. Its all textual with no branding samples in sight – unlike real life where branding is a foremost part of the experience. Here is link to dev center’s article http://msdn.microsoft.com/library/windowsphone/design/hh202892(v=vs.105).aspx This article talks about various aspects of using panorama control etc.

For myself, the first time I was tempted into using Panorama was after playing with the new Facebook Beta app. This app divided windows phone community by marking a significant departure from textual nature of panorama. So far in Cineworld app, I had restricted myself to Pivot but I could see myself using panorama..

Branding:If an app requires specific branding, its best to create a user control that provides the option to set Brand logo and optional text messages. One isn’t restricted to a two line header on each page :)

wp_ss_20130619_0003  wp_ss_20130619_0004

As you can see, instead of excessively large page header, the customised header is very compact and since its a user control, we can consume it across other pages within the app. So what can we do with Panorama, well it exposes a TitleTemplate. We take the UC and we shove that in TitleTemplate. You can further customise the HeaderTemplate to change how panel headers look like.

Film

I am definitely not saying you should do what I did. However what I will state is that Metro or Modern Design is really just about good design. Just because stock templates do it one way doesn’t mean no one should do otherwise. Kudos the designers of the new Facebook BETA app for doing something different.

About these ads

4 thoughts on “Customising Panorama control #wpdev #wp7dev #wp8dev

  1. So, you asked for a critique of your post. Here goes.

    Firstly, read http://www.its-not-its.info/

    Why did the new Facebook Beta tempt you to use a Panorama control? The panorama control is intended to be used to provide a rich, engaging experience that encourages exploration.
    The old version of the Facebook app was rich with dynamic images based on the users timeline and obviously used a Panorama control.
    The new, beta version contains a single page interface with slide out menus on each size. It does not look or behave like a panorama control or any other default control on Windows Phone. This new control also seems to put everything in one place and not encourage exploration like the panorama control typically does. The swipe gestures also behave slightly different to a standard panorama control too.

    “This app divided windows phone community by marking a significant departure from textual nature of panorama.” I thought the debate about that app was due to it seemingly using a UI that was more in tune with Android or iOS which use a tray menu accessed by sliding from the side (or button at the top). A large part of the debate also came down to not understanding the difference between the metro/modern/Microsoft design PRINCIPLES and the metro/modern/Microsoft design LANGUAGE of the phone. That the app looked the same on multiple platforms also upset some Microsoft/WP fan boys.

    “If an app requires specific branding, its best to create a user control that provides the option to set Brand logo and optional text messages.” – Why?
    How does this help me reinforce branding by use of a specific colour or font throughout an app? Or are you re-enforcing the idea that branding is all about a logo?
    And what’s with the “optional text messages”? Is this just something you’ve done or something that should always be done? Any advice or recommendations on when and what type of messages you’re talking about here?
    And by stating messages, in the plural, do you mean that multiple messages could be shown at once? If so, are there any recommendations or gotchas to consider in this situation? By stating “its [sic] best to “… I’m taking that to mean this is your recommended best practice so more details would be helpful.

    “One isn’t restricted to a two line header on each page” – Who said this restriction was there?

    Why, in a post about the panorama control have you shown screenshots that don’t include a panorama? Or are you saying that you’ve taken the panorama control and customised it to look like a standard ListBox (or LongListSelector)?

    Oh, you’ve created a control you’ve put at the top of a couple of pages and then added it to the TitleTemplate of a panorama page too. Why not show the XAML that you’ve used so others could see how to do this, rather than just describe a change?
    And the same for the HeaderTemplate, you say you’ve changed something, but what?

    I thought, based on the tile, this was going to be a post to show how you can customise the panorama control, not just a vague description of how you have.

    Oh, and I notice you’re talking about what constitutes good design. I’ll save the design critique of your app for another time though…

    Does that seem long and harsh? Well you did ask.
    I didn’t get around to looking for posts by other people who’d described panorama customization a year ago. I bet there are some though. ;)

    • bloody hell… that was long :) if it was an email i’d answer inline :P

      If you are talking about branding per say, we would need to talk about custom styles not just shoving a logo somewhere. I agree with you on that point. Unfortunately I am all about shortcuts and in my case just customising header and keeping light theme was mostly sufficient.

      Re: the use of panorama within facebook app, sure it does deviate from promoted usage of Panorama i.e. the magazine cover. I personally took it with the same spirit (to hell with promoted design) and used it to render panels which were previously in pivots.

      This post itself was in drafts for a few days and it was best to cut it short.. – everyone knows how templates are defined :)
      Good design or what constitutes a good design is a personal thing.. Beauty is in the eye of the beholder

  2. “Its simple, its elegant and non of the other platforms have anything similar.”
    I do like the panorama metaphor, but it isn’t unique to Windows. You can do the same thing with a UIScrollView in iOS.

    • Greg,

      A simple design isn’t tied to Windows only. Metro initiated a push for cleaner design and going forward, it will be embraced by others. iOS is moving to adopt great chunks of Metro design in IOS7

      Hermit

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s