September 11, 2010 / slimcode

Detect when a ListBox scrolls to its end (WP7)

I wanted to fetch and add new items to a ListBox when it scrolls to its end, to reproduce infinite scrolling.

Fellow tweep @GaryGJohnson pointed me to the ScrollViewer’s VerticalOffset, ExtentHeight and ViewportHeight, which would give me all the maths I needed.

Unfortunately, there it no scrolling events available, either on the ListBox or the inner ScrollViewer. From what I understand, I could have received change notifications directly from the ScrollViewer’s VerticalOffset property if I were to work with SL4, but not with SL3 on Windows Phone 7. My friend Jacques came to the rescue! He suggested I create myself a custom DependencyProperty with a changed notification, and bind it to the ScrollViewer’s VerticalOffset.

My ListBox declaration
<ListBox x:Name="businessesListBox" 
          ItemsSource="{Binding Listings}" 
          ItemTemplate="{StaticResource ListingItemTemplate}" 
          SelectionChanged="businessesListBox_SelectionChanged" 
          Style="{StaticResource BusinessListBoxStyle}" />

From Blend, I right-clicked my ListBox, chose “Edit Template” –> “Edit a copy” to add that BusinessListBoxStyle, and added a handler for the ScrollViewer’s Loaded event.

My ListBox’ Style
<Style x:Key="BusinessListBoxStyle" TargetType="ListBox">
     <Setter Property="Background" Value="Transparent"/>
     <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
     <Setter Property="BorderThickness" Value="0"/>
     <Setter Property="BorderBrush" Value="Transparent"/>
     <Setter Property="Padding" Value="0"/>
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="ListBox">
                 <ScrollViewer x:Name="scrollViewer" 
                               BorderBrush="{TemplateBinding BorderBrush}" 
                               BorderThickness="{TemplateBinding BorderThickness}" 
                               Background="{TemplateBinding Background}" 
                               Foreground="{TemplateBinding Foreground}" 
                               Padding="{TemplateBinding Padding}" 
                               Loaded="ScrollViewer_Loaded">
                     <ItemsPresenter/>
                 </ScrollViewer>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>

I created a custom property in my PhoneApplicationPage.

My custom property
public static readonly DependencyProperty ListVerticalOffsetProperty = DependencyProperty.Register(
"ListVerticalOffset",
typeof( double ),
typeof( SearchBusinessResultsPage ),
new PropertyMetadata( new PropertyChangedCallback( OnListVerticalOffsetChanged ) ) );
 public double ListVerticalOffset
 {
   get { return ( double )this.GetValue( ListVerticalOffsetProperty ); }
   set { this.SetValue( ListVerticalOffsetProperty, value ); }
 }

From the ScrollViewer’s Loaded handler, I just need to bind my custom property to to the ScrollViewer’s VerticalOffset. Notice I keep a reference on the ScrollViewer, since it’s in a ContentTemplate.

ScrollViewer’s Loaded handler
private ScrollViewer _listScrollViewer;
 private void ScrollViewer_Loaded( object sender, RoutedEventArgs e )
 {
   _listScrollViewer = sender as ScrollViewer;
   Binding binding = new Binding();
   binding.Source = _listScrollViewer;
   binding.Path = new PropertyPath( "VerticalOffset" );
   binding.Mode = BindingMode.OneWay;
   this.SetBinding( ListVerticalOffsetProperty, binding );
 }

The final job is to verify how far the scrolling is every time my custom property changes (thus every time the ScrollViewer’s VerticalOffset changes). I also make sure not to trigger updates more than once per ScrollableHeight.

Scrolled to the bottom?
private double _lastFetch;
 private static void OnListVerticalOffsetChanged( DependencyObject obj, DependencyPropertyChangedEventArgs e )
 {
   SearchBusinessResultsPage page = obj as SearchBusinessResultsPage;
   ScrollViewer viewer = page._listScrollViewer;
   if( viewer != null )
   {
     if( page._lastFetch < viewer.ScrollableHeight )
     {
       // Trigger within 1/4 the viewport.
       if( viewer.VerticalOffset >= viewer.ScrollableHeight – viewer.ViewportHeight / 4 )
       {
         page._lastFetch = viewer.ScrollableHeight;
         this.ViewModel.FetchNextPage();
       }
     }
   }
 }

As you can see, you can adjust how close to the end you trigger an update. There is one final gotcha you much be warned of. Make sure your “FetchNextPage” equivalent prevents reentrancy, just in case adding a new item to your bound collection causes the OnListVerticalOffset event to fire (we never know) and another fetch is triggered.

About these ads