Sunday, November 6, 2011

Media Element (Expression Blend Part 2)





Expression Blend does not yet support using live XML data (RSS feeds) and you need to write some C# and XAML to achieve the same. As I looked at using and exploiting the Silverlight Media Element control, I was tempted to write this blog and in probably 6-8 steps how one could create major functionality with a few lines of code. The goal for me is to keep things simple for easier maintainability as well as providing a good primer using which the user can explore further. I have recently downloaded Expression Blend 4 Release Candidate and the following steps use the same.
What I am essentially doing is to create functionality to play, pause and stop a WMV file that is on my local drive. The events utilize methods available as a part of the media element and I was able to complete this small exercise in less than 5 minutes.
1) Create a new Silverlight project with sub type as Silverlight + Website
2) Search for the MediaElement control from the assets button. This is not available for some reason in the defaulted list and you need to utilize the Search feature
3) Once the MediaElement is placed on the grid, add three buttons to play pause and stop
4) Select the MediaElement and change the name to myMedia and from Media section select the source WMV file. Leave the auto play checked. The steps described so far are captured in the below screen shot


5) Change the labels for all the buttons from the properties panel
6) Navigate to the events section as described in my previous blog(Part 1-Expression Blend)
7) Create a new UNIQUE name for each of the click event
8) As the method names (event handlers) are created a .CS file is opened with focus on the newly created method as shown below. Observe the steps and I have entered; the object name and intellisense has provided me with methods for playing, pausing and stopping the source file. Compile and Run the project.

9) This is the final output and the media element plays the file with the pause, play and stop buttons fully functional. It literally took me about 5 minutes and some testing time to play around with the play/pause/stop buttons



These simple steps have enabled a designer/developer to build a working prototype and the best part is that you could replace the WMV with a different format such as MP3 and all you need to do is recompile without changing a single line or property other than pointing to the MP3 file itself. The simplicity of the use need not be over emphasized.

No comments:

Post a Comment