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

The eighty-fifth part of the Windows Presentation Foundation Fundamentals tutorial begins to look at the MediaElement control. This control allows the playing of a wide range of media, including audio and video.

Loading Media

Loading a media clip into the control is as simple as setting its Source property. This property accepts a value of the Uri type, which can be configured with the address of a clip using a universal resource locator (URL) or a file name.

For the purposes of the demonstration we'll load media clips from disk, locating them using a standard dialog box. We'll display the dialog box in response to the user clicking the Load button. To do so, register the Click event against this button by modifying its XAML, as follows:

<Button Grid.Row="1" Grid.Column="1" Click="LoadButton_Click">Load</Button>

To simplify access the open file dialog box, add the following using directive to the code behind the window.

using Microsoft.Win32;

We can now define the code for the event. The following method, when added behind the window, shows the open file dialog box. If the user selects a media file and clicks the OK button, the specified path and file name are loaded into a Uri. This Uri is assigned to the Source property of the MediaElement. The file name is also displayed in the area at the bottom of the window.

private void LoadButton_Click(object sender, RoutedEventArgs e)
{
    var dialog = new OpenFileDialog();
    dialog.Title = "Choose Media";
    if (dialog.ShowDialog() == true)
    {
        Media.Source = new Uri(dialog.FileName);
        MediaName.Text = dialog.FileName;
    }
}

Run the program to test it. Click the Load button and select an audio or video file before clicking OK. The file will be loaded into the player and will begin automatically.

Changing the Loaded Behaviour

As you have seen, the default behaviour is to start the clip automatically when the Source property is set. In addition, when played in this mode, the methods that allow the clip to be paused, resumed or stopped are unavailable. In many situations this behaviour is acceptable. In the case of a media player, we want to be able to control the playback manually.

To change the action when a media clip is loaded, you can change the LoadedBehavior property. This is set to a value from the MediaState enumeration, although in the XAML a string matching one of the defined values is used instead. There are five possible values, of which two are of interest:

  • Play. The video or audio starts to play automatically when loaded into the control.
  • Manual. The media does not play automatically and the control methods are made available.

To change the control to allow manual control, update the XAML for the MediaElement, as shown below:

<MediaElement Name="Media" Margin="2" LoadedBehavior="Manual"/>

Basic Media Control

With the loading behaviour modified, our media player is no longer able to play any video or music. We need to add the commands that allow us to start, stop and pause the media. We'll link these to the first three buttons in the StackPanel at the right of the window. Modify these controls to register their Click events.

<Button Click="PlayButton_Click">Play</Button>
<Button Click="PauseButton_Click">Pause</Button>
<Button Click="StopButton_Click">Stop</Button>

Now add the methods that control the playback, as follows:

private void PlayButton_Click(object sender, RoutedEventArgs e)
{
    if (Media.Source != null)
        Media.Play();
}

private void PauseButton_Click(object sender, RoutedEventArgs e)
{
    if (Media.CanPause)
        Media.Pause();
}

private void StopButton_Click(object sender, RoutedEventArgs e)
{
    if (Media.Source != null)
        Media.Stop();
}

Note the three if statements. In the case of the Play and Stop methods, we check whether or not a Source has been set. If the property is null, there is no clip to start or stop. Pause is slightly different. It is possible that the clip being played cannot be paused. For example, it may be a live video that is being streamed through the Internet. We can check whether or not the Pause method is available by reading the Boolean CanPause property, which is true if the method is available.

5 August 2014