Chapter 20. Silverlight
In some ways, Silverlight is Microsoft’s answer to Adobe Flash. More accurately, it’s a way of getting .NET and WPF into users’ browsers in an easily deployable format. Silverlight is essentially a web-deployed application platform that runs on the end user’s computer.
Silverlight 1.0 was essentially a glorified media player. The only programming language it supported was JavaScript.
Silverlight 2 added a small version of the .NET Framework, more controls, a subset of WPF, and more data-access options. It was now programmable with any supported .NET language.
Silverlight 3 added yet more controls, more video and audio decoding options, more 3D support, more graphics hardware acceleration, and other improvements.
Silverlight 4 (in beta at the time of this writing) adds printing, even more controls, localization enhancements, web cam support, drag and drop, support for multitouch interfaces, and more.
This chapter demonstrates creating a simple Silverlight application and shows how to take advantage of new features in Silverlight 3 and 4.
Create a Silverlight Project
Solution: As with all .NET code, you can use the SDKs alone with your text editor of choice to create Silverlight applications. For most of us, Visual Studio is usually the tool of choice. To use Visual Studio for Silverlight projects, you need to install the Silverlight 4 Beta Tools for Visual Studio, available from http://silverlight.net/getstarted/silverlight-4-beta/.
Once this is installed, you can follow these steps to create a basic Silverlight application:
1. In the Visual Studio menu, go to File, New, Project.
2. Find Silverlight in the project type tree.
3. Select Silverlight Application.
4. Select the appropriate options in the New Silverlight Application dialog box, shown in Figure 20.1. A Silverlight project must be hosted in a website, and this dialog box allows you to select which existing web project to associate it with (or you can create a new one).
Figure 20.1 The New Silverlight Application dialog box allows you to specify basic settings for your application, such as which website to host it in.
5. Click OK, and Visual Studio generates two projects for you, named ApplicationName and ApplicationName.Web by default.
Play a Video
Solution: This seems to be a canonical example with Silverlight. After all, most of the early Silverlight apps were video players. However, we’ll jazz up the example with more features through this chapter. Video content can be displayed with Silverlight’s MediaElement control. We’ll also add a few buttons to control the video and a TextBox to specify the URL of the video to play. Listing 20.1 shows the XAML for the main application page, and Listing 20.2 shows its code-behind.
This is all the code you need to create your own media player on a website (see Figure 20.2). As you can see, it uses the familiar XAML and .NET code you are already used to.
Figure 20.2 It requires very little effort to play most common types of media in a Silverlight application.
Build a Download and Playback Progress Bar
Solution: One thing every media content downloader needs is a bar that shows both download progress and playback position. Thankfully, Silverlight fully supports the concept of custom controls. Listing 20.3 shows the XAML, and Listing 20.4 shows the code-behind for this control.
Listing 20.3 PlayDownloadProgressControl.xaml
Listing 20.4 PlayDownloadProgressControl.xaml.cs
To incorporate this into video player app, add the following bolded lines to the MainPage.xaml file from Listing 20.1:
The DownloadProgressChanged event notifies you when a new chunk has been downloaded so you can update the progress:
However, there is no equivalent event for playback progress (which makes sense if you think about it: How often should an event like that fire anyway? Every millisecond? Every second? Every minute?) Because playback is application dependent, it is up to you to monitor the playing media and update your UI accordingly. This is the topic of the next section.
Response to Timer Events on the UI Thread
Solution: There are a few different timers you can use for triggering events at specific intervals, but recall that all UI updates must occur from the UI thread. You can always use BeginInvoke to marshal a delegate to the UI thread, but there’s a simpler way. WPF and Silverlight provide the DispatcherTimer class in the System.Windows.Threading namespace, which always fires on the UI thread. You can use this timer for updating the playback progress.
Note
The DispatcherTimer is not Silverlight specific, and it can be used in any WPF app where you need a timer on the UI thread.
Figure 20.3 shows the video application with the progress bar in action.
Figure 20.3 Silverlight allows many of the same features of WPF, such as user controls.
Put Content into a 3D Perspective
Solution: You can use MediaElement.Projection to transform the MediaElement onto a 3D plane. Figure 20.4 shows the results.
Figure 20.4 It’s easy to add a 3D perspective to your Silverlight app with the Projection property.
And like all other dependency properties, these can be animated.
Make Your Application Run out of the Browser
Solution: When is a web application not a web application? When it’s been enabled to run straight from the desktop. First, add a small (say, 48×48 pixels) PNG image file to your solution and set its Build Action to Content. In the Silverlight tab of your project’s settings, there is a check box to enable running the application outside of the browser, in addition to a button that opens a dialog box enabling you to specify additional settings (such as the icon). Enabling this setting creates the file OutOfBrowserSettings.xml in the Properties folder of your project. It looks something like the following:
When you right-click the application, you get an option to install it locally, as shown in Figure 20.5.
Figure 20.5 It’s easy to make your Silverlight application available offline with some simple configuration settings.
Once the app is installed, right-clicking it gives you the option to remove it from the local machine.
Capture a Webcam
Solution: Use Silverlight 4’s support for video capture devices.
To set this up, you need to first ask the user for permission to use the web cam. If granted, you can assign the device to a CaptureSource object and then assign that object to a VideoBrush. The VideoBrush can then be used as the Fill brush for the destination control (a Rectangle in this case).
This technique is demonstrated in Listings 20.5 and 20.6.
Print a Document
Solution: Silverlight 4 now contains printer support which you can easily take advantage of.
Remember from Chapter 17, “Graphics with Windows Forms and GDI+,” that printing in .NET is similar to drawing on the screen. In Silverlight, to print, all you need to do is generate any UIElement-derived object and pass it to the printing system, as this code demonstrates:
The PrintPage event handler sets the PageVisual property to whatever control you want printed—it’s as easy as that. Too see the full example, see the SketchPad sample project in the accompanying source code. This sample app lets you draw with the mouse and then print the results.