How to add more than one list box in windows phone 7

Question

In my windows phone 7 app i have to add more than one list box. My requirement is user can scroll the page to see all the items. But i don't know how to add multiple list box in one page. I have try like this.

  <Grid x:Name="testUIContainer" Grid.Row="1" Margin="2,0,2,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ScrollViewer VerticalScrollBarVisibility="Visible" 
              MaxWidth="477">
            <ScrollViewer.Content>
                <StackPanel Margin="0, 30, 0, 0 ">
                    <Rectangle  Height="50" Margin="0,0,0,0" Name="Header" Stroke="Black" StrokeThickness="1" Width="480" Grid.ColumnSpan="2" Fill="#FF01A1DB" />

                    <ListBox Grid.Row="0" ItemsSource="{Binding StudentDetails,Mode=TwoWay}" Margin="0,0,0,0" Name="listBox1" Width="476" BorderBrush="#00410D0D">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Border BorderBrush="Gray" Padding="5" BorderThickness="1">
                                    <StackPanel Orientation="Horizontal" >
                                        <Border BorderBrush="Wheat" BorderThickness="1">
                                            <Image  Name="ListPersonImage" Source="{Binding PersonImage}" Height="100" Width="100" Stretch="Uniform" Margin="10,0,0,0"/>
                                        </Border>
                                        <TextBlock Text="{Binding FirstName}" Name="firstName" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />
                                        <TextBlock Text="{Binding LastName}" Name="lastName" Width="200" Foreground="White" Margin="-200,50,0,0" FontWeight="SemiBold" FontSize="22"  />
                                        <TextBlock Text="{Binding Age}" Name="age" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />

                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>

                    <ListBox Grid.Row="1" ItemsSource="{Binding StudentDetails,Mode=TwoWay}" HorizontalAlignment="Left" Margin="0,0,0,0" Name="listBoxes1" Width="476" BorderBrush="#00410D0D">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Border BorderBrush="Gray" Padding="5" BorderThickness="1">
                                    <StackPanel Orientation="Horizontal" >
                                        <Border BorderBrush="Wheat" BorderThickness="1">
                                            <Image  Name="ListPersonImage" Source="{Binding PersonImage}" Height="100" Width="100" Stretch="Uniform" Margin="10,0,0,0"/>
                                        </Border>
                                        <TextBlock Text="{Binding FirstName}" Name="firstName" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />
                                        <TextBlock Text="{Binding LastName}" Name="lastName" Width="200" Foreground="White" Margin="-200,50,0,0" FontWeight="SemiBold" FontSize="22"  />
                                        <TextBlock Text="{Binding Age}" Name="age" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />

                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>

                </StackPanel>
            </ScrollViewer.Content>
        </ScrollViewer>
    </Grid>
</Grid>

But here i can not see the second list box. This is example only. I have to add 4 to 5 list box in a page. Please let me know how to add multiple list box in one page. Or there is any other option to show the list of items.

My Requirment:-

Answer 1

Finally i have find the answer..!!

 <Grid Background="Transparent"  x:Name="testUIContainer" Margin="2,0,2,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Visible">
        <ScrollViewer.Content>
            <StackPanel>
                <!--Name of the Person-->
                <Border BorderBrush="Chocolate" Padding="5" BorderThickness="2">
                    <StackPanel>
                        <Image Height="100" Width="100" Margin="-360,0,0,0" Source="/NewExample;component/Images/icon_man.png" />
                        <TextBlock Text="Name of the Person" Margin="50,-120,0,0" Width="300" Height="50" FontWeight="Bold" FontSize="26" />

                    </StackPanel>
                </Border>
                <!--Horizaondal list Box-->
                <ListBox Height="120" Margin="0,0,0,6" Name="imageListBox" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Visible" Width="476" ItemsSource="{Binding StudentDetails, Mode=TwoWay}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border BorderBrush="Gray" Padding="5" BorderThickness="1">
                                <StackPanel Orientation="Horizontal">
                                    <Border BorderBrush="Wheat" BorderThickness="1" Padding="5">
                                        <Image  Name="ListPersonImage" Source="{Binding PersonImage}" Height="100" Width="100" Stretch="Uniform" Margin="10,0,0,0"/>
                                    </Border>
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    <ListBox.ItemsPanel >
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"></StackPanel>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>

                <!--List Box one.-->
                <ListBox  ItemsSource="{Binding StudentDetails,Mode=TwoWay}" Margin="0,0,0,0" Name="listBox1" Width="476" BorderBrush="#00410D0D" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border BorderBrush="Gray" Padding="5" BorderThickness="1">
                                <StackPanel Orientation="Horizontal" >
                                    <Border BorderBrush="Wheat" BorderThickness="1">
                                        <Image  Name="ListPersonImage" Source="{Binding PersonImage}" Height="100" Width="100" Stretch="Uniform" Margin="10,0,0,0"/>
                                    </Border>
                                    <TextBlock Text="{Binding FirstName}" Name="firstName" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />
                                    <TextBlock Text="{Binding LastName}" Name="lastName" Width="200" Foreground="White" Margin="-200,50,0,0" FontWeight="SemiBold" FontSize="22"  />
                                    <TextBlock Text="{Binding Age}" Name="age" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>


                <!--List Box two.-->
                <ListBox ItemsSource="{Binding StudentDetails,Mode=TwoWay}" HorizontalAlignment="Left" Margin="0,0,0,0" Name="listBoxes1" Width="476" BorderBrush="#00410D0D" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border BorderBrush="Blue" Padding="5" BorderThickness="1">
                                <StackPanel Orientation="Horizontal" >
                                    <Border BorderBrush="Blue" BorderThickness="1">
                                        <Image  Name="ListPersonImage" Source="{Binding PersonImage}" Height="100" Width="100" Stretch="Uniform" Margin="10,0,0,0"/>
                                    </Border>
                                    <TextBlock Text="{Binding FirstName}" Name="firstName" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />
                                    <TextBlock Text="{Binding LastName}" Name="lastName" Width="200" Foreground="White" Margin="-200,50,0,0" FontWeight="SemiBold" FontSize="22"  />
                                    <TextBlock Text="{Binding Age}" Name="age" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22"  />
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
                <!--Similar Apps/Images.-->
                <Image Source="/NewExample;component/Images/Hydrangeas.jpg" Margin="0,0,0,0" />


            </StackPanel>
        </ScrollViewer.Content>
    </ScrollViewer>
</Grid>

I have disable the list box ScrollViewer.VerticalScrollBarVisibility="Disabled" Here only one row definition. ScrollViewer will be in Grid.Row="0"

Now i can scroll all the list boxes, and can add many items in the scroll Viewer.

Thank you to all for giving a valuable tips..!!

Answer 2

For each listbox set the property :

ScrollViewer.VerticalScrollBarVisibility="Disabled" 

Answer 3

I saw 2 options :

You can merge/concat both list in backend, then display it in your view.

var result = list1.Concat(list2);

You can use another UI. For example, a PivotItem could be fit in you case. User could switch from a ListBox to another with horizontal thumb's move.