Windows Phone 7で分割スクロール領域を作成するにはどうすればいいですか？

Question

Windows Phone 7の開発と、作成したいアプリケーションを見ています（実際には幅の異なる長方形/領域のグリッド）。縦方向と横方向の両方にスクロールしますが、最初の列は水平スクロールからロックされます。

最初に「水平にロックされた」領域は固定幅で、第2領域の「行」ごとに「ロゴ」が付いています。 2番目の領域は水平方向と垂直方向の両方にスクロールすることができます。垂直方向にスクロールすると、両方の領域が一緒にスクロールされ、ロゴは常に2番目の領域のデータ行と結びつきます。

私は複数のスクロールビューアーコントロールを埋め込むことができると考えましたが、それは可能ではないようです。

どのようにすればいいのでしょうか？

例：

+-----+--------------------------------+ 
| 1 | |   |  |   | 
+-----+--------------------------------+ 
| 2 |   |   |  |  | 
+-----+--------------------------------+ 
| 3 | |   |  | |  | 
+-----+--------------------------------+ 
| 4 |   |   |  | | 
+-----+--------------------------------+ 
| 5 |  | |  |   |  | 
+-----+--------------------------------+ 

だから、常に画面全体を上下にスクロールされ、右側にコンテンツの残りの部分と整合したまま上記の番号のセクション。水平スクロールは、右側の領域にのみ影響します。

Answer 1

このXAMLコードを試してみてください。それは2つのScrollViewerを使用し、私のために働く...

<phone:PhoneApplicationPage 
    x:Class="SamplePhoneApp.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" d:DesignWidth="480" d:DesignHeight="768" 
    FontFamily="{StaticResource PhoneFontFamilyNormal}" 
    FontSize="{StaticResource PhoneFontSizeNormal}" 
    Foreground="{StaticResource PhoneForegroundBrush}" 
    SupportedOrientations="Portrait" Orientation="Portrait" 
    shell:SystemTray.IsVisible="True"> 

    <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Disabled"> 
     <Grid x:Name="LayoutRoot" Background="Transparent"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="200" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 

      <Border Grid.Column="0" Grid.Row="0" Height="200" Background="DarkSeaGreen"> 
       <TextBlock Text="1." Height="200" /> 
      </Border> 
      <Border Grid.Column="0" Grid.Row="1" Height="200" Background="Magenta"> 
       <TextBlock Text="2." Height="200" /> 
      </Border> 
      <Border Grid.Column="0" Grid.Row="2" Height="200" Background="Bisque"> 
       <TextBlock Text="3." Height="200" /> 
      </Border> 
      <Border Grid.Column="0" Grid.Row="3" Height="200" Background="BurlyWood"> 
       <TextBlock Text="4." Height="200" /> 
      </Border> 
      <Border Grid.Column="0" Grid.Row="4" Height="200" Background="CadetBlue"> 
       <TextBlock Text="5." Height="200" /> 
      </Border> 

      <ScrollViewer Grid.Row="0" Grid.RowSpan="5" Grid.Column="1" 
         ScrollViewer.VerticalScrollBarVisibility="Disabled" 
         ScrollViewer.HorizontalScrollBarVisibility="Visible"> 
       <StackPanel> 
        <StackPanel Height="200" Orientation="Horizontal"> 
         <Border Height="200" Width="300" Background="Red"> 
          <TextBlock Text="abc" /> 
         </Border> 
         <Border Height="200" Width="150" Background="Aqua"> 
          <TextBlock Text="abc" /> 
         </Border> 
         <Border Height="200" Width="250" Background="Cornsilk"> 
          <TextBlock Text="abc" /> 
         </Border> 
        </StackPanel> 

        <StackPanel Height="200" Orientation="Horizontal"> 
         <Border Height="200" Width="140" Background="DarkCyan"> 
          <TextBlock Text="abc" /> 
         </Border> 
         <Border Height="200" Width="300" Background="CornflowerBlue"> 
          <TextBlock Text="abc" /> 
         </Border> 
         <Border Height="200" Width="190" Background="DarkOrange"> 
          <TextBlock Text="abc" /> 
         </Border> 
        </StackPanel> 

        <StackPanel Height="200" Orientation="Horizontal"> 
         <Border Height="200" Width="200" Background="Red"> 
          <TextBlock Text="abc" /> 
         </Border> 
         <Border Height="200" Width="250" Background="Aqua"> 
          <TextBlock Text="abc" /> 
         </Border> 
         <Border Height="200" Width="250" Background="Cornsilk"> 
          <TextBlock Text="abc" /> 
         </Border> 
        </StackPanel> 

        <StackPanel Height="200" Orientation="Horizontal"> 
         <Border Height="200" Width="140" Background="DarkCyan"> 
          <TextBlock Text="abc" /> 
         </Border> 
         <Border Height="200" Width="400" Background="CornflowerBlue"> 
          <TextBlock Text="abc" /> 
         </Border> 
         <Border Height="200" Width="190" Background="DarkOrange"> 
          <TextBlock Text="abc" /> 
         </Border> 
        </StackPanel> 

        <StackPanel Height="200" Orientation="Horizontal"> 
         <Border Height="200" Width="200" Background="Red"> 
          <TextBlock Text="abc" /> 
         </Border> 
         <Border Height="200" Width="150" Background="Aqua"> 
          <TextBlock Text="abc" /> 
         </Border> 
         <Border Height="200" Width="300" Background="Cornsilk"> 
          <TextBlock Text="abc" /> 
         </Border> 
        </StackPanel> 
       </StackPanel> 
      </ScrollViewer> 
     </Grid> 
    </ScrollViewer> 
</phone:PhoneApplicationPage>