UI Virtualization in CoverFlow for Silverlight

    While we are still on the crest of a performance wave, I want to spend some time to introduce the power of UI Virtualization in CoverFlow for Silverlight coming with our 2010 Q1 release.

    The two most common scenarios for using a CoverFlow is either to create a navigation menu that features a small number of items, or to build a browsing control for images or videos that can feature up to a million items. The first case is quiet straight-forward. For a navigation control you generally have no more than 10-12 items which are handled with ease in terms of performance and browsing experience. However, when you have say 1000 or more items the things get a little bit more interesting in terms of memory use and CPU resources, because for every item a specific CoverFlowItem (also called container) has to be created and stored in memory and has to have various transformation applied on it during animation. Since drawing each item container and keeping it in the memory is expensive in terms of memory and CPU resources the concept of UI Virtualization can be very powerful to optimize the experience of browsing a CoverFlow control. UI Virtualization simply creates and uses approximately the number of item containers that are visible on the screen.

    To enable UI Virtualization you just have to set the IsVirtualizing property to True. This will instruct the control’s panel to dynamically create and recycle item containers from its ItemContainerGenerator and assign the appropriate items in the already generated containers. That is why, you cannot explicitly add CoverFlowItems to the control neither declaratively in xaml nor by its Items property in code. You must always use the ItemsSource property to specify a collection of items whenever the IsVirtualizing property is set to true as with every other UI virtualizing control. Note that the CoverFlow control does not feature any build in scroll functionality with or without UI Virtualization, thus if you want a scrolling behavior you can read my blog post on how to create a simple, but powerful Navigation for CoverFlow.

    UI Virtualization for CoverFlow is just a tiny part of the enormous efforts we put to optimize the client experience of our controls. I am really glad that the UI Virtualization is already part of our features set, and works both in Horizontal and Vertical orientation of Telerik’s CoverFlow control.

    To read more about performance gains and other cools stuff that will be part of our 2010 Q1 milestone release check our marketing blog post. For in depth information on UI Virtualization in Silverlight and WPF you can read about the VirtualizingStackPanel here.