How do I create a split scrolling area on Windows Phone 7

Question

I am taking a look at Windows Phone 7 development and the app I am wishing to create needs to create a view (actually a grid of different width rectangles/areas) which scrolls both vertically and horizontally, but the first column is locked from any horizontal scrolling.

To try and elaborate, the first 'horizontally locked' area is fixed width and has a 'logo' for each 'row' in the second area. The second area can scroll both horizontally and vertically ... scrolling vertically scrolls both areas together so the logo always ties in with the row of data in the second area.

I thought I might be able to embed multiple scrollviewer controls but that doesnt seem possible.

Does anyone have any ideas how or if this may be possible?

Example:

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

So the numbered section above always stays aligned with the rest of the content on the right when the whole screen is vertically scrolled. Horizontal scrolling only affects the area on the right.

Rico Suter Rico Suter · Accepted Answer · 2011-12-17T19:13:50

Try out this XAML code. It uses two ScrollViewer and works for me...

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

How do I create a split scrolling area on Windows Phone 7

1 Answers