Using FileOpenPicker in Windows Phone 8.1 to choose picture from Picture Gallery

In this tutorial I will show you how you could use Windows Phone 8.1’s FileOpenPicker API to access the picture gallery. It is quite simple to implement but I couldn’t find good resources which showed how it can be done. This tutorial will let you to either click or choose an image from the picture gallery and display it in your app. Here are the steps,

Step 1: Add Picture Library Capability in your Windows Phone 8.1 app

Open the Package.appmanifest file in your project and tick Picture Library under the Capabilities tab.

Step 2: Add File Open Picker as a declaration

Navigate to the Declarations tab and add File Open Picker as a supported declaration. Also under the Properties section of the declaration choose all the supported file types for your application. In our case we have added .jpg, .png, .bmp and .jpeg. You may tick the Supports any file type checkbox if you wish.

Step 3: Add a button and image to MainPage.xaml

For the purpose of demonstration, we have added an image and button control in our MainPage.xaml.

Step 4: Add global variables view and ImagePath

The variable view is of type CoreApplicationView and holds the current application view. ImagePath is a string which holds the path of the image.
Also initialize the view in the page’s default constructor.

Step 5: Add the code to call the File Open Picker on Button Click event

We call the File Open Picker API on Button click event and add the subset of supported file types to the call.

Step 6: On View activated event set the image to the MainPage

The picked file is saved to storageFile and it is then decoded to a Bitmap image before displaying it in the UI.

Download MediaGallery

Integrating video file in Windows Phone 8 and Windows 8 app as app background

These days few top developers are using a video as app’s background. You would imagine it’s quite simple to do so. Yes, the process is small but you should know how exactly it must be done. We don’t just want a video put in the background but we want it to play in loops and also if the user navigates to some other page, it doesn’t start over from the beginning. Just putting a video in the background will work fine if it’s a single page app but the issue with this approach, if the user navigates to the next page, the video will start over in the next page (even if the first page passes the time elapsed of the video to the next page, you will notice a very ugly blinking in the video). Here’s what we mean:

It’s important to understand the architecture behind modern Windows apps. Every time you want to navigate from a page to another, the Frame will render the new page.

 

 

Windows Phone 8.1 XAML or Windows 8.1 app

So to have one infinite video which plays on all pages, we just need to add the MediaElement to the Frame level instead of the page level. To do this, we will need to modify the default template of the Frame. I’ve created the following style to the App.xaml, and gave it the key name RootFrameStyle.

All what we did there is changing the template to a Grid. Inside that grid we’ve added a MediaElement control behind the ContentPresenter. After that, in App.xaml.cs we apply the style to the Frame:


Note: Set the Background of your pages as Transparent or else you won’t be able to view the video.  

Windows Phone 8 (Silverlight app)

While developing for Windows Phone 8 (Silverlight app) set the target as phone:PhoneApplicationFrame instead of Frame.   And set the Style as follows:

Note: MediaElement in Windows Phone 8 Silverlight app doesn’t support IsLooping. So you will have to manually loop the video.

We used Tareq Ateik’s awesome blog post to build this tutorial. You can download the full source code for both projects and use it as a reference.

Windows Phone 8

Download VideoBG.zip (WP 8)

Windows Phone 8.1 and Windows 8.1

Download Video_BG.zip (WP 8.1 & Windows 8.1)

How to enable Background audio in multiple pages in Windows phone application

In my last post I had explained you how to play a media file in Windows phone app using Media element control.

http://www.windowsapptutorials.com/windows-phone/media/play-audio-file-windows-phone-app-using-media-element-control/

 

But when you want to play a continuous audio in the background you may face a problem as you navigate from one page to another as music will stop when you leave the page where the mediaelement control is defined. To overcome this problem one way is to define the Mediaelement globally. So in this post I shall be explaining you about how to define a global media element in Windows phone application.

 

1. First create a new blank project GlobalMediaelement.

 


 

2. Then add a new page to the application having the name Page1.xaml.

 


 

3. Now we need to add a Gloabal Media Element to our Application. So Open the page App.xaml and add the following code given below.

 

 


 

