如何：使用腳本控制 MediaElement
這個範例示範如何在 Storyboard 中使用 MediaTimeline 來控制 MediaElement。
範例
當您在 Storyboard 中使用 MediaTimeline 來控制 MediaElement 的時機時，此功能與其他 Timeline 物件的功能相同，例如動畫。 例如，MediaTimeline 會使用 BeginTime 屬性之類的 Timeline 屬性來指定何時啟動 MediaElement (啟動媒體播放)。 其也會使用 Duration 屬性來指定 MediaElement 作用中的時間長度 (媒體播放持續時間)。 如需將 Timeline 物件與 Storyboard 搭配使用的詳細資訊，請參閱分鏡腳本概觀。
此範例示範如何建立使用 MediaTimeline 來控制播放的簡單媒體播放器。 媒體播放器包括播放、暫停、繼續和停止按鈕。 播放器也有可作為進度列的 Slider 控制項。
下列範例會為媒體播放器建立使用者介面 (UI)。
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SDKSample.MediaTimelineExample" >
<StackPanel Background="Black">
<MediaElement Name="myMediaElement" MediaOpened="Element_MediaOpened"
Width="260" Height="150" Stretch="Fill" />
<!-- Button controls for play, pause, resume, and stop. -->
<StackPanel HorizontalAlignment="Center" Width="260" Orientation="Horizontal">
<Image Name="PlayButton" Source="images\UI_play.gif" Margin="30,10,10,10" />
<Image Name="PauseButton" Source="images\UI_pause.gif" Margin="10" />
<Image Name="ResumeButton" Source="images\UI_resume.gif" Margin="10" />
<Image Name="StopButton" Source="images\UI_stop.gif" Margin="10" />
</StackPanel>
<!-- Ths slider shows the progress of the media. -->
<Slider Name="timelineSlider" Margin="5" Width="250" HorizontalAlignment="Center"/>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Image.MouseDown" SourceName="PlayButton">
<EventTrigger.Actions>
<BeginStoryboard Name= "myBegin">
<Storyboard SlipBehavior="Slip">
<!-- The MediaTimeline controls the timing of the video and acts like other Timeline objects.
For example, although the video clip (numbers.wmv) lasts longer, playback ends after six
seconds because that is the duration of the MediaTimeline (Duration="0:0:6"). -->
<MediaTimeline Source="media\numbers.wmv" Storyboard.TargetName="myMediaElement"
BeginTime="0:0:0" Duration="0:0:6" CurrentTimeInvalidated="MediaTimeChanged" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<!-- These triggers impliment the functionality of the Pause, Resume
and Stop buttons.-->
<EventTrigger RoutedEvent="Image.MouseDown" SourceName="PauseButton">
<EventTrigger.Actions>
<PauseStoryboard BeginStoryboardName="myBegin" />
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseDown" SourceName="ResumeButton">
<EventTrigger.Actions>
<ResumeStoryboard BeginStoryboardName="myBegin" />
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseDown" SourceName="StopButton">
<EventTrigger.Actions>
<StopStoryboard BeginStoryboardName="myBegin" />
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
</StackPanel>
</Page>
下列範例會建立進度列的功能。
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace SDKSample
{
public partial class MediaTimelineExample : Page
{
// When the media opens, initialize the "Seek To" slider maximum value
// to the total number of miliseconds in the length of the media clip.
private void Element_MediaOpened(object sender, EventArgs e)
{
timelineSlider.Maximum = myMediaElement.NaturalDuration.TimeSpan.TotalMilliseconds;
}
private void MediaTimeChanged(object sender, EventArgs e)
{
timelineSlider.Value = myMediaElement.Position.TotalMilliseconds;
}
}
}
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Namespace SDKSample
Partial Class MediaTimelineExample
Inherits Page
' When the media opens, initialize the "Seek To" slider maximum value
' to the total number of miliseconds in the length of the media clip.
Private Sub Element_MediaOpened(ByVal sender As Object, ByVal e As RoutedEventArgs)
timelineSlider.Maximum = myMediaElement.NaturalDuration.TimeSpan.TotalMilliseconds
End Sub
Private Sub MediaTimeChanged(ByVal sender As Object, ByVal e As EventArgs)
timelineSlider.Value = myMediaElement.Position.TotalMilliseconds
End Sub
End Class
End Namespace 'SDKSample
