title: Xamarin.Forms implement Lazy Loading in CollectionView
body: <p>This is my CollectionView xaml file:</p>
  <pre><code>    &lt;ContentPage.Content&gt;
          &lt;Grid&gt;
              &lt;StackLayout&gt;
                  &lt;RefreshView IsRefreshing=&quot;{Binding IsRefreshing, Mode=OneWay}&quot;
               Command=&quot;{Binding LoadRefreshCommand}&quot;&gt;
                      &lt;CollectionView ItemsSource=&quot;{Binding Photos}&quot; SelectedItem=&quot;{Binding SelectedPhoto}&quot; RemainingItemsThreshold=&quot;10&quot; RemainingItemsThresholdReachedCommand=&quot;{Binding LoadNewPhotosCommand}&quot; &gt;
                          &lt;CollectionView.ItemTemplate&gt;
                              &lt;DataTemplate&gt;
                                  &lt;Frame BorderColor=&quot;#3498DB&quot;&gt;
                                      &lt;Grid  RowSpacing=&quot;0&quot; ColumnSpacing=&quot;0&quot; Padding=&quot;0&quot;&gt;
                                          &lt;Grid.ColumnDefinitions&gt;
                                              &lt;ColumnDefinition Width=&quot;*&quot;/&gt;
                                              &lt;ColumnDefinition Width=&quot;3*&quot;/&gt;
  
                                          &lt;/Grid.ColumnDefinitions&gt;
                                          &lt;Grid.GestureRecognizers&gt;
                                              &lt;TapGestureRecognizer  Command=&quot;{Binding Source={x:Reference CurrentPage}, Path=BindingContext.LoadPhotosCommand}&quot; /&gt;
                                          &lt;/Grid.GestureRecognizers&gt;
                                          &lt;Image Aspect=&quot;AspectFit&quot; HeightRequest=&quot;50&quot; Source=&quot;{Binding Url}&quot;  Grid.Column=&quot;0&quot;&gt;&lt;/Image&gt;
                                          &lt;Frame HasShadow=&quot;False&quot; VerticalOptions=&quot;Center&quot;  Grid.Column=&quot;1&quot;&gt;
                                              &lt;Label Text=&quot;{Binding Title}&quot;&gt;&lt;/Label&gt;
                                          &lt;/Frame&gt;
                                      &lt;/Grid&gt;
                                  &lt;/Frame&gt;
                              &lt;/DataTemplate&gt;
                          &lt;/CollectionView.ItemTemplate&gt;
                      &lt;/CollectionView&gt;
                  &lt;/RefreshView&gt;
              &lt;/StackLayout&gt;
              &lt;StackLayout HorizontalOptions=&quot;CenterAndExpand&quot; VerticalOptions=&quot;Center&quot;&gt;
                  &lt;Frame IsVisible=&quot;{Binding IsBusy}&quot; BorderColor=&quot;#3498DB&quot; HasShadow=&quot;False&quot; BackgroundColor=&quot;#eeeeee&quot;&gt;
                      &lt;StackLayout&gt;
                          &lt;ActivityIndicator IsVisible=&quot;{Binding IsBusy}&quot; IsRunning=&quot;{Binding IsBusy}&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot;&gt;&lt;/ActivityIndicator&gt;
                          &lt;Label TextColor=&quot;#3498DB&quot; Text=&quot;Loading Data, Please Wait...&quot; HorizontalTextAlignment=&quot;Center&quot; VerticalTextAlignment=&quot;Center&quot; HorizontalOptions=&quot;Center&quot; VerticalOptions=&quot;Center&quot; IsVisible=&quot;{Binding IsBusy}&quot;/&gt;
                      &lt;/StackLayout&gt;
                  &lt;/Frame&gt;
              &lt;/StackLayout&gt;
          &lt;/Grid&gt;
      &lt;/ContentPage.Content&gt;
  </code></pre>
  <p>This is the constructor in the ViewModel:</p>
  <pre><code>        public MainPageViewModel()
          {
              LoadPhotosCommand = new Command(execute: async () =&gt; await ExecuteGetAllPhotos());
              LoadRefreshCommand = new Command(execute: async () =&gt; await ExecuteRefreshGetAllPhotos());
              LoadRefreshCommand = new Command(execute: async () =&gt; await ExecuteGetNewPhotos());
              Photos = new ObservableCollection&lt;Photo&gt;();
              PhotosModel = new PhotosModel();
              SelectedPhoto = new Photo();
          }
  </code></pre>
  <p>This is the code in the ViewModel how i get the data:</p>
  <pre><code>        async Task ExecuteGetAllPhotos()
          {
              if (IsBusy)
                  return;      
              try
              {
                  IsBusy = true;
                  Photos.Clear();
                  PhotosModel = await InstagramCloneDataStore.GetAllPhotos();
                 if(PhotosModel!=null)
                  {
                      foreach (var photo in PhotosModel.Photos)
                      {
                         Photos.Add(photo);                      
                      }
                  }
              }
              catch (Exception ex)
              {
                  Debug.WriteLine(ex);
                  var msg = ex.Message;
              }
              finally
              {
                  IsBusy = false;
              }
          }
  </code></pre>
  <p>This code work perfectly fine when a read 100,200,500 data entries.But when i read 5000 data entries the app got freezed and want to make a force stop. It wait about 2-3minutes to show the data. So i want to implement some logic for Lazy loading or Infinity scrolling.
  This is the command functionfor <code>RemainingItemsThresholdReachedCommand</code> and logic should be writen for scrolling data:</p>
  <pre><code>        async Task ExecuteGetNewPhotos()
          {
              if (IsBusy)
                  return;
              try
              {
  //some logic here----------&gt;
                  IsBusy = true;
                  Photos.Clear();
                  PhotosModel = await InstagramCloneDataStore.GetAllPhotos();
                  if (PhotosModel != null)
                  {
                      foreach (var photo in PhotosModel.Photos)
                      {          
                      }
                  }
              }
              catch (Exception ex)
              {
                  Debug.WriteLine(ex);
                  var msg = ex.Message;
              }
              finally
              {
                  IsBusy = false;
              }
          }
  </code></pre>
  <p>I don't understand how lazy loading or scrolling working. Can someone help?</p>