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.

Monday, January 21, 2013

lorem ipsum in Windows Phone 8 calendar

Here's a screenshot of my calendar on my phone.

No, I'm not scared of you seeing my personal data as Window Phone won't even show it to me!
See (Zoomed 150%)


That's right, in the month view they just show placeholder text.
The number of entries corresponds to the number of items each day but the displayed text does not.

I assume this is just for some performance optimization (probably when animating) but it looks lazy :(