Gewusst wie: Steuern eines MediaElement mit einem Storyboard

Artikel
08/10/2011

In diesem Beispiel wird das Steuern eines MediaElement unter Verwendung von MediaTimeline in einem Storyboard gezeigt.

Beispiel

Wenn eine MediaTimeline in einem Storyboard zur zeitlichen Steuerung eines MediaElement verwendet wird, ist die Funktionalität identisch mit der Funktionalität anderer Timeline-Objekte, z. B. Animationen. Eine MediaTimeline verwendet beispielsweise Timeline-Eigenschaften, z. B. die BeginTime-Eigenschaft, um anzugeben, wann ein MediaElement gestartet werden soll (Medienwiedergabe starten). Weiterhin wird die Duration-Eigenschaft verwendet, um anzugeben, wie lange das MediaElement aktiv ist (Medienwiedergabedauer). Weitere Informationen zum Verwenden von Timeline-Objekten mit einem Storyboard finden Sie unter Übersicht über Storyboards.

Im folgenden Beispiel wird ein einfacher Media Player erstellt, der zum Steuern der Wiedergabe eine MediaTimeline verwendet. Der Media Player enthält Schaltflächen für Wiedergabe, Pause, Fortsetzen und Beenden. Der Player verfügt als Statusanzeige zusätzlich über ein Slider-Steuerelement.

Im folgenden Beispiel wird user interface (UI) für den Media Player erstellt.

<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>

Im folgenden Beispiel werden die Funktionen der Statusanzeige erstellt.

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;
        }

    }
}

Siehe auch

Freigeben über

Gewusst wie: Steuern eines MediaElement mit einem Storyboard

Beispiel

Siehe auch

Aufgaben

Referenz

Konzepte

Weitere Ressourcen

Zusätzliche Ressourcen