Online Advertising, Web Development & General Rantings

In the previous post i created the media control, it was fun because it was a center piece component with a cool GUI. In this post i’ll be tackling two less glamorous controls but none-the-less just as important.

Below is what the view & search controls currently look like in iTunes. Our goal is to get the same control’s created using silverlight technology.

iTunes “View” Control:     

iTunes “Search” Control: 

The video of the entire process of me creating the two controls can be found at the bottom of this post.

Here is the result of my blending effort, silverlight “view” and “search” control.

The “view control” was very difficult to create mainly because of the  lack in tools available to me in the current beta blend. Unfortunately i couldn’t get the result i wanted, i had to improvise on the style of the button. If someone can show me how to get the exact same result as the one in iTunes i would be so grateful, until then the version i came up with has to suffice. Sorry. So here is my version of the view control…

The “search control” was very simple. Blend also proved again to be an awesome GUI tool to create in. It makes me want to switch hats and stay as a designer! Below is the resulting “search control”. I got it looking exactly the way i wanted.

After copying the xAML into the wireframe project this was the result. It’s looking more and more like the iTunes application. And to think that every single component in the silverlight controls is fully scriptable in javascript, wow … i still can’t get over that.

The code can be found in the zipped up package (JF000007.zip) and the entry point is JF000007.aspx

If you want to check out the working version of the wireframe, it can be found here Wireframe Sample 7!

The next post will cover controls 11 and 13 (at the bottom of the page). We’re slowly but surely getting to the end goal of an online iTunes application. Comments are always appreciated!