Virtualization in WPF with VirtualizingStackPanel

First blogged about this on my previous blog site here

 

http://consultingblogs.emc.com/merrickchaffer/archive/2011/02/14/virtualization-in-wpf-with-virtualizingstackpanel.aspx

However, having come across this again today on a project, I thought it was important enough to re-blog!
Finally managed to figure out how to get virtualization to actually behave itself in a listbox wpf control.
Turns out that in order for Virtualization to work, you need three things satisfied.

1) Use a control that supports virtualization (e.g. list box or list view). (see Controls That Implement Performance Features section at bottom of this page for more info http://msdn.microsoft.com/en-us/library/cc716879.aspx#Controls )

2) Ensure that the ScrollViewer.CanContentScroll attached property is set to True on the containing list box / list view control.

3) Ensure that either the list box has a height set, or that it is contained within a parent Grid row, where that row definition has a height set (Height="*" will do if you want it to occupy the Client window height). Note: Do not use height=”Auto” as this will not work, as this instructs WPF to simply size the row to the height needed to fit all the items of the list box in, hence you do not get the vertical scroll bar appearing.

4) Ensure that there is no wrapping ScrollViewer control around the list box, as this will prevent virtualization from occuring.

 

5) Ensure that you use a VirtualizingStackPanel in the ItemsPanelTemplate for the ListBox.ItemsPanel

 

 

Example

<Grid Name="listBoxesGrid"
      Grid.Row="2">
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

  <!-- Target Organizations listbox -->
  <ListBox Name="targetOrganizationsListBox"
           Grid.Column="0"
           HorizontalContentAlignment="Stretch"
           BorderThickness="0"
           Margin="5,10,15,2"
           ScrollViewer.HorizontalScrollBarVisibility="Disabled"
           ScrollViewer.CanContentScroll="True"
           VirtualizingStackPanel.IsVirtualizing="True"
           VirtualizingStackPanel.VirtualizationMode="Recycling"
           SelectionMode="Multiple"
           Width="Auto"
           Background="Transparent"
           ItemTemplate="{DynamicResource TargetOrgContactCard}"
           Height="Auto"
           Expander.MouseDoubleClick="targetOrganizationExpander_MouseDoubleClick"
                      Executed="OnAddToCallList" />
      <CommandBinding Command="local:SearchCoverageCommands.OpenCallDashboard"
                      Executed="OnOpenCallDashboard" />
      <CommandBinding Command="local:SearchCoverageCommands.AddComment"
                      Executed="OnAddComment" />
      <CommandBinding Command="local:SearchCoverageCommands.TargetCompanyChecked"
                      Executed="OnTargetCompanyChecked" />

    </ListBox.CommandBindings>
    <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
          <VirtualizingStackPanel IsVirtualizing="True"
                                  VirtualizationMode="Recycling" />
      </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
  </ListBox>

</Grid>