title: Windows Phone 8 panorama layouts
body: <p>I'm new to Windows phone 8 development and I am having difficulty with a panorama view.</p>
  
  <p>When I create a basic 'Windows Phone Portrait Page' I have no difficulty creating grids and aligning Toolbox controls between those grids.
  However, with the Panorama page, when I create grids, those grids are applied to every page in the panorama and therefore I cannot use different layouts for each page. </p>
  
  <p>How would I achieve different layouts on my panorama page?
  Should I be using a WindowsPhoneControl instead?</p>
  
  <p>Thanks for your time.</p>
  
  <pre><code>&lt;phone:PhoneApplicationPage
  x:Class="SmarterPower.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  SupportedOrientations="Portrait"  Orientation="Portrait"
  shell:SystemTray.IsVisible="False"&gt;
  
  &lt;!--LayoutRoot is the root grid where all page content is placed--&gt;
  &lt;Grid x:Name="LayoutRoot" Background="Transparent"&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="148*"/&gt;
          &lt;ColumnDefinition Width="225*"/&gt;
          &lt;ColumnDefinition Width="107*"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="351*"/&gt;
          &lt;RowDefinition Height="201*"/&gt;
          &lt;RowDefinition Height="248*"/&gt;
      &lt;/Grid.RowDefinitions&gt;
  
       &lt;!--Panorama control--&gt;
      &lt;phone:Panorama Title="smarter power for you" Grid.RowSpan="3" Grid.ColumnSpan="3"&gt;
          &lt;phone:Panorama.Background&gt;
              &lt;ImageBrush ImageSource="/SmarterPower;component/Assets/PanoramaBackground.png"/&gt;
          &lt;/phone:Panorama.Background&gt;
  
          &lt;!--Panorama item one--&gt;
          &lt;phone:PanoramaItem&gt;
              &lt;!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content--&gt;
              &lt;phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Items}" VerticalContentAlignment="Top" VerticalAlignment="Top"&gt;
                  &lt;phone:LongListSelector.ListHeaderTemplate&gt;
                      &lt;DataTemplate&gt;
                          &lt;Grid Margin="12,0,0,38"&gt;
                              &lt;Grid.RowDefinitions&gt;
                                  &lt;RowDefinition Height="Auto"/&gt;
                                  &lt;RowDefinition Height="*"/&gt;
                              &lt;/Grid.RowDefinitions&gt;
                              &lt;TextBlock Text="menu"
                                         Style="{StaticResource PanoramaItemHeaderTextStyle}"
                                         Grid.Row="0"/&gt;
                          &lt;/Grid&gt;
                      &lt;/DataTemplate&gt;
                  &lt;/phone:LongListSelector.ListHeaderTemplate&gt;
                  &lt;phone:LongListSelector.ItemTemplate&gt;
                      &lt;DataTemplate&gt;
                          &lt;StackPanel Orientation="Horizontal" Margin="0,0,0,0" Height="50" Width="432"&gt;
                              &lt;!--Replace rectangle with image--&gt;
                              &lt;Image Source="{Binding Image}" /&gt;
                              &lt;StackPanel Width="311" Margin="8,-5,0,5"&gt;
                                  &lt;TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="0,5,10,0" Style="{StaticResource PhoneTextSmallStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" VerticalAlignment="Center" /&gt;
                              &lt;/StackPanel&gt;
                          &lt;/StackPanel&gt;
                      &lt;/DataTemplate&gt;
                  &lt;/phone:LongListSelector.ItemTemplate&gt;
              &lt;/phone:LongListSelector&gt;
          &lt;/phone:PanoramaItem&gt;
  
          &lt;!--Panorama item two--&gt;
          &lt;phone:PanoramaItem&gt;
              &lt;TextBlock HorizontalAlignment="Left" Height="105" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="154" Margin="0,-10,0,0"/&gt;
          &lt;/phone:PanoramaItem&gt;
      &lt;/phone:Panorama&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>