MediaElement control in Silverlight
In this article we are going to look at one of the media controls in silverlight "MediaElement".
MediaElement control in silverlight is used to Play some Media element. Here media refers to either an Audio or a Video or a combination of the two. This Media may exist in different formats from different media vendors such as Microsoft, Real and so on and they save media in proprietary formats.
In this article we are going to look at how to use the MediaElement control in silverlight.
In this article we are going to look at one of the media controls in silverlight "MediaElement".
<Grid x:Name="LayoutRoot" Background="Bisque" Height="450" Width="600">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<MediaElement MouseLeftButtonUp="mediaVideo_MouseLeftButtonUp" AutoPlay="False" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" Margin="10,10,0,0" Name="mediaVideo" VerticalAlignment="Top" Width="300" Height="300" Source="Wildlife.wmv" />
<Button Content="Play" Grid.Row="2" Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="btnPlay" VerticalAlignment="Top" Width="75" Click="btnPlay_Click" />
</Grid>
As shown in the above code drag and drop a MediaElement control in the grid and set its following properties:
Source="Wildlife.wmv" - This is the important property to be set which tells the MediaElement which media file to be played. We need to make sure that the media file "Wildlife.wmv" is located in root of the silverlight project and "Buid Action" property of this media file is set to resource.
AutoPlay="False" - By default this property value is true that means when the page is rendered the media starts playing. We set it to false so that the media is played based on user interest.
MouseLeftButtonUp="mediaVideo_MouseLeftButtonUp"
This causes the event "mediaVideo_MouseLeftButtonUp" to be fired when user performs the MouseLeftButtonUp action on the media element. which causes the media file(Audio/Video) to pause or resume playing based on the current state.
Grid.Row="0" Grid.Column="0" causes the UI element to be diplayed at row 0 and column 0 of the Grid.
HorizontalAlignment="Left"
Margin="10,10,0,0"
Name="mediaVideo" to identify the media file in the code file.
VerticalAlignment="Top"
Width="300"( optional-based on the requirement)
Height="300" (optional-based on the requirement)
code to be placed in the code-behind file:
private void btnPlay_Click(object sender, RoutedEventArgs e)
{
//Play the video when user clicks the Play button.
this.mediaVideo.Play();
}
private void mediaVideo_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
//Toggles the CurrentState of the mediaVideo that is
//If the media is playing it pauses and if it is in paused state it is played.
if (mediaVideo.CurrentState == MediaElementState.Playing)
{
mediaVideo.Pause();
}
else
{
mediaVideo.Play();
}
}
Now run the project (Ctrl +F5) and see the output.
Follow