Silverlight is a Web technology that allows you to add a rich user experience to Web
applications. It uses XAML, just like WPF applications, but runs in a Web page
supported by ASP.NET.
Other parts of this book prepare you for working with Silverlight. Since Silverlight
uses XAML, you can review XML and XAML articals to get up-to-speed on XAML essentials.
Silverlight also has many features in common with WPF. Therefore, it would be useful to
review WPF article before reading this article. What you'll learn in this article is how VS
helps you create a Silverlight project, how to add controls to the Silverlight designer, and
how to deploy Silverlight applications.
Starting a Silverlight Project
As when starting other projects, you can select File | New | Project or press CTRL-SHIFT-N;
you then select a Silverlight application in the New Project window. After you set up
the project with a name and folder, VS will display another window for configuring the
Silverlight application, shown in Figure 1.
Silverlight gives you the option to create a Web site at the same time as you create the
Silverlight application. You can opt not to create the Web site, but ultimately, you'll need
to host your Silverlight application on a Web page. There is an alternate Web technology
based on ASP.NET Web forms, but this book concentrates on the ASP.NET MVC Web
development model, discussed in MVC article, which is why you see the New Web project
type set to ASP.NET MVC Web Project. Click OK to create the Silverlight application,
shown in Figure 2. You'll also see a screen asking if you want to create a unit test
project, which is the same window discussed in mvc article. Click OK to continue.
 |
| Figure 1 Creating a new Silverlight application |
 |
Figure 2 A new Silverlight project |
Similar to WPF applications, Silverlight applications start with a MainPage.xaml file
and an App.xaml file, where App.xaml runs to initialize the application and MainPage
.xaml contains the display page. The Web site is a typical ASP.NET MVC application,
except that it does have a test page that hosts the Silverlight application, SilverlightDemo
CSTestPage.aspx (SilverlightDemoVBTestPage.aspx for VB). There's also a Silverlight
DemoCSTestPage.html (SilverlightDemoVBTestPage.html for VB), which performs the
same function as the SilverlightDemoCSTestPage.aspx (SilverlightDemoVBTestPage
.aspx for VB) hosting Silverlight, except that the *.html version uses JavaScript and the
HTML object tag to host Silverlight. Listing 1 shows the contents of the test page and
how it hosts the Silverlight application. There is no C# or VB version of Listing 1
because the code is XAML, which works exactly the same with either language.
Listing 1 Hosting a Silverlight application on a Web page
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>SilverlightDemoCS</title>
<style type="text/css">
// css styles omitted
</style>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript">
function onSilverlightError(sender, args) {
// error handling code omitted
}
</script>
</head>
<body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source"
value="ClientBin/SilverlightDemoCS.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
Designing Silverlight Applications 289
<param name="minRuntimeVersion" value="3.0.40818.0" />
<param name="autoUpgrade" value="true" />
<a
style="text-decoration:none">
alt="Get Microsoft Silverlight"
style="border-style:none"/>
</a>
</object>
<iframe id="_sl_historyFrame"
style="visibility:hidden;height:0px;width:0px;border:0px">
</iframe>
</div>
</form>
</body>
</html>
Listing 1 contains an object tag that hosts the Silverlight application. This object
tag has various parameters, which are described in Table 10-1.
You can run the application and view the Web page, but there isn't much to see yet.
The next section starts you in the direction of making something useful happen with
Silverlight by reviewing the Designer.
Navigating the Silverlight Designer
The underlying technology for displaying the UI is XML Application Markup Language
(XAML), pronounced "Zamel." Appendix A contains an introduction to XML, and
Appendix B contains an introduction to XAML if you need to obtain a basic understanding
of these two technologies. It would really be helpful for you to review Chapter 8 because
you'll find many of the same controls for layout and display in both Silverlight and WPF.
The Silverlight Designer is very similar to the WPF Designer in how you work with
controls. Drag and drop from the Toolbox, configure Grids, interact with XAML, and set
properties in exactly the same way with Silverlight as with WPF. Since there are so many
similarities, I won't repeat the material covered in WPF article but will build upon previous
material, showing you what is special about Silverlight.
Using Silverlight Controls
Silverlight has strong multimedia support through streaming audio and video. In fact,
the Toolbox has controls that make it easy to host your own videos and control the user
experience for playing videos. The following steps show how to design a screen that
shows a video, as shown in Figure 3.
1. Your project starts out with a page named MainPage.xaml, which you should open so
the designer is showing. If the XAML editor is showing, click on the Design tab at the
bottom of the designer window.
2. You'll have a default Grid, which you can work with in exactly the same way as
the designer for WPF, discussed in previous article . You need to ensure the Grid has two
rows, with the top row being large enough to fit the MediaElement and the bottom
large enough to fit a single button. Hover over the left margin of the window until
you see a grid line appear on the window. Move the grid line vertically until you've
created two rows, where the bottom row is large enough to hold a button, as shown
in Figure 3. Click on the window margin when you have the grid line positioned
where you want.
3. Find the MediaElement in the Toolbox and drag it onto the top row of the Window in
the designer. If you find that you haven't made the top row large enough, grab the grid
line arrow in the left margin and drag it down some more.
4. Set the Name property of the MediaElement control to VideoPlayer.
5. The MediaElement control has a Source property that you can set with the URL of
a movie. Set the Source property of the MediaElement control to http://mschnlnine
.vo.llnwd.net/d1/ch9/8/3/7/0/7/4/OfficeVS10SC1_2MB_ch9.wmv, which is a video
that introduces VS 2010.
6. Drag a Button from the Toolbox to the bottom row of the Window in the designer.
7. Set the Name property of the Button to StartStopButton and set the Content property
of the Button to Start.
In Figure 10-3, you can see a Grid with two rows. The top row holds a MediaElement
control and the bottom row holds a button. The name of the Video control is VideoPlayer
and the name of the button is StartStopButton.
 |
| Figure 3 Playing Silverlight videos |
Listing 2 Playing and stopping a video
C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightDemoCS
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
VideoPlayer.AutoPlay = false;
}
private bool m_isPlaying = false;
private void StartStopButton_Click(
object sender, RoutedEventArgs e)
{
if (m_isPlaying)
{
VideoPlayer.Stop();
StartStopButton.Content = "Start";
m_isPlaying = false;
}
else
{
VideoPlayer.Play();
StartStopButton.Content = "Stop";
m_isPlaying = true;
}
}
}
}
By default, the MediaElement starts playing the Source video as soon as the application
loads, so I set AutoPlay to false in the code-behind constructor. The m_isPlaying field
keeps track of whether the MediaElement is playing or not. The Click event handler uses
m_isPlaying to toggle between playing and stopped.
This is a quick demo of how to work with the MediaElement control, but there's much
more you can do, such as pausing, tracking buffering, checking video position, and more.
All you need to do is either capture events of the MediaElement control or use controls like
buttons and sliders to interact with MediaElement, as the example shows in Listing 2. It
would be good practice for you to take what you've learned here and add more functionality
to the MediaElement control.
No comments :
Post a Comment