BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Media Controls - MediaElement - Media Events

The eighty-sixth part of the Windows Presentation Foundation Fundamentals tutorial continues the examination of the MediaElement control. This article adds events to the example player to detect media opening, ending and failing.

MediaElement

In the previous article we started to look at the MediaElement control. This control allows you to play audio or video. In the first article about this control we demonstrated the basic methods and properties required to play, pause and stop video, to control the volume of audio, and to alter the playback speed. To do so, we created a basic media player project.

In this article we will add to the media player to demonstrate the three media events. These allow you to detect when media is opened, when it plays through to the end or when there is an error during playback. If you do not have the source code for the project, you can download it via the link at the top of the previous article or create it using the earlier code samples.

We'll add a small indicator to the main window and change its colour in response to media events. On loading, the indicator will be grey to indicate that no media event has yet been detected.

To add the indicator, locate the TextBlock with the name, "MediaName". Replace the XAML for this control with the code below. This moves the TextBlock so that it is in a Grid that also holds the indicator, which is an Ellipse.

<Grid Grid.Row="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
            
    <TextBlock Name="MediaName" Foreground="White">No Media</TextBlock>
    <Ellipse Name="Status" Grid.Column="1" Width="16" Height="16" Fill="Gray" Margin="2"/>
</Grid>

The updated window design appears as shown below. You can see the ellipse between the TextBlock and the Button at the bottom of the window.

MediaElement demonstration window

Media Events

We can now add the three media events to the MediaElement control. The three events are:

  • MediaOpened. This event is raised when the media is loaded. In the sample media player this happens when you first click the Play button. Although we've labelled the Button, "Load", this does not actually open the media. It simply sets the path to the video or audio file in the Source property.
  • MediaEnded. This event is raised when the media is played to the end and stops automatically.
  • MediaFailed. This event is raised if there is an error during playback.

Modify the XAML for the MediaElement, as follows:

<MediaElement Name="Media"
              Margin="2"
              LoadedBehavior="Manual"
              MediaOpened="Media_MediaOpened"
              MediaEnded="Media_MediaEnded"
              MediaFailed="Media_MediaFailed"/>

We can now add the code that changes the colour of the ellipse in response to events. For the MediaOpened event we'll use green, for MediaEnded we'll change the colour to blue and we'll show a red indicator in response to MediaFailed.

private void Media_MediaOpened(object sender, RoutedEventArgs e)
{
    Status.Fill = Brushes.Green;
}

private void Media_MediaEnded(object sender, RoutedEventArgs e)
{
    Status.Fill = Brushes.Blue;
}

private void Media_MediaFailed(object sender, ExceptionRoutedEventArgs e)
{
    Status.Fill = Brushes.Red;
}

Run the program to test the events. Select a media file and click the Play button to see the colour change to green. Allow the media to play until completion to see the blue indicator. To force an error and demonstrate the MediaFailed event, try playing a file that does not contain valid media.

8 August 2014