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.

Volume and Balance

There are three properties that you can use to control the audio volume for the media. The simplest is IsMuted. When set to true, all of the audio is disabled. For more fine-grained control you can set the Volume property. This double-precision floating-point value ranges from zero to one. A value of zero gives silence. Setting the property to one means that the volume of the media matches the system volume.

The third property allows you to control the balance between left and right speakers. Balance defaults to zero, meaning that the volumes match. Negative values move the audio to the left, with -1 meaning full volume at the left and silence to the right. A positive value gives louder audio to the right, with a maximum value of one.

Let's enable these features. Replace the XAML for the Mute button and the volume and balance sliders with that shown below. This registers the Click event for the button and the ValueChanged events of the sliders.

<ToggleButton Click="MuteButton_Click" Margin="0 5 0 0">Mute</ToggleButton>

<TextBlock FontSize="10">Volume</TextBlock>
<Slider Name="VolumeSlider"
        Value="0.75" Maximum="1"

<TextBlock FontSize="10">Balance</TextBlock>
<Slider Name="BalanceSlider"
        Value="0" Minimum="-1" Maximum="1"

Now add the code for the events. The mute button simply toggles the IsMuted property. The two sliders are configured so that their current value can be copied directly into the appropriate property.

private void MuteButton_Click(object sender, RoutedEventArgs e)
    Media.IsMuted = !Media.IsMuted;

private void VolumeSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    Media.Volume = VolumeSlider.Value;

private void Balance_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    Media.Balance = BalanceSlider.Value;

Run the program, load an audio file, or a video with audio, and use the three controls to hear the results.

Controlling Playback Speed

The last property that we'll look at in this article is SpeedRatio. It allows you to change the playback speed of the loaded media. The default value of one plays the media normally. Increasing the value speeds up the clip and decreasing it slows it down. For example, setting the value to three will treble the playback speed, whilst changing it to 0.25 will cause the media to play at one quarter speed.

Add the ValueChanged event to the speed slider, as follows:

<Slider Name="SpeedSlider"
        Value="1" Minimum="0" Maximum="4"
        0, 0.25, 0.5, 1, 2, 4

You can now create the method that changes the property in response to the user adjusting the slider.

private void Speed_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    Media.SpeedRatio = SpeedSlider.Value;

Run the program for a final time and try adjusting the speed whilst playing media.

5 August 2014