how can i add load more for my list box when we scrolling list box in windows phone 8.1 apps - xaml

Question

how can i display 5 items when we scrolling i want load more.
<ListBox.ItemTemplate>
<DataTemplate >
<Border BorderThickness="0,0,0,1" BorderBrush="Black"
HorizontalAlignment="Stretch" Width="400"
Margin="-8,0,-8,0">
<Grid Height="130"
RenderTransformOrigin="0.37,0.52">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Left"
Height="104"
Grid.Row="0"
VerticalAlignment="Top"
Width="115" Background="White"
Margin="05,-4,0,0">
<Image Source="{Binding company_logo}" Stretch="None"
Margin="10,0,0,0"/>
</Grid>
<Grid Height="104" HorizontalAlignment="Right"
Grid.Row="0"
VerticalAlignment="Top" Width="280"
Background="White" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="307*"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left"
Margin="0,0,0,0"
TextWrapping="Wrap"
Text="{Binding product_name}"
VerticalAlignment="Top"
FontSize="20"
Foreground="Orange"
Grid.Column="1"/>
<TextBlock Text="Reviews:"
Margin="97.5,27,125,51"
Grid.Column="1"/>
<TextBlock HorizontalAlignment="Left"
Margin="145,30,0,0"
TextWrapping="Wrap"
Text="{Binding product_reviews}"
VerticalAlignment="Top"
FontSize="10" Width="50"
Foreground="Orange"
Grid.Column="1"/>
<TextBlock Text="Rating:" FontSize="15"
Margin="0,25,232,51"
Grid.Column="1"/>
<TextBlock HorizontalAlignment="Left" Margin="50,30,0,0"
TextWrapping="Wrap" Text="{Binding product_rating}"
VerticalAlignment="Top" FontSize="10"
Foreground="Black" Grid.Column="1"/>
<Image Source="Assets/clock-icon.png" Margin="165,25,0,0" Width="25" Height="25"/>
<TextBlock Text="Created Date" FontSize="10"
Margin="155,29,70,62" Foreground="Red"
Grid.Column="1"/>
<TextBlock HorizontalAlignment="Left" Width="59"
Margin="218,29,0,0"
TextWrapping="Wrap"
Text="{Binding created_date}"
VerticalAlignment="Top" FontSize="10"
Foreground="Black"
Grid.Column="1" Height="13">
</TextBlock>
<TextBlock Text="Updated Date:" FontSize="10"
Margin="155,39,70,52" Foreground="Red"
Grid.Column="1"/>
<TextBlock HorizontalAlignment="Left" Width="59"
Margin="218,39,0,0"
TextWrapping="Wrap"
Text="{Binding updated_date}"
VerticalAlignment="Top" FontSize="10"
Foreground="Black"
Grid.Column="1" Height="13">
</TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="3,58,0,0" TextWrapping="Wrap"
Text="{Binding product_description}"
VerticalAlignment="Top" FontSize="10"
Foreground="Black" Height="40"
Width="293" Grid.Column="1" />
</Grid>
<TextBlock HorizontalAlignment="Left" Margin="15,100,0,0"
TextWrapping="Wrap" Width="250"
Text="{Binding companyName}"
VerticalAlignment="Top" FontSize="15"
Foreground="Black"/>
<Button Content="Contact" Foreground="Red"
FontSize="10"
Margin="120,88,-29,440.667"
Height="25" Grid.Column="1"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and my code is below
List<products> products1 = new List<products>();
try
{
using (HttpClient client = new HttpClient())
{
client.BaseAddress = new Uri("something");
var url = "data/getProductsData";
Parameters product = new Parameters();
product.user_id = "1";
product.platform = "Android";
string json = JsonConvert.SerializeObject(product);
StringContent queryString = new StringContent(json);
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage response = await client.PostAsync(url, queryString);
if (response.IsSuccessStatusCode)
{
var data = response.Content.ReadAsStringAsync();
Response my = JsonConvert.DeserializeObject<ResponseWrapper>(data.Result.ToString()).response;
LoadingBar.IsEnabled = true;
LoadingBar.Visibility = Visibility.Visible;
var myData =data.Result.ToString();
//await new MessageDiaglog("Data Loaded!").ShowAsync();
LoadingBar.IsEnabled = false;
LoadingBar.Visibility = Visibility.Collapsed;
foreach (var item in my.content.products)
{
products1.Add(item);
}
}
lstbox.ItemsSource = products1;
}
}
catch (Exception ex)
{
MessageDialog message = new MessageDialog(ex.Message);
message.ShowAsync();

Answer 1

first of all :
1- change this line
List<products> products1 = new List<products>();
with this
public static ObservableCollection<products> products1 = new ObservableCollection<products>();
2- get scrolling postion of your listbox
public static ScrollViewer GetScrollViewer(DependencyObject dpj)
{
if (dpj is ScrollViewer) return dpj as ScrollViewer;
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(dpj); i++)
{
var child = VisualTreeHelper.GetChild(dpj, i);
var result = GetScrollViewer(child);
if (result != null)
{
return result;
}
}
return null;
}
3- create a handler of listbox_loaded.
private void lstsource_Loaded(object sender, RoutedEventArgs e)
{
ScrollViewer viewer = GetScrollViewer(this.lstsource);
viewer.ViewChanged += lstSoucrce_ViewChanged;
}
4- on view changed ...
private async void lstSoucrce_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
var sv = (ScrollViewer)VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(this.lstsource, 0), 0);
var verticaloffset = sv.VerticalOffset;
var maxVerticleOffset = sv.ScrollableHeight;
if (maxVerticleOffset < 0 || verticaloffset == maxVerticleOffset)
{
//this will fired up when you will reach end of list
//load your more data here
}