W12: Creating a simple Media Player for Windows Phone 7

In this tutorial I will create a simple Media Player application for playing various videos (e.g in .wmv format). I am going to use MediaElement control as a media container for a player. I will also create few buttons to control the video media flow (Play, Pause, Stop) and a progress bar showing the current progress. In the end of this lesson I will show an alternative way to play a media stream using MediaPlayerLauncher.

Source code

• Source code (.zip) for Windows Phone 7 Media Player application

Additional information

• Play, Pause, Stop icons
• MediaPlayerLauncher
• Supported Media Codecs for Windows Phone

1. Creating a new project

First of all you need to create a new project. To do so open Visual Studio 2010 -> File -> New Project -> select Windows Phone Application there as it is shown on picture bellow.

2. Adding icons to solution

Now we need to add three icons for the Media Player: play, pause and stop icon to our Project. You can download icons from here or create your own. Make sure that “Build Action” property is “Content” and “Copy to output directory” property is switched to “Copy if newer“. Check image bellow for better understanding.

3. Modifying XAML: Orientation

In MainPage.xaml switch SupportedOrientations attribute of PhoneApplicationPage element to PortraitOrLandscape.

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

4. Modifying XAML: ContentGrid

In MainPage.xaml add MediaElement control and Progress Bar control to ContentGrid. Set AutoPlay property of MediaElement to true. Do not forget to add RowDefinitions to grid to make it possible to resize controls automatically in future.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>
    <MediaElement Name="myMediaElement" AutoPlay="True" Grid.Row="0" />
    <ProgressBar Name="pbVideo" Grid.Row="1" />
</Grid>

5. Modifying XAML: ApplicationBar

Next we need to create an ApplicationBar in MainPage.xaml. ApplicationBar will contain 3 buttons to operate with media content: play, pause, stop. I have used the following XAML for that:

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" >
        <shell:ApplicationBarIconButton IconUri="/icons/play.png" Click="Play_Click"  Text="Play"/>
        <shell:ApplicationBarIconButton IconUri="/icons/pause.png" Click="Pause_Click"  Text="Stop"/>
        <shell:ApplicationBarIconButton IconUri="/icons/stop.png" Click="Stop_Click" Text="Stop"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

6. Adding functionality

Finally, we have to modify MainPage.xaml.cs file to add functionality for events. The code is very simple so I will not describe it in details. Pay attention that I have used DispatcherTimer object to update the progress bar.

public partial class MainPage : PhoneApplicationPage
{
    // varibles and properties
    DispatcherTimer currentPosition = new DispatcherTimer(); 

    // Constructor
    public MainPage()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(MainPage_Loaded);
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        myMediaElement.MediaOpened += new RoutedEventHandler(myMediaElement_MediaOpened);
        myMediaElement.MediaEnded += new RoutedEventHandler(myMediaElement_MediaEnded);
        myMediaElement.CurrentStateChanged += new RoutedEventHandler(myMediaElement_CurrentStateChanged);
        currentPosition.Tick += new EventHandler(currentPosition_Tick);

        myMediaElement.Source = new Uri("http://ecn.channel9.msdn.com/o9/ch9/4807/574807/ISWPE05SLToolKitForWP_ch9.wmv", UriKind.Absolute);
    }

    void myMediaElement_CurrentStateChanged(object sender, RoutedEventArgs e)
    {
        if (myMediaElement.CurrentState == MediaElementState.Playing)
        {
            currentPosition.Start();
            ((ApplicationBarIconButton)ApplicationBar.Buttons[0]).IsEnabled = false; // play
            ((ApplicationBarIconButton)ApplicationBar.Buttons[1]).IsEnabled = true;  // pause
            ((ApplicationBarIconButton)ApplicationBar.Buttons[2]).IsEnabled = true;  // stop
        }
        else if (myMediaElement.CurrentState == MediaElementState.Paused)
        {
            currentPosition.Stop();
            ((ApplicationBarIconButton)ApplicationBar.Buttons[0]).IsEnabled = true; // play
            ((ApplicationBarIconButton)ApplicationBar.Buttons[1]).IsEnabled = false;  // pause
            ((ApplicationBarIconButton)ApplicationBar.Buttons[2]).IsEnabled = true;  // stop
        }
        else
        {
            currentPosition.Stop();
            ((ApplicationBarIconButton)ApplicationBar.Buttons[0]).IsEnabled = true; // play
            ((ApplicationBarIconButton)ApplicationBar.Buttons[1]).IsEnabled = false;  // pause
            ((ApplicationBarIconButton)ApplicationBar.Buttons[2]).IsEnabled = false;  // stop
        }
    }

    void myMediaElement_MediaEnded(object sender, RoutedEventArgs e)
    {
        myMediaElement.Stop();
    }

    void myMediaElement_MediaOpened(object sender, RoutedEventArgs e)
    {
        pbVideo.Maximum = (int)myMediaElement.NaturalDuration.TimeSpan.TotalMilliseconds;
        myMediaElement.Play();
    }

    void currentPosition_Tick(object sender, EventArgs e)
    {
        pbVideo.Value = (int)myMediaElement.Position.TotalMilliseconds;
    }

    private void Play_Click(object sender, EventArgs e)
    {
        myMediaElement.Play();
    }

    private void Pause_Click(object sender, EventArgs e)
    {
        myMediaElement.Pause();
    }

    private void Stop_Click(object sender, EventArgs e)
    {
        myMediaElement.Stop();
    }

}

Alternative way: Using MediaPlayerLauncher

Another way to open a media stream is using MediaPlayerLauncher. This class is located in Microsoft.Phone.Tasks namespace. To open Media stream using MediaPlayerLauncher you simply need to specify the Media property and call Show() method (check code bellow).

MediaPlayerLauncher mediaPlayerLauncher = new MediaPlayerLauncher() { Media = new Uri("http://ecn.channel9.msdn.com/o9/ch9/4807/574807/ISWPE05SLToolKitForWP_ch9.wmv", UriKind.Absolute) };
mediaPlayerLauncher.Show();

Right after Show method is called a Windows Phone Media Player application will open displaying the specified video. The result will look similar to image bellow. If you click on hardware back button you will be navigated back to your application.