Как создать разделенную область прокрутки в Windows Phone 7

Question

Я смотрю на разработку для Windows Phone 7 и приложение, которое я хочу создать, должно создать представление (фактически сетку прямоугольников / областей различной ширины), которое прокручивается как по вертикали, так и по горизонтали, но первый столбец заблокирован. с любой горизонтальной прокрутки.

Чтобы попытаться уточнить, первая «горизонтально заблокированная» область имеет фиксированную ширину и имеет «логотип» для каждой «строки» во второй области. Вторая область может прокручивать как по горизонтали, так и по вертикали ... прокрутка по вертикали прокручивает обе области вместе, поэтому логотип всегда связывается со строкой данных во второй области.

Я думал, что смогу встроить несколько элементов управления прокрутки, но это не представляется возможным.

У кого-нибудь есть идеи, как или если это возможно?

Пример:

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