SilverLight：创建供视频播放器使用的UI_app

概述在项目中添加视频文件。为此，请右键单击屏幕右上方 Project Files(项目文件)窗口中的项目文件，然后选择 Add Existing Item...(添加现有项目)。　　选择某个 WMV 文件并将其添加到项目时，项目浏览器中将显示该文件，同时在视图中添加了一个媒体元素。图 2. 在 XAML 视图中添加媒体元素　　现在即可运行您的项目，浏览器将启动并播放您的视频! 通过编辑 XAML 在项目中添加视频文件。为此，请右键单击屏幕右上方 Project files(项目文件)窗口中的项目文件，然后选择 Add Existing Item...(添加现有项目)。　　选择某个 WMV 文件并将其添加到项目时，项目浏览器中将显示该文件，同时在视图中添加了一个媒体元素。

图 2. 在 XAML 视图中添加媒体元素　　现在即可运行您的项目，浏览器将启动并播放您的视频! 通过编辑 XAML 可以停止自动播放视频。您会看到 XAML 设计器右侧有两个选项卡：Design(设计)和 XAML。选择“XAML”选项卡，会打开 XAML 编辑器，如图 3 中所示。使用该编辑器为媒体元素编辑 XAML 文本，添加属性 Autoplay=False。

图 3. 在 XAML 编辑器中编辑 XAML 　　现在，如果您运行该应用程序，会看到 Silverlight 内容虽然呈现了视频的第一帧，但并不播放。　　在视频播放器中添加控件　　为该应用程序添加两个文本块，文本内容分别为 Play 和 Stop，名称分别为 txtPlay 和 txtStop。完成后，XAML 应如下所示：

以下是引用片段：

<Canvas   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 应如下所示：以下是引用片段：

<TextBlock x:name="txtPlay" WIDth="72" Height="24" Canvas.left="136"       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 事件处理程序，因此应在此处付诸实施。相应的代码如下所示：以下是引用片段：

function DoPlay(sender,eventArgs){   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 两个方法，分别用于启动或停止媒体播放。　　由于存在对该媒体元素的引用，因而可以调用上述方法，电影将随之停止或启动，如图 4 中所示:

图 4. 运行应用程序　　至此，您已构建了自己的第一个 Silverlight 应用程序！总结

以上是内存溢出为你收集整理的SilverLight：创建供视频播放器使用的UI全部内容，希望文章能够帮你解决SilverLight：创建供视频播放器使用的UI所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1052992.html