在视频播放器中添加控件
为该应用程序添加两个文本块，文本内容分别为 Play 和 Stop，名称分别为 txtPlay 和 txtStop。完成后，XAML 应如下所示：
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
Background="White"
>
<MediaElement AutoPlay="False" x:Name="Movie_wmv" Width="320" Height="240" Canvas.Left="128" Canvas.Top="56" Source="Movie.wmv" Stretch="Fill"/>
<TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136" Canvas.Top="336" Text="Play" TextWrapping="Wrap"/>
<TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" Canvas.Top="368" Text="Stop" TextWrapping="Wrap"/>
</Canvas>
接下来，为文本块在 XAML 中添加事件处理程序声明。为此，可以使用 MouseLeftButtonDown 属性声明单击鼠标的处理程序。在 txtPlay 文本块中，添加对 DoPlay 的事件处理程序;在 txtStop 文本块中，添加对 DoStop 的事件处理程序。完成后，XAML 应如下所示：
Canvas.Top="336" Text="Play" TextWrapping="Wrap"
MouseLeftButtonDown="javascript:DoPlay"/>
<TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136"
Canvas.Top="368" Text="Stop" TextWrapping="Wrap"
MouseLeftButtonDown="javascript:DoStop"/>
现在，如果用户单击其中一个文本块，将触发一个事件，您可通过 JavaScript 功能捕获并处理该事件。
在 JavaScript 中处理事件
模板创建的 Scene.xaml.js 可用于在 JavaScript 中捕获并处理用户事件。由于您在 XAML 内指定了 DoPlay 和 DoStop 事件处理程序，因此应在此处付诸实施。相应的代码如下所示：
{
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("Movie_wmv");
theMedia.Play();
}
function DoStop(sender, eventArgs)
{
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("Movie_wmv");
theMedia.Stop();
}
我们暂时将 Silverlight 控件称为 SilverlightControl，将引用该控件的 JavaScript 变量称为 theHost。稍后查找媒体元素(在本例中称为 Movie_wmv)时，将用到上述名称。在项目中添加电影时，为您创建了此媒体元素，该元素的名称是根据电影名称命名的。因此，如果电影的名称是 Movie.wmv，则此媒体元素就称为 Movie_wmv。如果使用其他电影，则控件也会相应地采用其他名称。该媒体元素有 Play 和 Stop 两个方法，分别用于启动或停止媒体播放。
由于存在对该媒体元素的引用，因而可以调用上述方法，电影将随之停止或启动。
至此，您已构建了自己的第一个 Silverlight 应用程序!
图3 网页播放视频
了解 Silverlight 调用
HTML 页面会调用 Default.html.js 源代码页中的 createSilverlight()。
source: "Scene.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "0.9"
},
events: {
onLoad: Sys.Silverlight.createDelegate(scene, scene.handleLoad)
}
});
该调用将用到许多属性，其中包括那些用于定义要呈现的 XAML、Silverlight 控件外观以及 onLoad 和 onError 事件处理程序的属性。source:属性用于定义希望 Silverlight 控件呈现的 XAML。该属性可以是外部文件（如本例中所示），也可以是包含 XAML 的页面上的命名 <script> 标记。
以上也只是触及到 Silverlight 功能的皮毛。这项技术中蕴含着诸多功能，您现在就可以使用这项技术开始构建下一个 Web。这将会是一个非常有趣的旅程。
