방법: Storyboard를 사용하여 MediaElement 제어
업데이트: 2007년 11월
이 예제에서는 Storyboard의 MediaTimeline을 사용하여 MediaElement를 제어하는 방법을 보여 줍니다.
예제
Storyboard의 MediaTimeline을 사용하여 MediaElement의 타이밍을 제어하는 이 기능은 애니메이션과 같은 다른 Timeline 개체의 기능과 동일합니다. 예를 들어 MediaTimeline은 BeginTime 속성과 같은 Timeline 속성을 사용하여 MediaElement를 시작할 시기, 즉 미디어 재생을 시작할 시기를 지정합니다. 또한 Duration 속성을 사용하여 MediaElement가 활성 상태인 기간, 즉 미디어 재생 기간을 지정합니다. Storyboard와 함께 Timeline 개체를 사용하는 것에 대한 자세한 내용은 Storyboard 개요를 참조하십시오.
이 예제에서는 MediaTimeline을 사용하여 재생을 제어하는 간단한 미디어 플레이어를 만드는 방법을 보여 줍니다. 이 미디어 플레이어에는 재생, 일시 중지, 다시 시작 및 중지 단추가 있습니다. 이 미디어 플레이어에는 진행률 표시줄의 기능을 하는 Slider 컨트롤도 있습니다.
다음 예제에서는 미디어 플레이어의 UI(사용자 인터페이스)를 만듭니다.
<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>
<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>
다음 예제에서는 진행률 표시줄 기능을 만듭니다.
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;
}
}
}
전체 샘플을 보려면 미디어 갤러리를 참조하십시오.
참고 항목
작업
방법: MediaElement 제어(재생, 일시 중지, 정지, 볼륨 및 속도)