Jose Fajardo

Tuesday March 18, 2008

Showing off the power of Silverlight 2.0 - Windows Media Player redone

A couple of months ago I recreated the Windows Media Player interface using Blend and Silverlight 1.1 alpha refresh, I wired up the UI so that it behaved similar to the actual application. It contained a lot of code that managed the resizing, it also made extensive use of the canvas control for layout positioning,  it had a lot of absolute positioning and funky logic to make it work when the page resized.

Today it's time to rewrite that project in Silverlight 2.0 beta. The main reason why I am doing this is because I feel that there are not enough examples of real world skinning using the new Silverlight 2.0 bits. There needs to be more samples out there for people to learn from, I for one would of loved to have more demo's to digest in the early days of the Silverlight 2.0 beta release.

Anyway hope you guys can learn from this real world sample, I know I have learnt heaps making it.

Please note that the entire UI will be built using raw xAML, no jpg's/png's here people. The shading, glass effects, shadow effects are all going to be done using xAML and hence in the future should easily be skinable. That's the power of Silverlight!

Also, the way the sample is laid out there is a separate page xAml for each screen shot, it's just easier this way when your trying to dissect how I did it. Also my explanation below isn't very detailed, just go through the samples and if you have any questions please feel free to leave a comment on my blog or email me on jose.fajardo@cynergysystems.com , I'm always happy to help.

 

Step 1 : Goal that we are trying to achieve

 

This was the Silverlight 1.1 version of the Windows Media Player, we're going to rebuild it from ground up today :)

 

 

Step 2 : Wire frame in Silverlight

 

The below screen shot is of the Silverlight application with nothing more than grids outlining the frame of the application. I have set the grid-lines to true and have given the main area a white-smoke background to make it more easily viewable. Not complicated just used plain grids controls to achieve this.

 

[Sample xAml :  version0_A.xaml]

 

Step 3 : Build up pure xAML for the top part of the windows media player

 

Nothing more than a couple of rectangle shapes with gradient fills. Blend is so powerful like that!

 

[Sample xAml :  version0_B.xaml]

 

Step 4 : Build up pure xAML for the bottom part of the windows media player, just the background that is.

 

The actual media player control will be an external usercontrol that will be loaded dynamically. Again nothing complicated just plain rectangle shapes with gradient fills.

 

[Sample xAml :  version0_C.xaml]

 

 

Step 5 : Add the left border

 

Rectangles with gradient fills again to the rescue.

 

[Sample xAml :  version0_D.xaml]

 

Step 6 : Add the right border

 

More rectangles with gradient fills. Simple, simple, simple !

 

[Sample xAml :  version0_E.xaml]

 

Step 7 : Setting the work area black

 

This is just a  rectangle set to fill = black.

 

[Sample xAml :  version0_F.xaml]

 

Step 8 : Added the WMP logo and application name

 

More shapes for the logo and a textblock for the application name.

 

[Sample xAml :  version0_G.xaml]

 

Step 9 : Added Silverlight buttons as placeholders of action areas also made the menu-item and the bottom media player separate usercontrol's.

 

This was fun, all I did was position standard Silverlight button controls on the areas where WMP buttons sat.

 

[Sample xAml :  version1.xaml]

 

Step 10 : Used skinning techniques to skin the buttons to what the real WMP buttons look like. This was really fun :)

 

I've discussed skinning in a previous post so if you need a refresher of how to skin please visit that article. Basically reskinned all the buttons from step 9, made sure that the correct button contracts were adhered to. No special C# coding, it just worked :) Hovering, button pressing all just seamlessly worked because of the brilliant parts model of the Silverlight control framework.

 

[Sample xAml :  version2.xaml]

 

Conclusion

 

Rebuilding this RIA from ground up was much more enjoyable this time round. Not a single line of C# code was written, yet the RIA resized immaculately. This is testament to the power of the layout controls, resize the browser and watch those curves and shapes resize with it. So powerful yet so simple.

I also have to admit that the skinning of the buttons using the parts model is definitely becoming my favorite Silverlight 2.0 feature. It's so simple to make it look anyway your heart desires. I envision another future post where I will re-skin the entire UI to look completely different, maybe make it look like the iTunes player ;)

As always here's the source code (WMP2.ZIP), rip it apart and learn what you can from it. Also send me your feedback, I'm always up for a healthy chat.

Off to my next project...