4. Now open the page App.xaml.cs and add the following code given below globally in the page.

 

 


 

This code is used to define the Mediaeneded event handler of the Mediaelement which will restart the song as it ends. You can manipulate it according to your needs.

 

5. Now add three buttons on the MainPage. The first button is used to play the audio, second one is used to stop the audio and third one is to navigate to Page1.xaml.The code for click event handlers of the buttons are given below.

 

Play button

 

 

Stop button

 

 

Navigate button

 

 

6. Now run the application on emulator. And Click on the play button. You will hear a background audio running in your application.

 


 

Now as you navigate on to Page1.xaml you will see that Background music will not stop and will be played continuously.

I hope this post will be helpful to you. You can download the full project source file from the link given below.

 
Download full project source file GlobalMediaElement.zip
 

How to play Video or Music in Windows phone app using Mediaplayer Launcher

In this article we will learn about the Media Player Launcher that helps to launch the Windows Phone Media Player from our app. It can be used to play the Video or music with uniform Media Player interface.

 

1. First create a new project having the name Mediaplayer.

 


 

2. Before going further add the following Namespace required for the above tasks in the MainPage.xaml.cs.


 

MediaPlayerLauncher

MediaPlayerLauncher launches the Media Player application and plays the specified media file.
Media files can be stored in isolated storage, the application’s installation directory or any other location not belonging to the phone.

 

Let us take an example of Video which we need to play on our phone. The code required for this task is given below.

 


 

There are different properties in this task that needs to be explained

 

MediaPlaybackControls

You can optionally specify that one or more controls should be shown by the Media Player using bitwise OR combinations of the MediaPlaybackControls values:

  • MediaPlaybackControls.All
  • MediaPlaybackControls.None
  • MediaPlaybackControls.Pause
  • MediaPlaybackControls.Stop
  • MediaPlaybackControls.Skip
  • MediaPlaybackControls.FastForward
  • MediaPlaybackControls.Rewind

 

MediaLocationType

You can also specify one of these locations using the MediaLocationType enumeration.

  • MediaLocationType.None indicates that the media item is in neither data store and when a Show Method is called with this Option, you might get the FileNotFoundException.
  • MediaLocationType.Install indicates that the Media file is in the Application’s installation directory. In the above example, the test.mp3 is packages with the xap file, so this option is needed.
  • MediaLocationType.Data indicates that the Media file is in the isolated storage or is not present on the phone.

 

You can also play an audio file in a similar way .Just set the media path to the location of audio file that is either present in your application or is present online.

 

This might be useful when you want to play an online song on your phone.

Example suppose I want to play an online song the code required for this task is given below.


The code is similar to the video one the only change is in the media path.

 


 

Note:

1. On the Emulator the application can start the Media Player and play music, but video is not rendered! If possible test on a real device.
2. All audio file formats are not supported on Windows phone. You can check the list of audio formats supported by Windows phone from the link given below.

http://msdn.microsoft.com/en-in/library/windows/apps/hh986969.aspx

I hope this post will be helpful to you. You can download the full project source file from the link given below.

Download full source project file Mediaplayer.zip

How to play an audio file in Windows phone app using Media Element Control

In this post I will explain you how to play a media file in Windows phone app using Media element control.

 

Using the MediaElement is an easier way to play sound in Windows Phone. Just add the MediaElement control to your Page and set the source file path and set the AutoPlay property of the MediaElement to true. You will see that your Windows Phone App page when run, will automatically play the sound. But if you want to play it manually you can set the AutoPlay property to false and should call the play method of MediaElement.

 

1. Create a new Project having the name Mediacontrol.

 


 

2. Now drag and drop MediaElement control form toolbox into MainPage.xaml design page.

 


 

3. After this set its name property to mycontrol. You can also set the media path by selecting Source property of MediaElement control in Xaml Window and AutoPlay property to False.

 


 

 

4. Now if you want to play the music file automatically as the page opens you can set the AutoPlay property of MediaElement to true. By default the AutoPlay property is true.

 

5. You can control media playback by using the Play, Pause, and Stop methods of a MediaElement object.

Add three buttons to the MainPage.xaml having the Content property value play, pause and stop.

 


 

 

