Working with MediaElement control in Silverlight 2.0.

 

In this lab, we will try to work with Silverlight Control called “MediaElement”. I will not do anything Fancy. So, let’s start working with our MediaElement control.

1) Create a Silverlight Application using Visual Studio 2008 and write the bellow code to see a simple media element design-

The code for above design is as follows-

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SLMediaElement.Page"
    Width="640" Height="480" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">


    <Canvas x:Name="LayoutRoot" Background="Black">
        <Border Height="395" Width="590" Canvas.Left="25" Canvas.Top="35" Background="#FF000000" BorderBrush="#FFD1D448" BorderThickness="5,5,5,5" CornerRadius="10,10,10,10">
            <MediaElement Height="385" Width="580" Canvas.Left="25" Canvas.Top="35" Stretch="Fill" x:Name="MediaPlayer"/>
        </Border>
        <Button Height="30" Width="50" Canvas.Left="119" Canvas.Top="434" Content="Play" x:Name="btnPlay" Click="btnPlay_Click"/>
        <Button Height="30" Width="50" Content="Pause" Canvas.Left="173" Canvas.Top="434" x:Name="btnPause" Click="btnPause_Click"/>
        <Button Height="30" Width="50" Content="Stop" Canvas.Left="477" Canvas.Top="434" x:Name="btnStop" Click="btnStop_Click"/>
        <Slider Height="29" Width="179.25" Canvas.Left="233.75" Canvas.Top="434" x:Name="ControlVolume" Maximum="100" ValueChanged="ControlVolume_ValueChanged"/>
        <TextBlock Height="18" Width="89.5" Canvas.Left="273.75" Canvas.Top="460" Text="Control Volume" TextWrapping="Wrap" Foreground="#FFFFFFFF"/>
        <Button Height="30" Width="50" Content="Mute" x:Name="btnMute" Canvas.Left="422" Canvas.Top="434" Click="btnMute_Click"/>
    </Canvas>
</UserControl>

2) Now as you are done with the design part, let’s write the code for Loading, Playing, Pause and Stopping the Video which we are playing-

3) Add a video (.wmv) file in ClientBin folder which you like.

4) For Playing the Video, let’s write the code on “Play” button click Event as follows-

private void btnPlay_Click(object sender, RoutedEventArgs e)
{
   MediaPlayer.Play();            
}

5) For Pausing the Video, let’s write the code on “Pause” button click Event as follows-

private void btnPause_Click(object sender, RoutedEventArgs e)
{
   MediaPlayer.Pause();
}

6) For Changing the Volume, let’s write the code on “Control Volume” Slider Change Event as follows-

private void ControlVolume_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
   MediaPlayer.Volume = ControlVolume.Value;
}

7) To Mute the Volume, let’s write the code on “Mute” button click Event as follows-

bool flag=false;
private void btnMute_Click(object sender, RoutedEventArgs e)
{
  if (flag == false)
  {
      MediaPlayer.IsMuted = true;
      flag = true;
  }
  else
  {
      MediaPlayer.IsMuted = false;
      flag = false;
  }
}

8) For Stopping the Video, let’s write the code on “Stop” button click Event as follows-

private void btnStop_Click(object sender, RoutedEventArgs e)
{
  MediaPlayer.Stop();
}

9) So, That’s all !! You are done with the assignment. Hit F5 and Test the application.

Note- We will try out the Same MediaElement control in more fancy way in future.

Now as you have completed writing the eighth Silverlight Lab, let’s have a closer look on Ninth lab – “Consuming Web Services in Silverlight 2.0.”