Project SilverLight 1.1 – Prototype – Part 8 – Media Display control


subheading 2

After the last blog post i still feel drained. It takes so long to create videos and write articles. I reckon 80% of my time is spent on updating the blog and collating the notes. The actual time spent on actual coding is very very small, i guess that’s similar to real life projects. Anyone that has ever worked in a proper corporate environment knows all too well how much time is spent on documentation and non-coding related stuff!!

Anyway i don’t mind writing these posts as long as someone out there is getting something out of it, please feel free to send in comments. Better yet start your own silverlight project and send me the link so i can backlink to your site. I too spend alot of my time searching the web for good silverlight stuff.

Ok in this blog post im going to create control 5 which is the feedback display. Below is what it looks like from iTunes. So this is what i need to build in SilverLight

feedback display

I’ve included a video of me creating the control and adding it to the wireframe, it can be found at the bottom of this post. All up it took about 20mins, 15 mins for the blend work and the rest visual studio asp.net work. It was definetely fun and i can see how a designer will be empowered by this new “Expression” world. Designers now have greater control of the end result, versus today where it’s the developer that’s really left to fine tune the UI.

This is the result of about 20mins playing in blend, i have to admit i did pretty good!

control 5 part 1

Here is a more complete picture of the blend project for the control 5 (feedback display media control)

control 5 part 2

Taking the resulting xAML from blend i spent around 5 mins plugging it into the existing wire frame into slot “control 5”. The end result can be seen below. It’s only the GUI and the events will be wired up much later but it’s definetely starting to take shape. I’m finding blend to be such a cool GUI tool to work in.  

I’m definetely dumb struck at the potential SilverLight and xAML will have in changing people’s perception of a web application. Truly powerful!!

wire frame with control 5

If you want to see the wireframe in action here is the link to the actual working website, you need to have SilverLight 1.1 already installed. WireFrame Sample 6

The code for the current sample project can be found in this zip package (JF000006.ZIP) and the entry page is JF000006.aspx

Here are the videos of me slaving over blend/photoshop/visual studio 2005 :

The next posting will cover control 6 which is a silverlight control for the “views” functionality in iTunes. I hope your enjoying these postings and remember please leave any comments you may have.

Digg!   Reddit!
 

5 responses to “Project SilverLight 1.1 – Prototype – Part 8 – Media Display control

  1. Thank you for these efforts over the past week.
    You are serving a very important role with the
    translation function. Your presentation uses features and ideas as in Popfly
    Alpha. let me have a try this next using your
    zip files and see whats next. Havnt looked at
    the videos yet but read thru parts 1-8 – I like
    a narative- i like the way you scope out and test
    what you think – finally you grasp the idea of
    search to service which you app and teaching
    also stresses…

  2. thankyou dakko… your more than welcome to help me complete this project if you want. Let me know if you want to take one of the components and run with it to the end…

  3. A young person who will be successful is never give up before get the success on his hand

  4. Get up in the morning with enthusiasm and sleep with satisfaction

  5. Bahagia bukan berarti segalanya sempurna Bahagia adalah ketika kamu memutuskan tuk melihat segala sesuatu secara sempurna

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