UI Virtualization in CoverFlow for Silverlight

Wednesday, March 03, 2010 by XAML Team | Comments 6
    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.

6 Comments

  • Ben Hayat 04 Mar 2010
    Hristo, thanks for the good news (ANF FB message);

    Is this the same Virtual engine being used in the RADBook? If yes, I sent some "Memory Test" results to Kiril last week that you may want to look at. I haven't gotten any response from him regarding my test result, but I'm sure he is busy with Q1 preparation.

    ..Ben
  • Ryan 05 Mar 2010
    We just implemented the 2009.3 version of this with a set of items around 30 and had some perf problems once we go that many in there. I'm glad to see this is addressed in the next version.
  • Hristo Borisov 07 Mar 2010
    @Ben, no the engine is different from the one used in RadBook and we still haven't gotten any complaints concerning memory leaks with our CoverFlow control.
  • Ben Hayat 08 Mar 2010
    @Hristo;
    Have you thrown 2,000,000 objects at it to see what memory usage you get in browser? That's something I'll try with Q1 and see what the memory usage will be.
  • Eugeniy 19 Mar 2010
    IsVirtualizing does not exist in my coverflow control. What am i missing?
  • Hristo Borisov 23 Mar 2010
    Most probably you are using an older version of our controls, try downloading our official 2010 Q1 release. If you still have any issues, please open a support ticket so we can resolve your issue immediately.

Add comment

  1. Formatting options
       
     
     
     
     
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)