1.Introduction
There are several container controls in Silverlight . One of them is panel. Container control like for example StackPanel host another controls. Data presentation controls like ListBox inherits from ItemsControl. ItemsControl contains set of items to display and has ItemsSource property.ItemsControl is responsible for creating visuals for each item and placing them in a panel.
Main panel that holds items in ItemsControl is ItemsHost property. If we set this panel to be StackPanel for large datasets, ItemsContainerGenerator will generate containers that are off visible screen. Our ListBox will instantiate containers that aren't visible witch can take time and consume memory depending how large is dataset. Scrolling will also be much slower because we constantly computes the size and position of all of the containers.
Best solution for this problem is using UI virtualization. UI virtualization means that generation of items is deferred until we scroll items into visible zone. How it works? When we enable virtualization ItemHost property of ItemsControl is set to be VirtualizingStackPanel.
VirtualizingStackPanel calculates number of visible items and helps to create UI elements only for visible items. Scrolling on large datasets now will be much faster.
Another technique that can improve performance when working with large datasets is called Data virtualization. What does it mean? It means that we not load all data on client side rather only data that user can see at the moment. For example user in ListBox can see only 20 or 30 items. After that it must scroll. Here we can use technique called “deferred scrolling”. This technique you can see on Google Reader for example. We only loads 30 items from database and that user see. When user scroll down we load another 30 items from database. This technique can significantly improve performance of our application depend how large set of data we load on the client side.
Another example of Data virtualization is data pager control.We load 30 items in DataGrid control and when user click on link for next page then we load another 30 items.
2. UI virtualization
UI virtualization in Silverlight is accomplished by using VirtualizingStackPanel. As I have sad before VirtualizingStackPanel is that control that calculates the number of visible items to create UI elements only for visible items.
Virtualization in a StackPanel occurs when the items control contained in the panel creates its own item containers. This happens when we use data binding. In case where item containers are created and added to the items control, a VirtualizingStackPanel offers no advantage over a regular StackPanel.
VirtualizingStackPanel has two virtualization modes : standard and recycling. When we set standard mode containers are generated when items entering visible area. On the other hand when we set virtualization mode to be recycling we reuse containers that we have created before instead of generating new ones. Performance benefits of enabling recycling on VirtualizingStackPanel are significant especially for scrolling.
Here is example of virtualization modes : standard and recycling for ListBox control. You will see that when using recycling scrolling is much smoother.
3. Data virtualization
Because off lack deferred scrolling on ScrollViewer it is not easy to implement “deferred scrolling” in Silverlight 4 RC. In WPF we have this possibility to set deferred scrolling to true so we can make application that loads data when user releases scroll bar thumb.
But Silverlight has support for Data Virtualization using DataPager control and PagedCollectionView class. If we have DataGrid for example and we need to load large dataset with 500000 items in DataGrid maybe is better solution to implement paging on DataGrid using DataPager control.
We can use a PagedCollectionView to provide grouping, sorting, filtering, and paging functionality for any collection that implements the IEnumerable interface. We just wrap IEnumerable collection with PageCollectionView and we have all this functionality. For example :
List<string> list = new List<string>();
//just provide to PagedCollectionView any IEnumerable datasource
PagedCollectionView p = new PagedCollectionView(list);
dataPager.Source = p;
PagedCollectionView has collection of GroupDescriptiors and SortDescriptiors that describes how items are group or sorted in view. It also contains methods for navigation between pages.
Code for grouping and sorting is simple. We just need to add new GroupDescription where we specify witch property in model will be used for grouping. For sorting code is similar. We just need to add new SortDescription and specify witch property will be used for sorting and in witch direction.
p.GroupDescriptions.Add(new PropertyGroupDescription("CustomerName"));
p.SortDescriptions.Add(new SortDescription("CustomerName",ListSortDirection.Ascending));
For filtering you need to define predicate that point to the method that will be used for filtering data.
p.Filter= new Predicate<object>(ExampleMethod);
4. Summary
As we have seen Silverlight 4 RC has very good support for UI virtualization. Using this technique we can improve performance of our Silverlight applications significantly.This give us tools to build high performance large business applications.
On the other hand Silverlight 4 RC does not support DeferredScrolling on ScrollViewer like WPF does. That makes difficult to implement “deferred scrolling” solutions in Silverlight. But probobly in later version of Silverlight this feature will be added because Silverlight and WPF eventually probably will become same platform. Silverlight also have very good support for paging through PagedCollectionView that give us lot of functionality in simple way. I hope this article will help you to make high performance Silverlight applications.
About author
Radenko Zec work as senior software developer at Lanaco. He is winner of third place in Europian Silverlight Challenge. He is also running local Ineta user group and speaks regularly on local and regional conferences and events. You can read his blog on http://blog.developers.ba/