CoverFlow – built using Silverlight 3's 'Projection' feature

CoverFlow – built using Silverlight 3's 'Projection' feature

 

So I decided to have a go at building the coverflow experience using the new Silverlight 3 “Projection” feature.

If you want any of your SL3 content to look like it’s in 3D then the “Projection ” feature is your friend. It’s not true 3D, like what we’d expect from WPF camera/viewport, BUT it is sufficient to give the appearance of 3D.

What I also want to do in this sample is utilize designer created storyboards for ALL animations. It’s easy with something like coverflow to create your animations using code generated storyboards and/or dispatcher timers. These code generated storyboards or dispatcher timers are very DESIGNER UN-FRIENDLY, and this is something I try to steer clear of. I want to show you that you can create these complex types of experiences using “designer” friendly techniques.

What we’re going to build

We are going to build a very very simplified version of the infamous coverflow. The below picture is taken from the iTunes store, we are going to build something similar but without the scrollbar (that will be added in a future blog post). Also my version will have the covers tilted on a more exaggerated angle to highlight the ease at which you can do it using the blend tools.

 

Future blog post’s will work off this sample BUT for now it will be lean and clean, showing only the perspective transform and use of designer friendly storyboards.

So here is the final looking coverflow that we are going to build as mentioned it is a very vanilla version without the bells and whistles found in the iTunes version (like reflection or fading gradients etc). It’s only a youTube clip in case you haven’t installed SL3 and thus can’t play with it. (If you do want to play with the Silverlight 3 version then go to the bottom of this post.)

 

<object width="500" height="400"> <param name="movie" value="http://www.youtube.com/v/-Vgb7HhCWqQ&amp;hl=en&amp;fs=1"> <param name="allowFullScreen" value="true"> <param name="allowscriptaccess" value="always"> <embed type="application/x-shockwave-flash" width="500" height="400" src="http://www.youtube.com/v/-Vgb7HhCWqQ&amp;hl=en&amp;fs=1" allowscriptaccess="always" allowfullscreen="true"></embed></object>

 

My interpretation of a CoverFlow solution

This is my own interpretation of how a coverflow system can work. The beauty of programming is that there are many ways to solve the same problem, each developer/designer has there own techniques and seeing all the different approaches to problems makes programming interesting.

Don’t get too bogged down in the pictures, hopefully the code will make more sense.

The visual tree hierarchy of the coverflow application is as follows

- Main Page (MainPage.xaml & cs)

                --> CoverFlow (CoverFlow.xaml & cs)

                                 --> Cover (Cover.xaml & cs)

                                 --> Cover (Cover.xaml & cs)

                                 --> Cover (Cover.xaml & cs)

                                 --> Cover (Cover.xaml & cs)

                                 --> …… etc.

The “Main Page ” is nothing more than a simple user-control that hosts the coverflow control. In the main page we also create the dummy data and pass that into the coverflow control.

The “CoverFlow ” control is a canvas container that hosts all the covers. Note that the canvas is horizontally and vertically aligned to the centre, and it has no set width (i.e. it is zero in width). This ensures that the canvas is aligned to the centre of the screen and all the covers that will be added to it will position from the centre outwards (this is an important point to remember).

 

The “Cover ” control is very simple in design. It has 3 storyboards that animate an image between the three different views mentioned above (Left, Normal, Right). They’re just storyboards for this sample however in a future blog post they will be turned into visual states as i wanted to keep this demo as simple as possible.

 

 

Silverlight 3 Demo

[demo uses Silverlight 3 beta]

 

 

Conclusion

I’ve tried to keep the overall design of the solution as simple as possible, the reflections, iTunes like effects etc were intentionally not added as I wanted to just concentrate on “Projection” and “Using designer friendly storyboards”.

I’ve seen a lot of implementations of coverflow both within Silverlight and from the Flash side and all of them have been built mainly using code generated animations. I have no problems with that approach as long as you somehow expose those animations to a designer for them to tweak and customize.

Blend 3 “behaviours” is one such technology that will allow you to keep your code generated animations (storyboards) but bubble up the important bits for a designer to be able to configure. Bare this in mind when you create your future coverflow like experiences.

There will be a couple of follow up posts on this coverflow application, I plan on showing you how to create this same coverflow experience using the Scroll Viewer, and/or via using the other layout controls. I choose to do using a canvas for this first version to keep it simple.

Silverlight 3 projection makes building 3D like experiences dead simple. And the animation engine within Silverlight is so simple to implement that it lets you concentrate on the important things like getting the experience right!

Enjoy and if you’ve got any questions feel free to look me up on Twitter @ JoseFajardo .