How to add NEXT and PREVIOUS buttons after all the items to list box in windows phone 8 - xaml

Question

In my windows phone 8 application I'm displaying the result in list box. Every time I'm showing only 20 items in the list.
Now to show the next 20 items i want to add NEXT button and also to show the old items i want to add PREVIOUS buttons.
Below is my code block. In this i'm using the list box inside another list box to show the buttons after the list. But the list is not scrolling.
<Grid x:Name="ContentPanel" Grid.Row="3" Background="White" Margin="0,-3,0,0">
<ListBox x:Name="outerList">
<ScrollViewer Margin="0,0,0,0">
<ListBox x:Name="companiesList" SelectionChanged="companiesList_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="listItem">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<StackPanel x:Name="namePanel" Grid.Row="0" Orientation="Horizontal" Margin="5,0,0,5" Height="50">
<TextBlock x:Name="nameTextBlock" Text="{Binding CompanyName}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="28" MaxHeight="40" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460" FontWeight="Bold"/>
</StackPanel>
<StackPanel x:Name="addressPanel" Grid.Row="1" Orientation="Horizontal" Margin="5,0,0,5" Height="30">
<TextBlock x:Name="addressTextBlock" Text="{Binding Address}" Foreground="#FF1F1F1F" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460"/>
</StackPanel>
<StackPanel x:Name="phonePanel" Grid.Row="2" Orientation="Horizontal" Margin="5,0,0,0" Height="30">
<Image x:Name="phone" Stretch="Uniform" Margin="0,0,0,0" Height="25" Source="Images/list_phone.png" />
<TextBlock x:Name="phoneTextBlock" Text="{Binding Phone1}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Width="460"/>
</StackPanel>
<Image x:Name="line" Grid.Row="3" Width="460" HorizontalAlignment="Center" Source="Images/separator.png" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
<StackPanel Height="50" Orientation="Horizontal">
<Button Content="Previous" Height="70" HorizontalAlignment="Left" Margin="-5,1,0,0" Name="prevbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
</Button.Background>
</Button>
<Button Content="Next" Height="70" HorizontalAlignment="Left" Margin="170,1,0,0" Name="nextbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
</Button.Background>
</Button>
</StackPanel>
</ListBox>
</Grid>
Could you please help me how to add buttons to the list box which is scrollable.

Answer 1

You could put your ListBox inside another ListBox, where the items are the result ListBox and the buttons, e.g:
<Grid x:Name="ContentPanel" Grid.Row="3" Background="White" Margin="0,-3,0,0">
<ListBox x:Name="outerList">
<ListBox x:Name="companiesList" Height="{Binding ActualHeight, ElementName=ContentPanel}" SelectionChanged="companiesList_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="listItem">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<StackPanel x:Name="namePanel" Grid.Row="0" Orientation="Horizontal" Margin="5,0,0,5" Height="50">
<TextBlock x:Name="nameTextBlock" Text="{Binding CompanyName}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="28" MaxHeight="40" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460" FontWeight="Bold"/>
</StackPanel>
<StackPanel x:Name="addressPanel" Grid.Row="1" Orientation="Horizontal" Margin="5,0,0,5" Height="30">
<TextBlock x:Name="addressTextBlock" Text="{Binding Address}" Foreground="#FF1F1F1F" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460"/>
</StackPanel>
<StackPanel x:Name="phonePanel" Grid.Row="2" Orientation="Horizontal" Margin="5,0,0,0" Height="30">
<Image x:Name="phone" Stretch="Uniform" Margin="0,0,0,0" Height="25" Source="Images/list_phone.png" />
<TextBlock x:Name="phoneTextBlock" Text="{Binding Phone1}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Width="460"/>
</StackPanel>
<Image x:Name="line" Grid.Row="3" Width="460" HorizontalAlignment="Center" Source="Images/separator.png" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel Height="50" Orientation="Horizontal">
<Button Content="Previous" Height="70" HorizontalAlignment="Left" Margin="-5,1,0,0" Name="prevbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
</Button.Background>
</Button>
<Button Content="Next" Height="70" HorizontalAlignment="Left" Margin="170,1,0,0" Name="nextbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
</Button.Background>
</Button>
</StackPanel>
</ListBox>
</Grid>
When buttons tapped, you could modify the content of the inner ListBox: