MediaElement control in Silverlight using VB.NET

In this article we will learn how to use MediaElement control in Silverlight 4 using VB.NET.
  • 2668

In this article we will learn how to use MediaElement control in Silverlight 4 using VB.NET.

MediaElement control

MediaElement control is used to Represent an object that contains audio, video, or both.

Properties - This control has the following properties.


Figure 1.

Source - The Source property specifies name of the media file to be played immediately after the MediaElement object has loaded.

AutoPlay - To stop the the media from starting automatically, set the AutoPlay property to false.

Silverlight supports WMA media.

WMV (Windows Media video)

Short for Windows Media video, a Microsoft file format for encoding digital video files similar to video file though can compress files at a higher rate than video file. WMA files, which use the .wmv file extension, can be of any size compressed to match many different connection speeds, or bandwidths. You can download it with the given below link.

Download WMV Converter 

Creating MediaElement in XAML

<MediaElement Height="238" HorizontalAlignment="Left" Margin="12,12,0,0" Name="mediaElement1"


VerticalAlignment="Top" Width="424" Source="tere.wmv" Volume="1" />


The Width and Height property represents the width and the height of the control. Name property represents name of the control.


How to set Video file


If you dont want to store your file to the ClientBin folder do this: from Visual Studio right click on the Video file and select Properties. Now in Properties window change Build Action to Resource. This ensures the file gets copied to the ClientBin folder during execution.

Figure 2.

Now set build action -> Resource property.


Figure 3.


Source property

The following code snippet sets the Source property to a .wmv file.

<MediaElement Source="tere.wmv" />

For Example

Drag and drop a MediaElement and three Button controls on the page and name them mediaElement1, Play Button, Pause Button. The form looks like this.


Figure 4.

XAML code

<UserControl x:Class="SilverlightApplication49.MainPage"






    d:DesignHeight="300" d:DesignWidth="400">


    <Grid x:Name="LayoutRoot" Background="White" Width="460" Height="360">


        <MediaElement Height="238" HorizontalAlignment="Left" Margin="12,12,0,0"Name="mediaElement1"


         VerticalAlignment="Top" Width="388" Source="tere.wmv" Volume="1" />


        <Button Content="Play" Height="28" HorizontalAlignment="Left" Margin="12,258,0,0"


       Name="PlayButton" VerticalAlignment="Top" Width="88" Click="PlayButton_Click" />


        <Button Content="Pause" Height="30" HorizontalAlignment="Right" Margin="0,258,255,0"


              Name="PauseButto" VerticalAlignment="Top" Width="85" Click="PauseButto_Click" />




Now double click on the play button and add the following code.


Private Sub PlayButton_Click(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedEventArgs)


    End Sub


Now double click on the pause button and add the following code.


Private Sub PauseButto_Click(ByVal sender As System.Object, ByVal e AsSystem.Windows.RoutedEventArgs)


    End Sub

Set AutoPlay property to false

Public Sub New()


        mediaElement1.AutoPlay = False

    End Sub


Now run the application press CTRL+F5.



Figure 5.


Now to play the video click on the play Button. 



Figure 6.


To Pause the Video click on the Pause Button.


More Articles

© 2020 DotNetHeaven. All rights reserved.