Apples Product Slider – written in SilverLight

In my ongoing love with Apples web site I’ve replicated there “product slider” control in SilverLight. I love this control purely because it look’s great and is so functionally spot on!

From a design perspective it isn’t revolutionary but it just delivers a perfect user experience and is so harmonious with the rest of the web site.

I wrote the control with my future web site in mind, blend candy. The pictures are hard coded in xAML but I for-see some future version dynamically populating the product’s from an XML source.

The entire control took me over a day to create, this is actually longer than I had expected, the complications came with the slider part of the control. Getting the drag functionality of the slider was difficult purely because mathematics isn’t my strongest strength and you definitely need to know your maths when working with mouse positions and canvas/rectangle positions.

So this is how my version of apples “product slider” turned out. [Click the image to see the control in a sample page]

*updated (30/8/2007) to use a zip file for all the assets and a downloader control to download the zip file. Overall this provides a better user experience upon control load up. The source code has been updated with the latest changes so if you want it download it from the link below

I think it turned out quite well and because this SilverLight control is 100% scriptable I can theme it to any color I want. I really love SilverLight and xAML (in particular the design bench Blend).

This control forms part of a bigger project called the “Blend Candy – Web site”. The goal of this project is to provide you with many cool controls that you can mix and match to create an unbelievable web site. At the time of this writing there is only 1 other control in the project, download the source here (BlendCandy-Website.zip)

Please leave comments of any problems or future enhancements you have in mind, I’m always grateful for any type of feedback!