Playing with Media in Silverlight 1.0

y previous article on getting started with Silverlight provided an overview of Silverlight in general and also covered how to execute managed code in a Silverlight 1.1 application. This article explores one of Silverlight's key capabilities—rich media experience. To this end, you will learn how to embed a Windows media file in your Silverlight application and how to control its playback. In addition, you will also learn how to create simple effects on the video.

Creating the Silverlight Project
The first step is to create a Silverlight project. Using the Microsoft Expression Blend 2 September Preview, name the project Media (see Figure 1). Switch to the XAML view of the page and add a Canvas object to the page, like this:

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="664" Height="611"
Background="White"
x:Name="Page"
>
<Canvas Width="544" Height="595"
Canvas.Left="8"
Canvas.Top="8"/>
</Canvas>

Figure 1. New Project: Create a new project using Expression Blend 2 September Preview.

You will use this Canvas object to hold a Windows Media file.

In the Project window, right click on the project name (Media) and select Add Existing Item…. Select a Windows Media file. In this case, you'd select a .wmv file named WindowsMedia.wmv. After this, the WindowsMedia.wmv file will be added to the project.

Double-click the WindowsMedia.wmv file in the Project window to add it to the page.

Author's Note: You need Windows Media Player 10 or later for this project to work..

Ensure that the WindowsMedia.wmv file is now contained within the Canvas object (see Figure 2). You might need to move the <MediaElement> element into the <Canvas> element manually.

Figure 2. Adding the File: The .wmv file is now hosted within the Canvas object.		Figure 3. As the Video Plays: The media will by default automatically play when the page has finished loading.

Press F5 to test the page. You will notice that the video automatically starts to play when the page has finished loading (see Figure 3).