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


 Sub Heading 5

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)

iTunes Media Control

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) 

media control blend 1 

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

media control blend 

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.

 media control in web page

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)


Digg!
 Reddit!

3 responses to “Project SilverLight 1.1 – Prototype – Part 7 – Media Playback Control

  1. Thanks for sharing your journey so far. I’m really pretty new to web site development (as opposed to web application development). I’m trying to get my head around using Silverlight content on standards-based web sites (HTML). In other words, using Silverlight instead of Flash. I’ll have no control over the web server–the hosting service will use whatever they want. The site must be standards compliant. No .net, not ASP. Just HTML, XHTML, .swf, maybe XAML and XAP. Have you looked into embedding a Silverlight control on an HTML page and deploying it on a non-Windows web server? Thanks.

  2. Anda mengetahui apa yang sharusnya tidak dilakukan ketika Anda gagal Jadi Anda menciptakan pengetahuan baru dan itu bukan kegagalan.

  3. 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