Monday, December 17, 2012

UI Virtualization in WPF

How to improve performance using VirtualizingStackPanel, when we want to display large sets of grouped data , The VirtualizingStackPanel stacks elements vertically or horizontally and leverages virtualization to help reduce the number of UI elements created in your screen[window] especially while working with controls like Combo box, List box , List View , Tree View etc. UI elements are generated from a larger number of data based on which items are visible on the screen, if we are loading a huge data in the control there may be a performance issue during loading and navigating. It is intensive both in terms of memory and processor to generate a large number of UI elements when only few are visible on the screen at a given time.
A control that inherits VirtualizingPanel, such as the VirtualizingStackPanel, calculates visible items and works with the ItemContainerGenerator from an ItemsControl to only create UI elements for visible items, the VirtualzingStackPanel can determine which items in the list are currently visible on screen, and generates only the UI elements needed for those items that can help you increase the performance of your application.

Assembly: PresentationFramework.dll

Namespace: System.Windows.Controls

Following xaml code snippet shows an example of implementing

<ListBox Name="ListBoxVirtualization" Height="110″ Margin="5″ VirtualizingStackPanel.IsVirtualizing="True" VirtualizingStackPanel.VirtualizationMode="Recycling" />

By default VirtualizingStackPanel is implemented on listBox. You can manually enable or disable virtualization on listbox control by setting VirtualizingStackPanel.IsVirtualizing property to "True" or "False". 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 4.0 and above 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 than basic default virtualization. If you don't specify VirtualizationMode then it will use default basic virtualization.

Let's assume in our case study 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. Instead of loading 1 million items at a time on listbox control it loads only 10 items which are visible.
I guess you came to this post by searching similar kind of issues in any of the search engine and hope that this resolved your problem. If you find this tips useful, just drop a line below and share the link to others and who knows they might find it useful too. 

Stay tuned to my blogtwitter or facebook to read more articles, tutorials, news, tips & tricks on various technology fields. Also Subscribe to our Newsletter with your Email ID to keep you updated on latest posts. We will send newsletter to your registered email address. We will not share your email address to anybody as we respect privacy.

This article is related to

C#,.NET,Architect,Intermediate,VS2010,.Net,Articles,Computer Tutorials,Virtualization , WPF