Parallelly scrolling two list with each other.

Question

Hi All,
I am new in windows phone 8 development. MY issue is i want to scroll two list simultaneously with other. Means if i scroll first list then other list should be scroll parallelly with first list ,so that we can display data of same index of both list parallelly.
How can achieve this in windows phone 8.
In Android and Iphone they are able to do this features. 
Please help me.
Thanks in advance.

Answer 1

Thanks Vineet for your response.
Can you please show me your xaml code where i have to put scrollviewer in listbox. I am unable to scroll second list with first list. My xaml code is below for first listbox.
<ListBox Grid.Row="1" Background="#1D1C1A" Name="lstChannelList" VerticalAlignment="Top" ItemsSource="{Binding}"
ScrollViewer.VerticalScrollBarVisibility="Visible" SelectionChanged="lstChannelList_SelectionChanged" LayoutUpdated="lstChannelList_LayoutUpdated" >
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer VerticalAlignment="Top" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" >
<StackPanel Orientation="Horizontal">
<Grid Margin="0,0,3,0" Grid.Row="0" Background="{Binding color}" >
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="5"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" Text="{Binding number}" Foreground="{Binding forcolor}" FontWeight="Bold"/>
<TextBlock VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" Text="{Binding channel_name}" Foreground="White" HorizontalAlignment="Left"/>
<StackPanel Grid.Row="1" Grid.ColumnSpan="2" Background="Gray" Width="800" Height="3"/>
</Grid>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
and second list xaml are below.second list data are static.
<ListBox Grid.Row="1" Background="#1D1C1A" Name="lstChannel" VerticalAlignment="Top" ItemsSource="{Binding}"
ScrollViewer.VerticalScrollBarVisibility="Visible" >
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer VerticalAlignment="Top" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Width="480">
<StackPanel Orientation="Vertical">
<Grid Margin="0,0,3,0" Grid.Row="0" Background="{Binding forcolorside}">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="5"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3"/>
</Grid.ColumnDefinitions>
<StackPanel Background="Gray" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" Width="3" />
<Grid Grid.Row="0" Grid.Column="1" Background="{Binding forcolorside}">
<TextBlock VerticalAlignment="Center" Text="Pluto pick's 2014" Foreground="White" TextTrimming="WordEllipsis" HorizontalAlignment="Left"/>
</Grid>
<StackPanel Background="Gray" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right" Width="3" />
<StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="3" Background="{Binding forcolorside}">
<TextBlock VerticalAlignment="Center" Text="Pluto pick's 2014" Foreground="White" TextTrimming="WordEllipsis" HorizontalAlignment="Left"/>
</StackPanel>
<StackPanel Background="Gray" Grid.Row="0" Grid.Column="4" HorizontalAlignment="Right" Width="3" />
<Grid Grid.Row="0" Grid.Column="5" Background="{Binding forcolorside}">
<TextBlock VerticalAlignment="Center" Text="Pluto pick's 2014" Foreground="White" TextTrimming="WordEllipsis" HorizontalAlignment="Left"/>
</Grid>
<StackPanel Background="Gray" Grid.Row="0" Grid.Column="6" HorizontalAlignment="Right" Width="3" />
<Grid Grid.Row="0" Grid.Column="7" Background="{Binding forcolorside}">
<TextBlock VerticalAlignment="Center" Text="Pluto pick's 2014" Foreground="White" TextTrimming="WordEllipsis" HorizontalAlignment="Left"/>
</Grid>
<Grid Background="Gray" Grid.Row="0" Grid.Column="8" HorizontalAlignment="Right" Width="3" />
<Grid Grid.Row="0" Grid.Column="9" Background="{Binding forcolorside}">
<TextBlock VerticalAlignment="Center" Text="Pluto pick's 2014" Foreground="White" TextTrimming="WordEllipsis" HorizontalAlignment="Left"/>
</Grid>
<Grid Background="Gray" Grid.Row="0" Grid.Column="10" HorizontalAlignment="Right" Width="3" />
<StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="11" Background="{Binding forcolorside}">
<TextBlock VerticalAlignment="Center" Text="Pluto pick's 2014" Foreground="White" TextTrimming="WordEllipsis" HorizontalAlignment="Left"/>
</StackPanel>
<Grid Background="Gray" Grid.Row="0" Grid.Column="12" HorizontalAlignment="Right" Width="3" />
<StackPanel Grid.Row="1" Grid.ColumnSpan="13" Background="Gray" Width="500" Height="3"/>
</Grid>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Both list have six rows. and second list i am displaying above first list. So i want to parallelly rotate item of both list if any list scrolling. Please show me your XAML.
I am unable to scroll second list if first list is scrolling above.
Thanks once again vineet.