在页面中添加媒体信息
如果需要在页面中添加媒体信息，您需要创建一个
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的属性信息。
交互式地控制媒体的播放
您可以使用
play、
pause和
stop等方法交互式地控制媒体的播放。下面的示例使用了
play、
pause和
stop方法来交互式地控制媒体的播放。
<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();
}
