Wednesday, January 30, 2013

Pivot and Panorama have moved AND changed in WP8

This post contains content from a talk I gave at WPUG on Jan 29th.

As a Windows Phone developer you're, no doubt, intimately familiar with the Pivot and Panorama controls. If you've looked at porting an app that uses them from WP7.x to WP8.0 then you're probably aware that they've moved.
They used to be in the Windows.Phone.Controls.dll assembly that you had to distribute with your app.
They're now in the Windows.Phone.dll assembly and are already on the device.

The plus side to this is that it means your XAPs can be smaller (due to not needing to include a 102k file) and that the pages which use these controls can load that little bit faster (due to use of a native control)

The downside to this is that you cannot use the same XAML in a WP7.x and a WP8.0 application. If you're targeting both platforms this means duplication and that in turn leads to more work. :(

On WP7.x you do this:
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
But on WP8.0 you do this:
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

That is all relatively well documented and easy to address if you've discovered it yourself. What isn't so well documented is how the controls themselves have changed.


Let's start with the Panorama

Here you can see the default instances of the two versions of the Panorama. WP7.x on the left and WP8.0 on the right.
Notice in particular the differences in the headers.


Not clear? Let me make it a bit more obvious:

Yes, the layout (template) for the PanningTileLayer has changed in WP8.0. 

Here's how it looks in WP7.x (obtained via Reflector)

And, this is it in WP8.0


The item headers have been changed too.
WP7.x:


WP8.0:


Does this matter? Why might you care?

Well, if you've got a background image for your Panorama that was designed with the WP7.x layout in mind it may look wrong or out of alignment on WP8.0. If this is the case then you probably want to change the WP8.0 template to match the 7.x one that was being used previously.
This is also probably easier than creating a new version of the background image.
The WP8.0 template also gives more space over to the header. This means you lose some content space.
In that the contents of the PanoramaItems are probably more important than the header you may want to give them more of the available screen real-estate.

How to roll it back?

Fortunately it's quite simple to add your own template to the WP8.0 version and "undo" the changes:

    
        
            
                
            
        
        
            
                
            
        
    

Yes some of these values may look odd at first look but this will enable the title and header to be displayed in exactly the same position as it would on WP7. (This was tested thoroughly by a designer with a very keen eye for pixel differences. ;)

You can then apply them like this:



    
 ...
    
... 



And what about the Pivot control?

Well, this has changed in a much subtler way and, fortunately, is less likely to impact you.

Something that is quite commonly done is to take a Pivot control and retemplate it to hide the header by removing the PivotHeadersControl from the template, to create a simple swiping control.

If this is missing in WP8.0 then the page with this on will cause the app to crash when opened.
You have been warned.
There are also other ways of hiding the item header if you so wish.

8 comments:

  1. Just recompiled our apps for Windows Phone 8 and it would seem as part of the "upgrade" process, the apps still make use of the Panorama and Pivot controls referenced in an external Windows.Phone.Controls.dll (albeit a SDK 8.0 version). Not sure if this is a stub/redirector, however it lets us retain all of our 7.x styling without having to re-template for WP8.

    Sure all of the advantages of native controls aren't gained, but the convenience of not having to tweak/faff is great.

    Richard (Igneous)

    ReplyDelete
  2. BTW - GREAT article as usual Matt. Thanks.

    ReplyDelete
  3. Arg, this sucks. So I can´t link my xaml pages between wp8 and wp7 projecs :-(
    Another copy and paste -> drives me crazy

    Is there any way to work around this, other than creating a pivot control wrapper?

    ReplyDelete
    Replies
    1. @Till You can still use the same XAML in both WP7 & WP8. The only thing you may see is some slight layout differences between the two. As Richard said though you can still use the WP7 versions of the controls in a WP8 app and at a probably imperceptible performance overhead.

      Delete
  4. Hi Matt, thanks for an article.What is the other way to hide the header you mentioned? Will it work if I need to hide header and title when the page is already rendered, on event?

    ReplyDelete
    Replies
    1. You could hide the header by retemplating it. You could retemplate to add a property to make it easier to show or collapse elements at any time you wish. Alternatively you could walk the visual tree to identify the headers and hide them.

      Delete
  5. Generally I do not post on blogs, but I would like to say that this one really forced me to do so, just to say this was a really good post. Thanks for letting people know how to make google search result safer.

    ReplyDelete
  6. Thank you for this post. The XAML designer malfunctions when one references to the old phone.controls assembly, displaying "assembly not found" whenever any change is made to the XAML, BUT the code compiles anyway. Every time there is a real bug in the code, the compiler will throw numerous additional errors relating to missing Panorama or Pivot types. Fix the bug, and those additional errors would magically disappear. Since we completely template the Panorama control, the new default stylings don't affect us. But this simple change - referencing the new way - took away all of these errors! So thank you. The change was not well documented; referencing the old phone.controls DLL causes a host of problems, and projects are automatically updated to do so as mentioned previously in this thread.

    ReplyDelete

I get a lot of comment spam :( - moderation may take a while.