继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

WPF/E CTP Quick Start - 第八部分:媒体(翻译)

萌萌小温柔
关注TA
已关注
手记 306
粉丝 56
获赞 401

            WPF/E提供了MediaElement对象,可以让您在页面中播放WMV(Windows Media Video)和WMA(Windows Media Audio)文件。   这篇文档包含了以下部分:

  • 在页面中添加媒体信息

  • 有用的MediaElement属性

  • 交互式地控制媒体的播放 

  • 下面该做什么呢?

  在页面中添加媒体信息   如果需要在页面中添加媒体信息,您需要创建一个MediaElement元素,并将它的Source属性指向您的媒体文件。下面则是一个示例:

<Canvas    xmlns="http://schemas.microsoft.com/client/2007"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">        <MediaElement Source="xbox.wmv" Width="300" Height="300" /></Canvas>

重新开始查看内容  就像其它UIElement对象一样,您可以在MediaElement对象之上绘制图形。下面的示例将在上一个例子的基础上,将一个Ellipse添加到MediaElement元素之上。

<Canvas Width="300" Height="300"    xmlns="http://schemas.microsoft.com/client/2007"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">       <MediaElement Source="xbox.wmv" Width="300" Height="300" />      <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"        Stroke="Black" StrokeThickness="10" Fill="SlateBlue"        Opacity="0.6" /></Canvas>

重新开始查看内容 有用的MediaElement属性  MediaElement对象除了它作为一个UIElement对象所具有的属性,例如Opacity和Clip之外,还有一些额外的属性。MediaElement提供了一些媒体专有的属性:

  • Stretch:指定了一个视频是如何缩放以填充MediaElement元素的。它可能的值有None、Uniform、UniformToFill和Fill。它的默认值为Fill。请参考WPF/E的SDK中关于Stetch属性的部分,以获得更多信息。

  • IsMuted:指定了MediaElement是否静音,把它设为True就能使MediaElement静音,它的默认值为False。

  • Volume:使用0到1之间的值指定MediaElement的音量,1表示最响。它的默认值为0.5。

  请参考WPF/E的SDK以得到更多MediaElement的属性信息。 交互式地控制媒体的播放  您可以使用playpausestop等方法交互式地控制媒体的播放。下面的示例使用了playpausestop方法来交互式地控制媒体的播放。

<Canvas Width="300" Height="300"    xmlns="http://schemas.microsoft.com/client/2007"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <MediaElement x:Name="media" Source="xbox.wmv" Width="300" Height="300" />    <!-- Stops media playback.-->            <Canvas MouseLeftButtonDown="javascript:media_stop" Canvas.Left="20" Canvas.Top="260">        <Rectangle Stroke="Black"              Height="40" Width="40" RadiusX="5" RadiusY="5">            <Rectangle.Fill>                <RadialGradientBrush GradientOrigin="0.75,0.25">                    <GradientStop Color="Orange" Offset="0.0" />                    <GradientStop Color="Red" Offset="1.0" />                                </RadialGradientBrush>            </Rectangle.Fill>                     </Rectangle>        <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock>     </Canvas>    <!-- Pauses media playback. -->    <Canvas MouseLeftButtonDown="javascript:media_pause"          Canvas.Left="70" Canvas.Top="260">        <Rectangle Stroke="Black"              Height="40" Width="50" RadiusX="5" RadiusY="5">            <Rectangle.Fill>                <RadialGradientBrush GradientOrigin="0.75,0.25">                    <GradientStop Color="Yellow" Offset="0.0" />                    <GradientStop Color="Orange" Offset="1.0" />                                </RadialGradientBrush>            </Rectangle.Fill>                     </Rectangle>        <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock>     </Canvas>    <!-- Begins media playback. -->    <Canvas MouseLeftButtonDown="javascript:media_begin" Canvas.Left="130" Canvas.Top="260">        <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"             Height="40" Width="50">            <Rectangle.Fill>                <RadialGradientBrush GradientOrigin="0.75,0.25">                    <GradientStop Color="LimeGreen" Offset="0.0" />                    <GradientStop Color="Green" Offset="1.0" />                                </RadialGradientBrush>            </Rectangle.Fill>        </Rectangle>        <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock>     </Canvas></Canvas>
function media_stop(sender, args) {    sender.findName("media").stop();}function media_pause(sender, args) {    sender.findName("media").pause();}function media_begin(sender, args) {    sender.findName("media").play();}

重新开始查看内容 下面该做什么呢?  在下一部分“动画”中,您会了解如何使用标记来定义动画,以及EventTriggerStoryboard对象的使用方式。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP