Windows Phone 8: Working With Media Content

We can't imagine a mobile application without media content, such as images and sound. Media content is key for many applications. In this tutorial, I'll be showing you how to insert images and enable audio playback in a Windows Phone application. 

1. Working with Images

Virtually every Windows Phone application contains one or more images. Just imagine an application with no artwork, only text. That wouldn't be very pleasing in terms of user experience. It's therefore important that we learn how to add, use, and manipulate images in a Windows Phone application.

As in the previous tutorials, we start by creating a new Windows Phone project. To add an image to your application, toggle the Toolbox in Visual Studio and add an Image control to the design view. You can resize the Image control to fit your needs.

The next step is to populate the Image control with an actual image. We'll display an image that is part of every Windows Phone project. Open the Assets folder in the project's Solution Explorer and locate the Tile subfolder. It should contain a handful of images that we can use in our application. The image that we'll be using is named FlipCycleTileLarge.png.

We need to tell the Image control where it can find the image by specifying the relative path of the image. An Image control has a Source property for this purpose. The following code snippet shows how you can do this using XAML. This should feel familiar by now.

<Image Source="Assets/Tiles/FlipCycleTileLarge.png" 
    HorizontalAlignment="Left" 
    Height="197" Margin="0,10,0,0" 
    VerticalAlignment="Top" 
    Width="446"/>

After setting the Source property of the Image control, the design view should be updated, showing the image you've set. There are many more ways in which we can customize the image control, like giving it a border. Feel free to play with the Image control to find out what other properties you can set to customize it.

2. Working with Audio

You'll notice that playing audio is pretty easy as well. Before I show you how to play audio in your application, download the sample sound that that we'll be using from SoundBible.com and name it cat.mp3.

The goal is to play the sound when the user taps a button on the main page of our application. To add the sound to your Windows Phone project, right-click the Assets folder and select Add Existing Item from the the Add menu. Locate the sound file and add it to your project.

Add a Button control from the Toolbox to the design view, below the image we created earlier. Change the button's title by setting its Content property to "Play Sound“ and set the button's Name property to "PlaySoundButton". The Name property is particularly important as it will be available to us in the corresponding C# class.

Before we move on to the next step, add the following code snippet below the Button control in. As its name indicates, the code snippet describes a MediaElement. It points to the audio file we added to our project a bit earlier.

<MediaElement 
    AutoPlay="False" 
    Name="CatSound" 
    Source="Assets/cat.mp3" 
    HorizontalAlignment="Left" 
    Height="100" Margin="187,357,0,0" 
    VerticalAlignment="Top"
    Width="100"/>

You should end up with the following result.

<Button Name="PlaySoundButton" 
    Content="Play Sound" 
    HorizontalAlignment="Left" 
    Margin="106,263,0,0" 
    VerticalAlignment="Top" 
    Width="263"
    Height="94"/><MediaElement 
    AutoPlay="False" 
    Name="CatSound" 
    Source="Assets/cat.mp3" 
    HorizontalAlignment="Left" 
    Height="100" Margin="187,357,0,0" 
    VerticalAlignment="Top"
    Width="100"/>

It's time to implement the button's event handler. Double-click the button we just created to navigate to the C# class of the current page, MainPage.cs. You'll notice that Visual Studio already created an event handler for us, PlaySoundButton_Click. In the PlaySoundButton_Click method, we call Play on the CatSound object.

 private void PlaySoundButton_Click(object sender, RoutedEventArgs e) {
    CatSound.Play();
}

Remember that CatSound is the name we gave to the MediaElement a few moments ago. When we call the Play method on the MediaElement object, the latter looks at its Source property to find out what it needs to play.

That's how simple it is to play audio in a Windows Phone application. Run your application to try it out.

Conclusion

In this tutorial, you learned how to display images with the Image control and how to play audio using the MediaElement control. There's a lot more you can do with the MediaElement control, such as playing video. I encourage you to browse the documentation to learn more about these features.