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>