Add a Download More button at the end of the ListBox without losing virtualization?

Question

I know by editing the default ListBox 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 result in a ListBox virtualization break, and the rendering time will become very long.

All I can think of

• Create a dummy element and add it to the end of my collection of objects in the viewmodel and have the Visibility property in the dummy object named ButtonGridVisibility and set it to Visibility.Visible .
• In my ListBox ItemTemplate use two Grids . One display is the normal layout of the element, the other displays the Load More Button . Then toggle their Visibility based on the ButtonGridVisibility property.

This might work, but I'm just wondering if there is an 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 fairly neatly. If you want to add specific content after the last element (or before the first element), you can simply set the ListFooter or ListHeader of the control. You can put any content inside, and this content will scroll accordingly along with the rest of the elements.

So, for WP7, it will 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

These days there are many additional features that can help in this scenario. One of them is the addition of additional visual states to ScrollViewer with the addition of visual state groups HorizontalCompression and VerticalCompression. Using them and CurrentStateChanging to the CurrentStateChanging event, you can load more elements as you need.

Details on how to implement this can be found in Silverlight for the Team Performance Performance blog.