Apples Product Slider – written in SilverLight


SubHeading 6

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.

productSlider

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]

productslider

*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!

Digg!

10 responses to “Apples Product Slider – written in SilverLight

  1. It is very good article.
    But in the Zip file i did not find code for “Product Slider”.

    Thanks

  2. when you unzip the file there are 2 folders that get created..
    1) the website (folder name is “blendcandy”,
    2) the actual controls (the folder name is “iTunesControls”, not very logical i know will be fixed in a future version)

  3. Can you tell meexactky where is the code for Product Slider.I mean Zip file.

  4. Ajit, google can help you😉

  5. Ajit.. there is a zip file in the blog posting above (blendcand-website.zip) that contains it all. Ive gotten it to work let me know if your having issues and i can try to help ya. I can only imagine how busy liquidboy is ….

  6. why doesn’t the code work?

  7. uifvytesnneoqumfwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch😉

  8. Do not worry about failure but worry about the chance that you miss

  9. Poverty is not a shameful thing but laziness and pessimism are exactly embarrassing

  10. Jangan pernah meremehkan diri sendiri Jika kamu tak bahagia dengan hidupmu perbaiki apa yang salah dan teruslah melangkah

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