如何在Windows Phone 7上創建拆分滾動區域

Question

我正在查看Windows Phone 7開發，我希望創建的應用程序需要創建一個視圖（實際上是一個不同寬度的矩形/區域的網格），它垂直和水平滾動，但第一列鎖定在水平滾動。

要嘗試和詳細說明，第一個「水平鎖定」區域是固定寬度，第二個區域中的每個「行」都有一個「標識」。第二個區域可以水平和垂直滾動...滾動垂直滾動兩個區域，因此標識總是與第二個區域中的數據行綁定在一起。

我想我可能能夠嵌入多個scrollviewer控件，但似乎不可能。

有沒有人有任何想法如何或如果這可能？

實施例：

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

所以就永遠保持與上，當整個屏幕被垂直滾動右側的內容的其餘部分對準的編號部分。水平滾動僅影響右側的區域。

Answer 1

試用此XAML代碼。它使用兩個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>