Post
Ask Question

Simple Media Element App in WP8.1

For the Interface paste the following code in the MainPage.XAML

  1. <StackPanel>  
  2.         <MediaElement x:Name="myMediaElement"  
  3.                       Height="400"  
  4.                       Width="240"  
  5.                       Margin="0,40,0,40"  
  6.                       MediaEnded="myMediaElement_MediaEnded"      
  7.                        
  8.                       />  
  9.         <Button x:Name="playSoundButton"  
  10.                 Height="80"  
  11.                 Width="390"  
  12.                 Content="Play Sound"  
  13.                 Click="playSoundButton_Click"/>  
  14.         <Button x:Name="playVideoButton"  
  15.         Height="80"  
  16.                 Content="Play video"  
  17.                 Click="playVideoButton_Click" HorizontalAlignment="Stretch" Margin="0,0,10,0"   
  18.                 />  
  19.   
  20.     </StackPanel> 

This Code Will Create Layout Like in the below Image:

In the MainPage.XAML.CS create an enum for the Media Element like this:

  1. public enum MediaState  
  2.   {  
  3.       Stopped,  
  4.       Playing,  
  5.       Paused  
  6.   } 


The Default State of the Media would be stopped:

  1. private MediaState state = MediaState.Stopped; 

We will use this enum to find out the media state of the element.

Paste the following code in the playVideoButton_Click event

  1. if(state == MediaState.Stopped)  
  2. {  
  3.       
  4.   
  5.     myMediaElement.Source = new Uri("ms-appx:///Assets/coffee.mp4", UriKind.RelativeOrAbsolute);  
  6.     playVideoButton.Content = "Playing";  
  7.     playVideoButton.Background = new SolidColorBrush(Colors.Green);  
  8.     state = MediaState.Playing;  
  9.     myMediaElement.Play();  
  10.      
  11.     
  12.       
  13. }  
  14. else if(state == MediaState.Playing)  
  15. {  
  16.     playVideoButton.Content = "Paused";  
  17.     playVideoButton.Background = new SolidColorBrush(Colors.Yellow);  
  18.       
  19.       
  20.     state = MediaState.Paused;  
  21.     myMediaElement.Pause();  
  22.   
  23.   
  24. }  
  25. else if(state == MediaState.Paused)  
  26. {  
  27.     playVideoButton.Content = "Playing";  
  28.     playVideoButton.Background = new SolidColorBrush(Colors.Green);  
  29.     state = MediaState.Playing;  
  30.     myMediaElement.Play();  
  31.   
  32. } 

In the playSoundButton_Click event Paste the following code:

  1. if ( state == MediaState.Playing || state == MediaState.Paused)  
  2. {  
  3.     playVideoButton.Content = "Stopped";  
  4.     playVideoButton.Background = new SolidColorBrush();  
  5. }  
  6.   
  7.   
  8. myMediaElement.Source = new Uri("ms-appx:///Assets/Duck.wav", UriKind.RelativeOrAbsolute );  
  9. myMediaElement.Play(); 

Paste the below code to set out the media state of the element after the media ended:

  1. private void myMediaElement_MediaEnded(object sender, RoutedEventArgs e)  
  2.       {  
  3.           state = MediaState.Stopped;  
  4.   
  5.       } 



Next Recommended Reading What makes an app a Metro Style app