Windows Phone 8全景布局

Question

我是Windows Phone 8开发新手，我很难全景视图。

当我创建一个基本的'Windows Phone纵向页面'时，我无法在这些网格之间创建网格并对齐Toolbox控件。 但是，使用Panorama页面时，当我创建网格时，这些网格将应用于全景中的每个页面，因此我无法为每个页面使用不同的布局。

我如何在全景图页面上实现不同的布局？ 我应该使用WindowsPhoneControl吗？

谢谢你的时间。

<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"> 

<!--LayoutRoot is the root grid where all page content is placed--> 
<Grid x:Name="LayoutRoot" Background="Transparent"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="148*"/> 
     <ColumnDefinition Width="225*"/> 
     <ColumnDefinition Width="107*"/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="351*"/> 
     <RowDefinition Height="201*"/> 
     <RowDefinition Height="248*"/> 
    </Grid.RowDefinitions> 

    <!--Panorama control--> 
    <phone:Panorama Title="smarter power for you" Grid.RowSpan="3" Grid.ColumnSpan="3"> 
     <phone:Panorama.Background> 
      <ImageBrush ImageSource="/SmarterPower;component/Assets/PanoramaBackground.png"/> 
     </phone:Panorama.Background> 

     <!--Panorama item one--> 
     <phone:PanoramaItem> 
      <!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content--> 
      <phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Items}" VerticalContentAlignment="Top" VerticalAlignment="Top"> 
       <phone:LongListSelector.ListHeaderTemplate> 
        <DataTemplate> 
         <Grid Margin="12,0,0,38"> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="Auto"/> 
           <RowDefinition Height="*"/> 
          </Grid.RowDefinitions> 
          <TextBlock Text="menu" 
             Style="{StaticResource PanoramaItemHeaderTextStyle}" 
             Grid.Row="0"/> 
         </Grid> 
        </DataTemplate> 
       </phone:LongListSelector.ListHeaderTemplate> 
       <phone:LongListSelector.ItemTemplate> 
        <DataTemplate> 
         <StackPanel Orientation="Horizontal" Margin="0,0,0,0" Height="50" Width="432"> 
          <!--Replace rectangle with image--> 
          <Image Source="{Binding Image}" /> 
          <StackPanel Width="311" Margin="8,-5,0,5"> 
           <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="0,5,10,0" Style="{StaticResource PhoneTextSmallStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" VerticalAlignment="Center" /> 
          </StackPanel> 
         </StackPanel> 
        </DataTemplate> 
       </phone:LongListSelector.ItemTemplate> 
      </phone:LongListSelector> 
     </phone:PanoramaItem> 

     <!--Panorama item two--> 
     <phone:PanoramaItem> 
      <TextBlock HorizontalAlignment="Left" Height="105" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="154" Margin="0,-10,0,0"/> 
     </phone:PanoramaItem> 
    </phone:Panorama> 
</Grid> 

Answer 1

你应该定义你的行和列全景项内的网格控制，而不是在布局根格将它们定义：

<!--LayoutRoot is the root grid where all page content is placed--> 
<Grid x:Name="LayoutRoot" Background="Transparent"> 


    <!--Panorama control--> 
    <phone:Panorama Title="My Panorama" > 

     <!--Panorama item one--> 
     <phone:PanoramaItem Header="item 1"> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="148*"/> 
        <ColumnDefinition Width="225*"/> 
        <ColumnDefinition Width="107*"/> 
       </Grid.ColumnDefinitions> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="351*"/> 
        <RowDefinition Height="201*"/> 
        <RowDefinition Height="248*"/> 
       </Grid.RowDefinitions> 
      </Grid> 
     </phone:PanoramaItem> 

     <!--Panorama item two--> 
     <phone:PanoramaItem Header="item 2">    
     </phone:PanoramaItem> 
    </phone:Panorama> 
</Grid>