WPF Virtualization

In one of my previous WPF projects, we used Datagrid to represent the data which contained a large collection data source. This would slow down the application and also sometime UI became unresponsive. Then when I tried to find the solution for that, the actual problem was standard layout system creates a layout container for each item associated with the control, and computes its layout size and position. Typically, you do not have to display all the items at the same time; instead you display a subset, and the user scrolls through the datagrid. In this case, it makes sense to use UI virtualization, which means the item container generation and associated layout computation for an item is deferred until the item is visible. The same problem holds good to other controls like ListView, ItemsControl and Combobox controls.

Imagine a Listbox which is bound to a huge collection around 1,00,000 items (just a number to represent the large collection). In that case the system has to create 1,00,00 UI objects on the screen which results in performance slow down and more memory consumption. Furthermore if this ListboxItem is templated with other controls like Border and TextBlock with that, it would still create a more problem. This becomes an expensive process in terms of performance. In order to solve this problem (i,e performance and memory consumption) Microsoft came up with something called Virtualization.

Virtualization helps you allowing bind the huge collection data at the same time it only enables the control to show a subset of the collection( only around 30 or 40 items will be visible on UI) and it pretends other things to be there and pops up on UI only when required(i,e when you scroll, the next items would be rendered on the screen). This virtaulization is by default enabled in WPF.

How do we use the Virtualization Property?

<ListBox ItemsSource="{Binding LargeList}” VirtualizingStackPanel.IsVirtualizing="false" />

IsVirtualizing is an attached property provided by VirtualizingStackPanel class. By default it is always true. The VirtualizingStackPanel calculates the number of visible items and helps in creating UI elements only for visible items. The IsVirtualizing property of the VirtualizingStackPanel activates the virtualization.

The VirtualizingStackPanel is responsible for creating the item container for the items that are visible on UI and the rest one(like the items that are scrolled) are created on demand whenever needed. In order to improve the performance (instead of creating a new one every time on demand), the item container creation can be recycled. This recycling in WPF can be done by using VirtualizationModel property setting to “Recyling”.

Following is the example as how to use it.

<Listbox VirtualizingStackPanel.VirtualizationMode="Recycling" Height="200" Width="200"></Listbox>