WP7 Silverlight Perf Demo 1: VirtualizingStackPanel vs. StackPanel as a ListBox ItemsPanel

  • Article

This is the first in a series of blog posts which run through the demos from my PDC 2010 talk, with small updates and full code download.

The Demo

Download the sample

Load the xap and then compare the two scenarios on the main page. Look out for:

  1. The smoothness (if at all) of the animation in the center of the page (before the listbox shows)
  2. The amount of time it takes to load the listbox
  3. Once the listbox is up, try flicking through it as quickly as possible. See which list creates blank items during flick and which one scrolls smoother.

Takeaway

Startup Memory Scroll
VSP Fast (instantiates 3 screens worth of list items) Less (3 screens worth of UI elements) May have slight jerks / blank items if your templates are heavy and your items can’t be brought in fast enough.
SP Slow (instantiates all items from the get go) More (all elements are loaded at once) Smooth (once loaded)

 

  1. The default ListBox template is VirtualizingStackPanel (VSP). This can be overridden to use a normal StackPanel (SP), or any other container, by using code similar to the following:

     <ListBox.ItemsPanel>
  <ItemsPanelTemplate>
    <StackPanel>
    </StackPanel>
  </ItemsPanelTemplate>
</ListBox.ItemsPanel>

     

  2. VSP will load faster (since it only loads 3 screens worth of items) and use less memory (see: WP7 Perf Tip #_:  Understanding UI Virtualization) but may have more blank items during scroll, especially if your DataTemplate is complex and takes too long to be instantiated for each new item coming in. 

  3. SP will load much slower (since each item is created ahead of time) and use a lot more memory (relative to the number of items) but once loaded will be smoother since there is no extra work that is needed to be done as you scroll through the list.

When Should I Use One Over the Other?

The VSP is the desired Panel for most cases, though for small lists (1 – 200 items) that don’t take up to much memory (don’t forget to measure!) you may find that If you can handle the startup cost, the list will handle a lot better (especially for complex DataTemplates).