Mobile Zone is brought to you in partnership with:

Matt has been paid to develop software for the past 12 years. He specializes in mobile and web development and has recently been doing a lot with Windows Phone 7. He runs DevEvening (http://devevening.co.uk/) a .net focused user group in Surrey and the Windows Phone User Group (http://wpug.net/) in London. He blogs at http://blog.mrlacey.co.uk/ and tweets at @mrlacey & @wpug. Matt is a DZone MVB and is not an employee of DZone and has posted 102 posts at DZone. You can read more from them at their website. View Full User Profile

Pivot and Panorama Have Moved AND Changed in WP8

01.31.2013
| 3462 views |
  • submit to reddit

 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)
<localprimitives:panningtitlelayer cachemode="BitmapCache" content="{TemplateBinding Title}" contenttemplate="{TemplateBinding TitleTemplate}" fontfamily="{StaticResource PhoneFontFamilyLight}" fontsize="187" grid.row="0" horizontalalignment="Left" margin="10,-76,0,9" x:name="TitleLayer">
</localprimitives:panningtitlelayer>
And, this is it in WP8.0
<localprimitives:panningtitlelayer characterspacing="-35" content="{TemplateBinding Title}" contenttemplate="{TemplateBinding TitleTemplate}" fontfamily="{StaticResource PhoneFontFamilyLight}" fontsize="170" grid.row="0" horizontalalignment="Left" margin="10,-34,0,0" x:name="TitleLayer">
</localprimitives:panningtitlelayer>
The item headers have been changed too.
WP7.x:
<contentcontrol content="{TemplateBinding Header}" contenttemplate="{TemplateBinding HeaderTemplate}" fontfamily="{StaticResource PhoneFontFamilySemiLight}" fontsize="{StaticResource PhoneFontSizeExtraExtraLarge}" horizontalalignment="Left" margin="10,-2,0,26" x:name="header">
</contentcontrol>
WP8.0:
<contentcontrol characterspacing="-35" content="{TemplateBinding Header}" contenttemplate="{TemplateBinding HeaderTemplate}" fontfamily="{StaticResource PhoneFontFamilySemiLight}" fontsize="66" horizontalalignment="Left" margin="12,-2,0,38" x:name="header">
</contentcontrol>
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:
<phone:panorama title="My application" titletemplate="{StaticResource LikeWp7TitleTemplate}">
 
    <phone:panoramaitem header="first item" headertemplate="{StaticResource LikeWp7ItemHeaderTemplate}">
 ...
    </phone:panoramaitem>
...
</phone:panorama>
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.


Published at DZone with permission of Matt Lacey, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)