Luqman Marzuki

Luqman Marzuki writes about anything



Windows 8 Metro App Infinite Scrolling Listview

Windows 8 Metro App Infinite Scrolling Listview

Tips to make the ListView in Windows 8 Store Metro app to scroll infinitely by loading more data (or load the next page) when the user scrolls down or left to the last item shown.

First, incorporate the latest jQuery to your app.

Check if your app is running normally after you embed the jQuery script. Because mine not. I had to use a modified jQuery script to make it compatible. In any case you have the same problem as moi, here's the link: http://www.incloud.de/2012/08/windows-8-using-jquery-for-app-development/

Second, detect when user scrolls to the end of the scrollbar.

With the various views that the Windows Store Metro app provides, we have to tackle both horizontal and vertical kind of scroll bar. I presume you would already knew that the standar Metro app layout stretches to the right. But in the Snapped View mode, the layout change its orientation to stretch to the bottom because the width became narrower.

With jQuery scroll event handler, bind it to the Listview container. You probably should know first the html layout that Windows Store App generate for its ListView elements here. Notice that the class name applied for the viewport is based on its scrolling directions. Based on that, make the scroll-to-end detector for both horizontal and vertical scrollbars.

For Horizontal Scrollbars:

$('.win-horizontal').scroll(function () {
   var elementWidth = $('.win-surface').width() - $('.win-horizontal').width();
   if ($('.win-horizontal').scrollLeft() == elementWidth) {
     // Load next page
     loadNextPage();
    }
});

For Vertical Scrollbars:

$('.win-vertical').scroll(function () {
var elementHeight = $('.win-surface').height() - $('.win-vertical').height();
 if ($('.win-vertical').scrollTop() == elementHeight) {
 // Load next page
 loadNextPage();
 }
}); 

This will work with one ListView element on a page. If you have more than one, please modify the element selector accordingly.

Last, load more data into the ListView.

Just push the data to the variable that you have bind for the ListView data source. If, for example, you had assign listItems like this:

listItems = new WinJS.Binding.List( exampleDatas() );

then to load more data to it, use:

listItems.push(array('title'=>'The Title')); 

That's all the gist to it. I know my website styling isn't easy to read (I really want to update this old site, honestly!). You definitely want to check the full source code that I have uploaded to the Microsoft website for more clarity:

http://code.msdn.microsoft.com/windowsapps/Horizontal-Infinite-d9b39e21/

Note: This tip is only useful if you develop the Metro App with HTML/CSS/Javascript combination only, sorry!