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

6/7/2011 11:45:36 AM

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.

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

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

private PhotoChooserTask photoChooserTask;

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:

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:

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

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.

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

using Microsoft.Xna.Framework.Media;

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.

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:

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.