Fix Panorama layout when upgrading your project to OS 8.0 SDK

  This will be a really short blog post but might save you some time if you have an OS 7.1 Panorama project and decide to upgrade the project to 8.0 SDK. After the upgrade you might see that the layout of your old page changed and you have less content available for the items and also the header looks different. Don't try to fix the problem by changing the margin of the control on the OS 8.0 SDK. The reason why this happens is because the Windows Phone SDK team decided to "tweak" a little bit the default style for the Panorama control, to be more precise the TitleLayer part of the style.

  On Windows Phone OS 7.1 projects the TitleLayer looks like this:

 <controlsPrimitives:PanningTitleLayer x:Name="TitleLayer" CacheMode="BitmapCache" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" FontSize="187" FontFamily="{StaticResource PhoneFontFamilyLight}" HorizontalAlignment="Left" Margin="10,-76,0,9" Grid.Row="0"/>  

while on OS 8.0 we have:

 <Primitives:PanningTitleLayer x:Name="TitleLayer" CharacterSpacing="-35" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" FontSize="170" FontFamily="{StaticResource PhoneFontFamilyLight}" HorizontalAlignment="Left" Margin="10,-34,0,0" Grid.Row="0"/>  

You can see that not only the margin have changed (the reason why on OS 8.0 version we have less space in the content -44px ), but also the font size changed from 187 to 170 producing these visual differences:

The solution to this problem is pretty simple: extract the old style of the Panorama control (the easiest way is using Blend) and apply to both WP7.1 and OS 8.0 versions of your project. This way the UI will be consistent between the two versions of the app. If you don't want to use Blend I am attaching the default OS 7.1 style so you can directly copy/paste it in your project and apply it to your Panorama control.

 <Style x:Key="PanoramaStyleWP71" TargetType="controls:Panorama">  
                <Setter Property="ItemsPanel">  
                     <Setter.Value>  
                          <ItemsPanelTemplate>  
                               <controlsPrimitives:PanoramaPanel x:Name="panel"/>  
                          </ItemsPanelTemplate>  
                     </Setter.Value>  
                </Setter>  
                <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>  
                <Setter Property="Background" Value="Transparent"/>  
                <Setter Property="Template">  
                     <Setter.Value>  
                          <ControlTemplate TargetType="controls:Panorama">  
                               <Grid>  
                                    <Grid.RowDefinitions>  
                                         <RowDefinition Height="auto"/>  
                                         <RowDefinition Height="*"/>  
                                    </Grid.RowDefinitions>  
                                    <controlsPrimitives:PanningBackgroundLayer x:Name="BackgroundLayer" HorizontalAlignment="Left" Grid.RowSpan="2">  
                                         <Border x:Name="background" Background="{TemplateBinding Background}" CacheMode="BitmapCache"/>  
                                    </controlsPrimitives:PanningBackgroundLayer>  
                                    <controlsPrimitives:PanningTitleLayer x:Name="TitleLayer" CacheMode="BitmapCache" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" FontSize="187" FontFamily="{StaticResource PhoneFontFamilyLight}" HorizontalAlignment="Left" Margin="10,-76,0,9" Grid.Row="0"/>  
                                    <controlsPrimitives:PanningLayer x:Name="ItemsLayer" HorizontalAlignment="Left" Grid.Row="1">  
                                         <ItemsPresenter x:Name="items"/>  
                                    </controlsPrimitives:PanningLayer>  
                               </Grid>  
                          </ControlTemplate>  
                     </Setter.Value>  
                </Setter>  
           </Style>  

NAMASTE