使用 Expression Blend 在 Silverlight 网站中运行视频

• 下载源代码 - 1.97 MB

引言

本文对于使用 Expression Blend 开始开发 Silverlight 站点的用户很有用。 在这里，我为初学者开发了一个简单的 Silverlight 站点。 在这里，一个视频正在播放，具有播放、暂停和停止功能。

背景

那些使用 Expression Blend 的人可以很容易地按照本文操作。

Using the Code

步骤 1

创建一个新的 SilverLightsite 项目，命名为 SilverlightSiteVideo。

在“项目”窗口中，您可以看到四个文件。

• Default.html
• Page.xaml
• Page.xaml.js
• Silverlight.js

在 *Page.xaml* 中，我们将放置控件并在 *Page.xaml.js* 文件中编写 JavaScript 代码。

第二步

• 在 *Page.xaml* 中放置一个 MediaElement [单击资产库并选中“显示全部”，然后选择 MediaElement 控件并放置在 *Page.xaml* 中。]
• 在“属性”窗口中将名称更改为“Wave”。 [在 XAML 中，x:Name=”Wave”]
• 在 Media 下选择 MediaElement 的源到 WMA 文件。
• 现在 WMA 文件自动复制到我们的项目中，切换到 *Page.xaml* 的 XAML 视图。
• 在 MediaElement 中，添加属性 AutoPlay=”false”。

现在页面看起来像这样

步骤 3

• 放置两个 TextBlock。
• 单击第一个文本块。
• 获取属性。
• 在顶部，输入“Play”作为名称。
• 在“常用属性”下。 将文本更改为“Play”。
• 对下一个 textblock 执行此操作。 名称和文本将为“Stop”。

现在页面看起来像这样

总视图变为

步骤 4

在 *Page.xaml.js* 中为“播放”和“停止”按钮编写 JavaScript 代码

获取 *Page.xaml.js*。 它看起来像这样

这里 rootElement 是画布。

接下来，我们必须找到“播放”和“停止”按钮。 代码如下：

var playbutton = rootElement.children.getItem(1);
var stopbutton = rootElement.children.getItem(2); 

这里的 rootElement 是画布。 在画布中，我们放置了两个 textblock（播放和停止）。

下一步是为“播放”和“停止”控件添加事件处理程序。

playbutton.addEventListener("MouseLeftButtonDown", 
Silverlight.createDelegate(this, this.playpause)); 

stopbutton.addEventListener("MouseLeftButtonDown", 
Silverlight.createDelegate(this, this.stop)); 

这里我们为“播放”和“停止”控件都添加了 MouseLeftButtonDown 事件。

这里 this.playpause 是要调用的函数。

同样，this.stop 是要为“停止”按钮调用的函数。

下一步是实现 playpause 和 stop 函数。

playpause:function(sender,eventArgs)
{
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("Wave");
if(sender.Text=="Play")
{
theMedia.Play();
sender.Text="Pause";
}
else
{
theMedia.Pause();
sender.Text="Play";
}
},
stop:function(sender,eventArgs)
{
var play=sender.findname("Play");
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("Wave");
theMedia.Stop();
play.Text="Play";
} 

所以最后，它变成

请注意，我在 handleMouseDown 函数后放置了一个逗号。

历史

• 2008 年 5 月 15 日：首次发布