Site Logo

Pixel-in-Gene

Exploring Frontend Development with Design / Graphics / Technology

CoverFlow with UI Virtualization

The CoverFlow view of iTunes was a big inspiration for me when I started out experimenting with the ElementFlow control. Initially it was used to visualize only a small collection of items (in tens) and this worked perfectly fine. Recently at my company we decided to adopt the CoverFlow view to visualize a much larger collection (in hundreds and thousands). This caused serious problems in terms of memory and performance. Clearly ElementFlow could not keep up with such a large collection. After much debate the decision was to virtualize CoverFlow. In other words, implement UI Virtualization for the CoverFlow view.

Now, CoverFlow is purely a 3D view so some of the standard techniques used in 2D virtualization do not work. In short you are not dealing with Rects but rather with Rect3Ds. There are a few more differences which are listed in the table below:

3D 2D
Viewport and Extent sizes We know the size of the viewport and the extent, if we use a ScrollViewer and implement IScrollInfo on the VirtualizingPanel. we have to artificially determine the size of the viewport and the extent. This involves 2D-3D and 3D-2D mappings.
Navigation Scrolling is the default navigating mechanism Here navigation happens by selection.
Animation Animations are not used by default for navigation Animation is the only way to visually depict movement
UI generation ItemContainerGenerator can be used more easily ItemContainerGenerator can be used but with some extra housekeeping

There are few more but they are mostly hard core technical differences.

We do have a way though!

Although it sounds complicated it is not impossible. In fact I have come up with a generalized technique for doing UI Virtualization in 3D and it can work with any view of ElementFlow. It also implements Container Recycling by default. CoverFlow is right now our preferred choice so I am spending more time refining that view. However the technique by itself is quite generalized.

I can’t give away all the details yet but I’ll leave you with a video demonstrating the technique for CoverFlow.In the video you will see 10,000 items being scrolled with little to no impact on performance.

CoverFlow with UI Virtualization
Pavan Podila
Pavan Podila
August 29th, 2008