Technique SL3:Controlling Silverlight MediaElement Audio Volume

Example 1: Providing a volume control and a Mute control as part of a set of user interface controls that go with a MediaElement

In addition to the Play Pause Stop controls, application authors can also provide a dedicated control that changes the Volume property of the MediaElement. The typical control for setting a discrete volume is Slider, because Slider is designed for input of discrete values from a range. Adjusting Volume with a data bound Slider changes the volume of any actively playing media, independent of the system volume or of any other audio source controlled by Silverlight. For Volume as set with the Slider, the Binding in XAML declares the interaction between the control and the MediaElement, without requiring an event handler. However, not all users will be able to interact quickly with a Slider, particularly if they are not using a mouse. To help these users, application authors should also include a "Mute" control. Rather than setting Volume to 0, application authors should instead set IsMuted to true. Note that Volume and IsMuted values are not directly related; if IsMuted is set to true, that does not set Volume to 0, nor does setting Volume to zero cause IsMuted to be set true.

<UserControl x:Class="MediaElementControls.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >
   <Grid x:Name="LayoutRoot">
       <StackPanel>
           <MediaElement x:Name="media" Source="/xbox.wmv"
          Width="300" Height="300" 
          AutomationProperties.Name="Video of new Fable game for XBox"           
       />
           <Grid Name="UIControls">
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="*"/>
               </Grid.ColumnDefinitions>
               <Grid.RowDefinitions>
                   <RowDefinition Height="*" />
                   <RowDefinition Height="Auto" />
                   <RowDefinition Height="20" />
               </Grid.RowDefinitions>
               <Button Click="StopMedia" 
    Grid.Column="0" Grid.Row="1" Content="Stop" />
               <Button Click="PauseMedia" 
    Grid.Column="1" Grid.Row="1" Content="Pause" />
               <Button Click="PlayMedia" 
    Grid.Column="2" Grid.Row="1" Content="Play" />
               <Button Click="MuteMedia" 
   Grid.Row="2" Grid.Column="0" Content="Mute" />
               <TextBlock Name="VolumeLabel" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right">Volume</TextBlock>
               <Slider Height="20"
           Value="{Binding Volume, Mode=TwoWay, ElementName=media}"
           Minimum="0" Maximum="1"
           Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2"
               AutomationProperties.LabeledBy="{Binding ElementName=VolumeLabel}"/>
           </Grid>
       </StackPanel>
   </Grid>
</UserControl>

The following is the C# logic.

 private void StopMedia(object sender, RoutedEventArgs e)
 {
     media.Stop();
 }
 private void PauseMedia(object sender, RoutedEventArgs e)
 {
     media.Pause();
 }
 private void PlayMedia(object sender, RoutedEventArgs e)
 {
     media.Play();
 }
 private void MuteMedia(object sender, RoutedEventArgs e)
 {
    Button target = sender as Button;
    // mute if not muted, unmute if already muted, in either case make sure the button content for text and accessibility info is updated
    if (!media.IsMuted)
    {
       media.IsMuted = true;
       target.Content = "Unmute";
    }
    else
    {
        media.IsMuted = false;
        target.Content = "Mute";
    }
 }

This example is shown in operation in the working example of Media Element Controls.