방법: Storyboard를 사용하여 MediaElement 제어

  • 아티클

이 예제는 Storyboard에서 MediaTimeline을 사용하여 MediaElement를 제어하는 방법을 보여 줍니다.

예제

Storyboard에서 MediaTimeline을 사용하여 MediaElement의 타이밍을 제어하는 경우 기능은 애니메이션 등 다른 Timeline 개체의 기능과 동일합니다. 예를 들어 MediaTimeline은 BeginTime과 같은 Timeline 속성을 사용하여 MediaElement를 시작할 시간(미디어 재생 시작)을 지정합니다. 또한 Duration 속성을 사용하여 MediaElement가 활성 상태인 기간(미디어 재생 시간)도 지정합니다. Storyboard에 Timeline 개체를 사용하는 방법에 대한 자세한 내용은 스토리보드 개요를 참조하세요.

이 예제는 MediaTimeline을 사용하여 재생을 제어하는 간단한 미디어 플레이어를 만드는 방법을 보여 줍니다. 미디어 플레이어에는 재생, 일시 중지, 다시 시작 및 중지 단추가 포함됩니다. 플레이어에는 진행률 표시줄 역할을 하는 Slider 컨트롤도 있습니다.

다음 예제는 미디어 플레이어의 사용자 인터페이스를 만듭니다.

<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

참고 항목