Project SilverLight 1.1 – Prototype – Part 13 – album control

Ok im about to tackle, what im sure will be, the most difficult silverlight control of this entire project. The iTunes “album swisher” is the wow factor for the iTunes app. It’s the icing on the cake and it helped make iTunes trendy!!

Im going to endeavour to create the same feature in SilverLight!

I’ve been looking forward to making this control since day 1 …. LETS GO!

So this is what it looks like in iTunes

Quickly breaking down the control i see 3 types of album views

1) Album Left skewed (these are albums sitting to the left of the main album)

2) Album Main

3) Album Right skewed (these are the albums sitting to the right of the main album)  

So armed with this analysis i set out on creating my first attempt at the “album swisher”, here it is:

 

Silverlight comes with some predefined matrixes (such as skew, scale etc). I leveraged these to get the above end result. As you’ll notice i was unable to get it looking exactly like iTunes. If anyone out there can help out and show me how to get the distored “pinched” view of the albums I’d be forever grateful. I have a feeling that i would need to create my own transformation matrix (versus using the predefined ones). Anyway this will suffice for now! 

Here is a snap of my blend project

It took a total of 20 mins using pure blend tools to achieve this result. I have to also mention that i used the following source to create the reflections.

So this is where my iTunes wireframe is at…

I am so pleased with the progress of my baby, and i am still in awe at the ease and power of silverlight / ajax.asp.net. The next couple of weeks, as i wire the controls up to the base page, are going to be interesting! I can’t wait to see what this is gonna look like at the end of it all!

If you want to check out the wireframe sample go here (Wireframe JF000013.aspx)

If you want to download the source get it here (JF000013.ZIP)

Please feel free to leave comments and or suggestions. I can’t begin to express the enjoyment silverlight and this project has given me, it’s revitalized my view on coding and has given me a new perspective on IT and web development in general!

I’ll upload the video pertaining to this blog post on the weekend (a couple of days away).

I’ll see you soon…