Friday, May 6, 2011

Virtualizing Stack Panel in WPF



To understand Virtualizing Stack Panel first we should understand about what is Virtualization in WPF.

Virtualization in WPF

In Virtualization, elements are created and maintained when they are visible. This also called as UI Virtualization in WPF. Let’s understand with an example.
Let’s assume we have Listbox control with 1 million items and we can see only 10 items at a time. So the only 10 items which are currently visible will get created and maintained by the Listbox. So instead of 1 million items loaded at a time on listbox control it loads only 10 items which are visible. This concept is called as UI Virtualization in WPF. By using Virtualization you will get better performance. In our example you can find performance improvements in loading of data and scrolling of items in listbox. 

VirtualizingStackPanel in WPF

The feature of Virtualization is implemented in VirtualizingStackPanel. It will work similar to the StackPanel and also virtualized its child items too.

By default VirtualizingStackPanel is implemented on ListBox, ListView and TreeView. You can manually enable or disable virtualization on Listbox control by setting VirtualizingStackPanel.IsVirtualizing property. Internally VirtualizingStackPanel creates item container for each visible item. When item is not visible it destroys that item container. So some times with huge data it is very expensive task to create and destroy item container for each visible item.

In dotnet framework 3.5 SP1 Microsoft introduced VirtualizationMode. If you set VirtualizingStackPanel.VirtualizationMode = “Recycling” then each container will get reuse instead of destroy. You will get better performance by specifying VirtualizationMode to Recycling then basic default virtualization. If you don’t specify VirtualizationMode then it will use default basic virtualization.

If you want to create your own Virtualization panel then you can use VirtualizingPanel class available in WPF. But in this case you have to write your own custom logic for creating and maintaining items inside your panel and also need to write logic to remove item once it goes out of scope.

<ListBox Name="ListBoxWithVirtualization" Height="100" Margin="5"
         VirtualizingStackPanel.IsVirtualizing="True"
         VirtualizingStackPanel.VirtualizationMode="Recycling" />


for (int i = 0; i < 1000000; i++)
    ListBoxWithVirtualization.Items.Add("Item - " + i.ToString());

As per above example, you can measure performance when items are loading into Listbox and after loading check scrolling performance of Listbox items as well. Now set IsVirtualizing property to false and measure the same. You will get better performance when IsVirtualizing property set to True.

4 comments:

  1. This is a nice article..
    Its very easy to understand ..
    And this article is using to learn something about it..
    asp.net, c#, javascript
    Thanks a lot..!

    ReplyDelete
  2. fabulous...!!! nice article... i read lots of articles regarding virtualization in wcf but it is jst awesome...!!!!
    any ways keep up the work...!

    ReplyDelete
  3. Now finally this concept got cleared to me. I have read many article but they showed very typical way. Thanks for sharing such a hard topic in very simple way. keep writing : Ankit Kumar Singh

    ReplyDelete