Introducing Windows Phone 7 Photo Features (part 2) - Using a Chooser to Open Photos & Saving Photos to the Phone

2. Using a Chooser to Open Photos

In the previous section, you learned how to use the CameraCaptureTask chooser to take photos with your phone. In this section, you will learn how to open previously taken photos on your phone using the PhotoChooserTask chooser. As you have already seen and will still see more of, launchers and choosers do make the lives of developers a lot easier by simplifying and abstracting the most common tasks within the Windows Phone 7 Application platform.

In this section, you will enhance the application you have built in the previous one by adding functionality to the second button of the Application Bar—Opening Photos. Windows Phone 7 has several locations, or "folders" so to speak, where the photos are located. Those "folders" are Camera Roll, Saved Pictures, and Pictures Library. Inside Pictures Library, there are general-purpose photos provided by Microsoft that help us in our programming efforts. Since you have already created a user interface for the application in the previous section, in this section you will add code implementing the photo browsing and retrieving functionality.

1. Launch Visual Studio 2010 Express for Windows Phone, and open the "PhotoCapture" project that you created in the previous section.

2. Open MainPage.xaml.cs, and paste the following class-level variable declaration right above the MainPage() constructor:

   private PhotoChooserTask photoChooserTask;

   
   

3. You now need to let the PhotoChooserTask chooser know that PhotoChooserTaskCompleted will be the callback function that this chooser should call upon completion. You do this via the following two lines of code inside the MainPage() constructor:

   photoChooserTask = new PhotoChooserTask();
   photoChooserTask.Completed +=
   new EventHandler<PhotoResult>(PhotoChooserTaskCompleted);

   
   

4. As the final step of this walkthrough, you will need to add logic to launch the chooser when the user clicks the second button in the Application Bar. To accomplish this, open the MainPage.xaml file, locate the line of XAML code that starts with <shell:ApplicationBarIconButton Text="Open Photo", and indicate that btnOpenPhoto_Click must be called when that button is clicked:

   <shell:ApplicationBarIconButton Text="Open Photo" IconUri="images/appbar.folder.rest.png"
   Click="btnOpenPhoto_Click"/>
   
   					  

   
   

5. Now, switch back to MainPage.xaml.cs and paste the btnOpenPhoto_Click function:

   private void btnOpenPhoto_Click(object sender, EventArgs e)
   {
           photoChooserTask.Show();
   }

   
   

Press F5 to run application. Now, if you click the Open Photo button in the Application Bar, you should be able to browse through photos on the emulator or (better) on the phone, select a photo, and have it presented to you in the application window.

Being able to navigate to a photo on the phone and display it within an application is certainly important, but hardly a useful feature by itself. However, as we will see shortly, we can use the PhotoChooserTask chooser to select photos to upload to a cloud service, such as TwitPic, as well as for loading images inside the application in order to manipulate them (by cropping, adding shapes to them, altering their color composition) and then resaving them back onto the phone or uploading them to a social media cloud service. Although altering photos within an application is slightly beyond the scope of this article, we will walk through saving photos onto the phone in the next section. Saving photos could also be used together with CameraCaptureTask to save photos taken using that chooser.

3. Saving Photos to the Phone

In the prior sections, you have seen how choosers can be used to make the taking and opening of photos a breeze on a Windows Phone 7 device. Unfortunately, things become a bit more complicated when it comes to saving photos onto the device, since there are no choosers available to aid us with this task. In fact, the Windows Phone 7 platform does not provide any mechanism you can use to get the job done. How can you do it then? Enter the Windows Phone XNA library.

In this book, we have not covered the XNA Framework on Windows Phone 7 for a reason. The XNA Framework is a very powerful mechanism for programming graphics-intensive interfaces and, as such, is used primarily for game development, whereas Silverlight is used for the vast majority of line-of-business applications. This book is about learning to build line-of-business applications. At times, however, there are situations where you have to resort to using a mix of technologies to get things done, and saving photos onto the Windows Phone 7 device is one example of such a situation. The Microsoft.Xna.Framework.Media library provides the SavePicture method, which saves a given array of bytes to the Saved Pictures location on the phone. The following walkthrough demonstrates how to add save capabilities to the PhotoCapture application you have built so far.

3.1. Adding a Status Message

The user interface built as part of the very first walkthrough of this article has an Application Bar button already defined for saving images. Therefore, you need to make only a small enhancement to the user interface to allow the user to see whether the status of the save was successful or not.

Open MainPage.xaml and add a TextBlock right below the image control. Name this TextBlock txtStatus and clear its Text property.

With user interface enhancements complete, you are ready to add code that saves photos to the Media Library.

3.2. Writing Code to Save Photos with the XNA Framework

Before you can use a method from the XNA Framework, you must first add a reference to the Xna.Framework.Media library. To accomplish this, right-click the name of the project in Solution Explorer, select Add Reference, and then double-click the Microsoft.Xna.Framework assembly. Notice how a warning dialog comes up, telling us that there's a possibility of unexpected behavior—click Yes to complete adding a reference. Follow the rest of the steps to implement photo-saving functionality within your application.

1. Open MainPage.xaml.cs and add the following using statement to the top of that page:

   using Microsoft.Xna.Framework.Media;

   
   

2. The following method does all the work of saving a photo into the Media Library. Note specifically the SavePicture method, which saves the array of bytes passed into the Media Library.

   private void btnSave_Click(object sender, EventArgs e)
   {
       try
       {
           var library = new MediaLibrary();
           library.SavePicture("PhotoCapture Photo", imageBits);

   
   

   txtStatus.Text = "Successfully saved photo.";
       }
       catch (Exception ex)
       {
           txtStatus.Text = "Failed to save photo. Exception: " + ex.Message;
       }
   }

   
   

3. What remains is to tie the btnSave_Click method with the click event of the Save button on the Application Bar. You will do it by editing the XAML of the MainPage.xaml file. Locate the line that starts with <shell:ApplicationBarIconButton Text="Save Photo" and change it to look like the following:

   <shell:ApplicationBarIconButton Text="Save Photo"
   IconUri="images/appbar.save.rest.jpg" Click="btnSave_Click"/>

   
   

You are now ready to run the application on the Windows Phone 7 emulator. Press F5 to start the application, and then press the Camera button on the Application Bar (first button) to take a picture and have it loaded inside your application. Then, press the Save button on the Application Bar—you should get a status message that the image was successfully saved. Now, if you use the middle button of the Application Bar to see photos available, you should see a screen like the one shown in Figure 2, with three separate photo "folders," each displayed in a separate tile available to choose photos from.

Figure 2. The Saved Photos "folder" is available once at least one photo has been saved there.