Add a Load More Button at the end of ListBox without losing Virtualization?

Question

I know by editing the ListBox's default style like this, I can have a Button at the very end of the ListBox.

<ScrollViewer x:Name="ScrollViewer" ...> 
    <StackPanel>
        <ItemsPresenter />
        <Button />
    </StackPanel>
</ScrollViewer> 

However, doing this will break the ListBox's Virtualization and the rendering time becomes really long.

All I can think of is,

1. Create a dummy item and add it to the end of my item collection in the viewmodel, and have a Visibility property in the dummy object called ButtonGridVisibility and set it to Visibility.Visible.
2. In my ListBox's ItemTemplate, have two Grids. One displays the normal item layout, the other displays the Load More Button. Then toggle their Visibility based on ButtonGridVisibility property.

This might work but I just wonder if there is any easier/better way?

Answer 1

I know this is an old post but in case some people stumble upon this:

There is a LongListSelector control available out of the box in WP8 or as part of the Windows Phone Toolkit for WP7 which supports this scenario quite neatly. If you want to add specific content after the last item (or before the first item), you can simply set the ListFooter or ListHeader of the control. You can put any content inside and this content will be scrolled accordingly, together with the rest of the items.

So for WP7 this would look like this:

<toolkit:LongListSelector ItemsSource="{Binding Items}">
    <toolkit:LongListSelector.ListFooter>
        <Grid>
            <Button />
        </Grid>
    </toolkit:LongListSelector.ListFooter>
</toolkit:LongListSelector>

where toolkit is xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Answer 2

There are a bunch of extra features these days that can help with this scenario. One of them is the addition of additional visual states on the ScrollViewer added "HorizontalCompression" and "VerticalCompression" visual state groups. By making use of these and hooking into the CurrentStateChanging event, you can load more items as you need to.

Full details of how to implement this can be found on the Silverlight for Windows Phone Performance Team Blog.