Implementing CoverFlow in Silverlight 3

Apple’s CoverFlow interface has become popular for presenting collections of items in a highly browseable format, especially on mobile devices where real estate is limited. Thanks to the PlaneProjection class introduced in Silverlight 3, CoverFlow interfaces are now possible in Silverlight, too.

I recently set out to build a control that encapsulates all the features needed to build CoverFlow interfaces in Silverlight. But then a funny thing happened: I found out that someone else had already done it and published the code on CodePlex. I don’t often use code written by others in the samples that I create, but I was so impressed with Darick’s open-source CoverFlow control that I made an exception. It includes some nice touches from a UI perspective, including the use of animation easing to decelerate as you come to a stop after flipping through the items, as well as support for data binding, data templates, and more. (The author chose wisely when he decided to derive from ItemsControl!) But more importantly, it works really well, and flipping through even large numbers of items is smooth as glass. That’s no small feat given that applying a PlaneProjection to an item in Silverlight 3 prevents that item from being rendered by the GPU.

I built a demo around the control that lets you flip through my collection of Fantastic Four comic books:

You can run the demo from Wintellect’s Web site, or you can download the source code and run it locally. There’s not much for me to say about the source code since the CoverFlow control does most of the work. Just for fun, I did add gesture support to the demo so you can flip backward and forward by dragging the mouse left and right. You can uncheck the “Enable gestures” box to disable that feature.