Project SilverLight 1.1 – Prototype – Part 13 – album control


subheading 2

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

itunes album swisher

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:

 album swisher 1

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

album swish in blend

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…

wireframe with album swisher

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…

5 responses to “Project SilverLight 1.1 – Prototype – Part 13 – album control

  1. awesome! this is a really cool project. Good Luck with it!

  2. Hello,

    You can not implement the perspective like iTunes does as that is a 3D affine transformation.

    Silverlight only supports 2D affine transformations.

    Miguel.

  3. Pingback: SilverSpud » Blog Archive » How to create a reflection in Xaml

  4. Never stop believing in yourself because the most powerful force in your heart is the belief in yourself

  5. The champions are those who still believe in the dream even if others do not believe it

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s