Windows phone LonglistSelector not rendering all items

Question

I'm struggling with a longlistselector and item realized event. The problem I'm facing is that the longlistselector does not show all elements.

The code I'm doing is not using MVVM (I know that I should use, but in this scenario I can't...it was heritage code).

This is what I have:

XAML:

    <Scrollviewer>
<stackpanel>
        <phone:LongListSelector Margin="0,15,0,0"  ScrollViewer.VerticalScrollBarVisibility="Visible" x:Name="LBhistory" LayoutMode="List"  
BorderThickness="0,15,0,0" >
        <phone:LongListSelector Margin="0,15,0,0"  ScrollViewer.VerticalScrollBarVisibility="Visible" x:Name="LBDevices" LayoutMode="List"  BorderThickness="0,15,0,0" >
        <phone:LongListSelector Margin="0,15,0,0"  ScrollViewer.VerticalScrollBarVisibility="Visible" x:Name="LBfiles" LayoutMode="List"  BorderThickness="0,15,0,0" >
</stackpanel>
    </ScrollViewer>

CS file:

private bool _isLoadingAllFile;
private int _pageNumber = 0;
private ObservableCollection<PhotoObject> allFiles = new ObservableCollection<PhotoObject>();

public BackupPivotPage()
{
   ....

   this.Loaded += PivotPage_Loaded;
}

private void PivotPage_Loaded(object sender, RoutedEventArgs e)
{
   LBfiles.ItemsSource = allFiles;
   LBfiles.ItemRealized += LBfiles_ItemRealized;

   searchImages(_pageNumber++);
}

private void searchImages(int p)
{
   _isLoadingAllFile = true;

   var x = dbAllFiles.Skip(p * GlobalSettings.PageSize.myPictures)
              .Take(GlobalSettings.PageSize.myPictures);
   foreach (var toAddObject in x)
   {
      this.allFiles.Add(toAddObject);
   }

   _isLoadingAllFile = false;
}

void LBfiles_ItemRealized(object sender, ItemRealizationEventArgs e)
{
   try
   {
      if (!_isLoadingAllFile && LBfiles.ItemsSource != null &&
          LBfiles.ItemsSource.Count >= Constants.offsetKnob)
      {
         if (e.ItemKind == LongListSelectorItemKind.Item)
         {
            if ((e.Container.Content as PhotoObject)
               .Equals(LBfiles.ItemsSource[LBfiles.ItemsSource.Count - Constants.offsetKnob]))
            {
               searchImages(this._pageNumber++);
            }
         }
      }
   }
   catch (Exception e1)
   {

   }
}

Right now my problem is that I know that allFiles has 96 elements, but only 67 are shown and the rest appear as white...any idea why?

EDIT I've update with the scrollviewer...because I've 3 longlistselectors in the same page...and only this last one doesn't show all the items.

Answer 1

The problem seems to be around the time with which the data is loaded (or the thread). The ItemRealised event happens on a Background Thread therefore isn't able to update the User interface. In the example reference below they perform a similar operation to yours but retrieve the data using Deployment.Current.Dispatcher. This is used to do the work on the UI thread.

Try something similar to the following:

Try
{
    Deployment.Current.Dispatcher.BeginInvoke(() =>
    {
       var x = dbAllFiles.Skip(p * GlobalSettings.PageSize.myPictures)
              .Take(GlobalSettings.PageSize.myPictures);
       foreach (var toAddObject in x)
       {
          this.allFiles.Add(toAddObject);
       }
       IsLoading = false;
    });
}
catch (Exception e)
{
   Deployment.Current.Dispatcher.BeginInvoke(() =>
   {
    MessageBox.Show("Network error occured " + e.Message);
   });
}

TwitterSearch - Windows Phone 8 LongListSelector Infinite Scrolling Sample