MediaElement control in Windows Phone 7

In this article you will learn about the usage of MediaElement control in Windows Phone 7 application.
  • 4911

Windows 7 MediaElement

As you learn about the MediaElement in my past article Silverlight is able to do so using an embedded media player so that the client system does not need to have a player installed. This is a different approach from other media technologies. Adding media to a page is as simple as adding a MediaElement to your markup and providing a Uniform Resource Identifier (URI) to the media to play. You can interactively control media playback by using the Play, Pause, Stop and Volume controling methods of a MediaElement object.

Silverlight media support on Windows Phone is based on the native media stack used on Windows Phone 7 Series. Supported frame rates are typically lower than those available on desktop computers. MediaElement renders video at the original encoded resolution of the video, but you can override that by explicitly setting the Height,Width, and Stretch properties. Full screen mode is not supported on Windows Phone, but you can use the full screen to display video by setting the height and width of the MediaElement to the size of the application.

Example:

<phone:PhoneApplicationPage
    x:Class="WindowsPhoneApplication2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
 
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="339"/>
            <RowDefinition Height="429*"/>
        </Grid.RowDefinitions>
        <MediaElement Height="238" HorizontalAlignment="Left" Margin="12,12,0,0" Name="mediaElement1" 
                    VerticalAlignment="Top" Width="424" Source="/a.wmv" />
 
        <Button Content="Play" Height="81" HorizontalAlignment="Left" Margin="12,258,0,0"
 
       Name="PlayButton" VerticalAlignment="Top" Width="134" Click="PlayButton_Click" />
        <Button Content="Pause" Height="81" HorizontalAlignment="Left" Margin="152,258,0,0"
              Name="PauseButto" VerticalAlignment="Top" Width="124" Click="PauseButto_Click" />
        <Button Content="Stop" Height="81" HorizontalAlignment="Right" Margin="0,258,65,0"
       Name="StopButton" VerticalAlignment="Top" Width="133" Click="StopButton_Click" />
    </Grid>
</
phone:PhoneApplicationPage>
 

// Mainpage.xaml.vb code

Partial Public Class MainPage
    Inherits PhoneApplicationPage

    ' Constructor
    Public Sub New()
        InitializeComponent()
        mediaElement1.AutoPlay = True
    End Sub

    Private Sub PlayButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        mediaElement1.Play()
    End Sub

    Private Sub PauseButto_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        mediaElement1.Pause()
    End Sub
 
    Private Sub StopButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs
        mediaElement1.Stop()
    End Sub
End Class

Output Window

1.gif
 

Conclusion

Hope this article help you to understand the working of MediaElement control in Windows Phone 7.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.