How to: Control a MediaElement by Using a Storyboard
This example shows how to control a MediaElement by using a MediaTimeline in a Storyboard.
Example
When you use a MediaTimeline in a Storyboard to control the timing of a MediaElement, the functionality is identical to the functionality of other Timeline objects, such as animations. For example, a MediaTimeline uses Timeline properties like the BeginTime property to specify when to start a MediaElement (start media playback). It also uses the Duration property to specify how long the MediaElement is active (duration of media playback). For more information about using Timeline objects with a Storyboard, see Storyboards Overview.
This example shows how to create a simple media player that uses a MediaTimeline to control playback. The media player includes play, pause, resume, and stop buttons. The player also has a Slider control that acts as a progress bar.
The following example creates the user interface (UI) for the media player.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>
The following example creates the functionality for the progress bar.
Imports System
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 'Element_MediaOpened
Private Sub MediaTimeChanged(ByVal sender As Object, ByVal e As EventArgs)
timelineSlider.Value = myMediaElement.Position.TotalMilliseconds
End Sub 'MediaTimeChanged
End Class 'MediaTimelineExample
End Namespace 'SDKSample
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;
}
}
}
For the complete sample, see Media Gallery.
See Also
Tasks
How to: Control a MediaElement (Play, Pause, Stop, Volume, and Speed)
Concepts
WPF Graphics, Animation, and Media Overview