Project SilverLight 1.1 – Prototype – Part 7 – Media Playback Control

 

I would like to start this posting by stating that i am by no means a professional blogger. I don’t even like presenting to people in real life. So if you have any pointers onhow to better my presentations or videos please send them my way and ill try to incorporate your pointers. From this post onwards ill be including alot of video’s as i believe they are the best form of expression, I have alot to show and video’s are the best medium to show them thru… 

Here we go … MY FIRST SILVERLIGHT CONTROL !!!!

I have to admit im feeling pretty anxious at the moment. I haven’t tried to learn a new technology from ground up since C# (3 years ago).

So this is what im going to try to build in SilverLight (jpg image from the iTunes application using photoshop to capture it)

Step 1: create the xAML for this control using blend and photoshop (i would use expression “design” but i thought that learning 2 new technologies in one day would be too stressful, i’ll tackle “blend” today and “design”  another day).

If your not familiar with Microsoft’s expression studio then you should check out this site, it will explain, better than i could ever do, what it is and how it benefits you the designer/developer.

Here is the video showing the process i took to create the media control in silverlight. I’ve had to split it into 2 video’s because of the length limit in youTube.

Here is the snapshot of the resulting control from blend, if your interested in the steps i took to create this in blend check out the video. (note that the background is not really dark grey, that is the workarea of blend. The background is actually transparent so when it is eventually layed onto the webpage the background will be that of the container it is found in) 

 

The following is a snapshot of the xAML file within the blend project (see the video for a detailed look at the project)

 

Step 2: take the generated xAML and place it into the ASP.NET container page that i created in this previous post.

Here is the video continuing on from the first video which includes placing the blend xAML into the visual studio asp.net webpage.

Here is a snapshot of the resulting webpage with the media control embedded into the relevant slot. The source code for this can be found in this zip (JF000005.ZIP) and the relevant entry page is JF000005.aspx.

 

NOTE: this is only early days and all i am doing at the moment is creating the relevant controls GUI (silverlight or ajax) and embedding them into the base page. After i’ve created the controls ill wire their events up.

Also note that the look of the demo is still early days, it will eventually have the exact same color, backgrounds and themes as iTunes, give it time and you will eventually see the transformation.

Summary: It was so easy to use Blend to create the xAML representation of the media control. Then embedding that xAML into the webpage was equally simple. I can’t wait to wire up the events of the components so that it behaves like a real app, but that will be some time down the line.

xAML markup for pictures is an amazing concept. Think about it people, every part of an image can be animated and scripted against. This is an amazing concept, well to me it is! No more having to create dozens of gif’s representing a particular state of a button, gone are those days !!! HORAY!!!!

Right now everything looks on track for me to be able to deliver the iTunes app online. SilverLight is looking damn good from my perspective, it’s living up to it’s BIG reputation!

Next post will be about the control 5 (the main feedback control that shows what’s playing and the cool playing animation)