6. The code for click event handlers of these buttons is given below.

 

 

7. Now run the application on emulator and click on play button. You will hear an audio clip.

 


 

8. You can also change the source property of media element dynamically using c#. For example you are building a ringtone application in which there are no of music files so you may want to play these files individually using a single media element control.

 

Suppose the audio file is having the name 2.mp3 and is present in root folder.

 


 

So the source property of control is given as

 

 

9. You can specify the volume of the MediaElement object’s audio as a value from 0 to 1, with 1 being the loudest using Volume property of Media Element. The default value is 0.5.

 

 

Note: All audio file formats are not supported on Windows phone. You can check the list of audio formats supported by Windows phone from the link given below.

http://msdn.microsoft.com/en-in/library/windows/apps/hh986969.aspx

 

10. I hope this post will be helpful to you. You can download the full project source file from the link given below.

 
Download Full project source file MediaControl.zip
 

Get audio input from microphone in Windows Phone 8

There are numerous apps in the Windows Phone marketplace which let you record audio and play it back. You can build a similar app on your own by following this simple tutorial where we will use Microsoft.Xna.Framework.Audio.Microphone class to take audio input from Windows Phone microphone. Depending on the phone’s processor it may not be possible to access FM radio and microphone at the same time, so if you are planning to build an app that could record FM radio then you much check the specifics before starting. Here are the steps to build the basic functionality.

Step 1. Create a new Windows Phone 8 project for Audio recorder app

Open Visual Studio and choose Windows Phone 8 blank Silverlight application as your app’s template and give it a name. Create project and choose the target platform as Windows Phone 8 (or you may choose WP 8.1 if you wish).

Step 2. Add ID_CAP_MICROPHONE capability to your project

Go to Properties > WMAppManifest.xml and add the capability ID_CAP_MICROPHONE under the capabilities tab. Not adding this capability won’t give a syntax error and the project will build successfully but when you try creating an object of the Microphone class, it will give a null exception.


Step 2. Design the required UI for the app

We will just add two buttons in MainPage.xaml. Record button to start recording. Once the recording starts, we will change its content to “Stop” and use the same button to stop recording. Another button “play” to start playing the recorded audio. Here’s how the MainPage.xaml should look once you add the two buttons to it.

Here’s the XAML you would need to add the two button. Notice that we have click button event handler defined for each of the two buttons.

Step 4. Add the following `using` statements in MainPage.xaml.cs

At the top of the MainPage.xaml.cs file add the following using statements. They will be required for the code we are going to add.

Step 5. Add some global members in the MainPage.xaml.cs file

We would require some global variables to use Microphone, memory stream and SoundEffect classes. Add it before the MainPage constructor so that all the methods can use it.

Step 6. Add the following code in MainPage’s constructor

In the constructor of MainPage.xaml add the following code. Since we are using XNA Game Studio in a Windows Phone app, we need to simulate the Game loop that XNA Game Studio normally implements for us. Also we add Microphone.BufferReady event handler to the constructor of your MainPage class.

The app’s MainPage class should look something similar to this after you have added the code in Step 4, Step 5 and Step 6.

Step 7. Add the code for BufferReady event handler.

This handler copies the data from the microphone into a buffer and writes that buffer to a stream.

Step 8. Add the code to handler recording (Start and Stop)

In the record button click event handler we add the code to start and stop recording. We first create an object of Button class to get the content of the button which triggered the click event. Next we check if the content is “Record”, then we start recording else we stop recording.

Note:

  • This event handler for a record button Click event allocates a buffer large enough to hold 1 second of audio and begins collecting that data by calling Microphone.Start.
  • This event handler for a stop button Click event checks to see whether the microphone is currently collecting input. If it is, the code calls Microphone.Stop to end the recording.

Step 9. Add the code to play the recorded audio

This event handler for a play button Click event allocates a new SoundEffect object using the stream where the audio data was saved. Then, it calls the SoundEffect.Play method.

That’s it. Try running the app in the emulator and see if it works.

Here’s the full source code of the project to record and play audio from microphone,

Download full project source Record-Audio.zip