Bruno Bruno - 6 months ago 34
C# Question

Load More Data When Scroll to Bottom ListBox Silverlight NOT WP7

I would like to have a listBox that I will fill with items. When the user scrolls to the bottom of the

, the
should be loaded with more items.

There are tons of tutorials for doing this in WP7, but I haven't found anything solid for doing this in a Silverlight web app.

While trying different things out, I managed to create a method that can display a Message when a user scrolls to the bottom of the ListBox. This is more of a proof of concept than a final implementation:

ScrollViewer scrollViewer = new ScrollViewer();
var childScrollViewer = VisualTreeHelper.GetChild(this, 0);
if (childScrollViewer is ScrollViewer)
scrollViewer = (ScrollViewer)childScrollViewer;

if (scrollViewer.VerticalOffset >= scrollViewer.ScrollableHeight)
MessageBox.Show("You're at the bottom!");

I'm currently calling this method from the ListBox's
event. This approach is not ideal since it doesn't account for users clicking on the scrollbar and dragging it down. This implementation is also poor because the message is displayed when the user scrolls to the top or bottom of the listbox.

Here some nice WP7 tutorials I found that I wish could be implemented in a Silverlight web app:

I just need to be pointed in the right direction. Whether it's a tutorial, or a concept I can learn about that might do the trick, or anything else that can help me implement this in a Silverlight web app.


This tutorial saved my life. Here's what I ended up doing:

My ListBox:

<ListBox x:Name="lstEventHistory"
            d:DataContext="{d:DesignData /SampleData/AssetLifeCycleSampleData.xaml}"
            ItemsSource="{Binding Source={StaticResource eventsViewSource}}"
            ScrollViewer.VerticalScrollBarVisibility="Auto" />

This method is called by the ListBox's Loaded event and attaches a custom binding to the ScrollViewer inside the ListBox. This binding will check for changes in the ScrollViwer's VerticalOffset property:

private void initScrollViewerMonitor(object sender, EventArgs e)
           //get the ScrollViewer from the ListBox
           scrollViewer = lstEventHistory.GetScrollHost();

            //attach to custom binding to check if ScrollViewer verticalOffset property has changed
            var binding = new Binding("VerticalOffset") { Source = scrollViewer };
            var offsetChangeListener = DependencyProperty.RegisterAttached(
                new PropertyMetadata(OnScrollChanged));
            scrollViewer.SetBinding(offsetChangeListener, binding);

Finally, this method is called whenever there are changes to the VerticalOffset

public void OnScrollChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        //We have to check if the values are 0.0 because they are both set to this when the scrollviewer loads
        if ((scrollViewer.ScrollableHeight <= scrollViewer.VerticalOffset)
            && (scrollViewer.ScrollableHeight != 0.0 && scrollViewer.VerticalOffset != 0.0))
            //The ScrollBar is at the bottom, load more results.