WPF Layout: VirtualizingStackPanel

Proper layout and positioning are a vital part of interactive, high-performance and user-friendly Windows applications. This series of articles explain the layout process in WPF. The series starts with an understanding of the WPF layout process. The next part of this series will cover the basics of layout and positioning such as size, margin, padding and alignment of elements. Later in this series, I will cover various panels and related parent controls available in WPF.

Table of Contents

• WPF Layout System: An Introduction
• WPF Layout: Size, Width and Height
• WPF Layout: Margins
• WPF Layout: Horizontal and Vertical Alignment
• WPF Layout: Content Alignments
• WPF Layout: Dealing with Percentage Size in WPF
• WPF Layout: Panels
• WPF Layout: Canvas
• WPF Layout: DockPanel
• WPF Layout: Grid
• WPF Layout: StackPanel
• WPF Layout: WrapPanel
• WPF Layout: Border
• WPF Layout: VirtualizingStackPanel

Introduction

In the previous article, WPF Layout: Border, we discussed how to place borders around WPF elements.

Virtualization 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 implements 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. That 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 reduce 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 listed 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.