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:

CoverFlow Demo

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.

On Nov 5 2009 5:12 AMBy jprosise
With 18 Comments

Comments (18)

  1. Ian Smith

    Nice demo (and comics - worth a few bob I think!)

    The downloadable Source Code seems to be missing a required project/dll "ControlLibrary" Can you post a URL where this can be found (if from CodePlex) or add it to the download zip?

    Thanks,
    Ian

  2. jprosise

    Egads! You're right. That's an oversight on my part. I'll correct and have a new zip file posted in a few minutes. Thanks for letting me know!

  3. jprosise

    Just updated the zip. Try downloading the zip file again and let me know if it doesn't work.

  6. Fallon Massey

    WOW, you actually have those issues???

    Those are ABSOLUTE CLASSICS, and probably worth a lot if they are still in decent condition.

    Oh, and the code is sweet too.

  7. jprosise

    I own all of them except #1. I used to own that one, but it got a little rich for me. In really nice condition, it's worth in the neighborhood of $100,000. That'll buy a lot of jets! :-)

  9. Kian M

    From the picture, it looks awesome. But my internet just broke so I can't install silverlight here at the internet cafe. I'm writing a website for a resturant at the moment and hopefully it will be the only one with a coverflow with pics of all the dishes on the website. Come and see it in a month or so @ www.dadapaignton.co.uk

  11. lethargic

    Very nice, and impressive collection ;)

    A couple thoughts:
    - reduce drag sensitivity (1 pixel == 1 cover is too difficult to control), possibly moving it out to control parameter. I changed this:

    // Do nothing if movement was had no horizontal component
    if (dx == 0)
    return;

    to this:

    // Do nothing if movement was had no horizontal component
    if (dx -50)
    return;

    - I also added hidden, overlay buttons to the left and right with mouseEnter and MouseLeave event handlers, wired to a DispatcherTimer, so you can mouse over the right hand side (say) and have it gradually scroll to the right, and vice versa.

    private DispatcherTimer _timer;

    In CTOR:
    _timer = new DispatcherTimer();
    _timer.Interval = new TimeSpan(0, 0, 0, 0, 375);
    _timer.Tick += new EventHandler(_timer_Tick);
    _timer.Start();

    then:

    void _timer_Tick(object sender, EventArgs e)
    {
    if (_increment == 0)
    return;

    if (Covers.SelectedIndex + _increment > -1 && Covers.SelectedIndex + _increment

  13. jace

    everything seems fine after i downloaded the zip file and unpack it. But when i debug the demo, it shows me an error stating "unable to download covers.zip" why is this happening?

Leave a Comment

Archives

Tags