Virtualization in WPF Using VirtualizingStackPanel

Introduction

Virtualization technique in WPF improves the rendering performance of UI elements. By applying virtualization, the layout system ensures that only the visible items of a container are rendered on the screen. For example, a list control may have thousands of items but virtualization will reduce the rendering to the visible items only.

VirtualizingStackPanel

The VirtualizingStackPanel control in WPF is used to implement virtualization. The IsVirtualizing property of the VirtualizingStackPanel activates the virtualization. By default, the IsVirtualizing property is set to true. When IsVirtualizing is set to false, a VirtualizingStackPanel behaves the same as an ordinary StackPanel.

The VirtualizingStackPanel calculates the number of visible items and works with the ItemContainerGenerator from an ItemsControl to create UI elements only for visible items. The following code snippet creates a VirtualizingStackPanel.

<VirtualizingStackPanel Width="300" Height="200" />

The VirtualizingStackPanel.VirtualizationMode property has two values, Standard and Recycling. The default value of VirtualizationMode is Standard and means that the VirtualizingStackPanel creates an item container for each visible item and discards it when it is no longer needed (such as when the item is scrolled out of view). When an ItemsControl contains many items, the process of creating and discarding item containers can degrade performance. In that case, using the Recycling reuses item containers instead of creating a new one each time.

In XAML, the VirtualizingStackPanel element represents a VirtualizingStackPanel control. The following code snippet creates a VirtualizingStackPanel and sets its VirtualizationModel to Recycling.

<VirtualizingStackPanel Width="300" Height="200" VirtualizationMode="Recycling"/>

Virtualization can be applied to a container control by directly setting the VirtualizingStackPanel.VirtualizationMode property. The code snippet in Listing 1 creates a ListBox control and sets its VirtualizationMode to Recycling.

 

<StackPanel>
<ListBox x:Name="listBox" HorizontalAlignment="Left" Height="193.333" Margin="20,20,0,0"
VerticalAlignment="Top" Width="400.666" Background="#FFF5BDBD"
VirtualizingStackPanel.VirtualizationMode="Recycling"/>
<Button x:Name="LoadDataButton" Content="Load Data" HorizontalAlignment="Left"
Margin="20,18.666,0,0" VerticalAlignment="Top" Width="120.333" Height="29.667"
Click="LoadDataButton_Click"/>
</StackPanel>

 

Listing 1

The supporting code is shown in Listing 2 that creates a data collection and binds the ListBox.ItemsSource property to the data collection.

 

private void LoadDataButton_Click(object sender, RoutedEventArgs e)
{
 listBox.ItemsSource = GetDataSet();
}

public ArrayList GetDataSet()
{
 ArrayList items = new ArrayList();
 for (var count = 0; count < 10000; ++count)
  {
    items.Add(string.Format("Item {0}", count));
  }
  return items;
 }
}

 

Listing 2

Summary

In this article, I discussed the concept of virtualization in WPF and how to implement it using a VirtualizingStackPanel.