ASP.NET VERSIONS: 3.5
Using the New Silverlight MediaPlayer Control in ASP.NET 3.5 Extensions
By Wei-Meng Lee
Microsoft has released the latest version of Visual Studio 2008, and updated the version of the .NET Framework to 3.5. Along with this new release, ASP.NET has been bumped up to version 3.5. Although ASP.NET 3.5 has just been released, Microsoft is continually working to create new features that extend the capabilities of ASP.NET.
Some new features didn t make it in to the release of ASP.NET 3.5, so they are packaged in the ASP.NET 3.5 Extensions Preview release:
- ASP.NET MVC
- ASP.NET Dynamic Data
- ASP.NET AJAX
- ADO.NET Entity Framework
- ADO.NET Data Services
- Silverlight Controls for ASP.NET
In this article, I ll focus on the new Silverlight MediaPlayer control that allows you to play an audio or video file in ASP.NET Web forms.
Creating the Project
Before you start, you must download the ASP.NET 3.5 Extensions Preview from http://www.asp.net/downloads/3.5-extensions/. You also need Visual Studio 2008.
Figure 1: Creating a new ASP.NET 3.5 Extensions Web Site project.
In the Toolbox, you ll discover a new tab named ASP.NET 3.5 Extensions (see Figure 2). Here you ll find the new controls available in the ASP.NET 3.5 Extensions Preview release. Double-click the MediaPlayer control to add it to Default.aspx (the default page).
Figure 2: The new controls in the ASP.NET 3.5 Extensions tab.
In the smart tag of the MediaPlayer control (see Figure 3), you can see several tasks associated with it, such as:
- Changing the skin of the control to one of the supplied skins.
- Saving a copy of the skin, then customizing its look and feel to suit your design.
- Setting the source of the media file to play.
- Adjusting the volume of the media playback.
- Setting the media to auto-play when it is loaded.
Figure 3: The smart tag of the MediaPlayer control.
For now, let s add a .wmv file to the project. For my project, I added a file named Tis_the_Season.wmv.
To set the MediaPlayer control to play the .wmv file, you
can either set it via the smart tag, or do it in the source view of the page (via
the MediaSource attribute of the
Now when you press F5 in Visual Studio 2008, you ll be able to see the MediaPlayer control and click the Play button to start the video. Note that the MediaPlayer control assumes that the Silverlight 1.0 plug-in is installed; if not, you ll need to click the onscreen icon to download the Silverlight 1.0 plug-in.
Changing the Skin of the Player
As mentioned, you can change in the smart tag of the MediaPlayer control the skin to one of the supplied skins (see Figure 4). Let s change it to Console. Figure 5 shows how the MediaPlayer control looks in design view, as well as at run time.
Figure 4: Choosing a new skin for the MediaPlayer control.
Figure 5: The MediaPlayer control with the new skin applied.
If you don t like the supplied skins, you can modify them to suit your taste. To do so, you must have a good understanding of XAML, the UI language used by Silverlight.
In the smart tag of the MediaPlayer control, click the Save a copy link and name it Console-Modified.xaml. You ll then be asked if you want to use the saved copy as the skin. You ll also notice that the newly created .xaml file is now in your project (see Figure 6).
Figure 6: The saved skin (.xaml).
You also can manually specify the skin for the control through its Source attribute:
Height="240px" MediaSource="~/Tis_the_Season.wmv Source="~/Console-Modified.xaml"
Width="320px" /> If you double-click the Console-Modified.xaml file in
Solution Explorer, you ll see the XAML markups that make up the UI of the
MediaPlayer control (see Figure 7). You must make the necessary changes to this
file to customize the UI for the control. For the sake of demonstration, I m going to make a small
change to this file so you can see how the UI can be modified. Locate the
Canvas element named PlayPauseButton and modify to 8 the StrokeThickness
attribute of its first child element: ... Figure 14: Add a
Figure 7: The content of the XAML file.
Source="~/Console-Modified.xaml" Width="320px" />
If you double-click the Console-Modified.xaml file in Solution Explorer, you ll see the XAML markups that make up the UI of the MediaPlayer control (see Figure 7). You must make the necessary changes to this file to customize the UI for the control.
For the sake of demonstration, I m going to make a small change to this file so you can see how the UI can be modified. Locate the Canvas element named PlayPauseButton and modify to 8 the StrokeThickness attribute of its first child element:
Figure 14: Add a