Launch Visual Studio 2010 Express for Windows Phone, and create a new Windows Phone Application project. Name it PhotoCapture.

You will create an Application Bar with three icons. The first button of the Application Bar will be for taking photos, which is the subject of the current demo. The second button will be for opening previously taken photos. Finally, the third button will be for saving photos to the phone.

Create a separate folder within your application to store Application Bar icons. To do that, right-click the name of the project within Solution Explorer, choose Add

You will use the standard Application Bar icons that came pre-installed with Developer Tools for Windows Phone. By default, the icons are installed in the C:Program FilesMicrosoft SDKsWindows phonev7.0Icons folder. Within that folder, go to the subfolder called dark, and, using Windows Explorer, copy the following icons into the images folder within your application: appbar.feature.camera.rest.png, appbar.folder.rest.png, and appbar.save.rest.png.

Now you need to make the icons part of your solution. Highlight all three icons, and press F4 to bring up the Properties dialog. For the Build Action property, specify Content. Then, select Copy Always for the Copy to Output Directory property.

With icons ready for use in the Application Bar, you are ready to add an Application Bar to MainPage.xaml (for an in-depth explanation of how to add and use an Application Bar within your application, please refer to Chapter 7). Open MainPage.xaml, and paste the following code at the end of the XAML file just before the </phone:PhoneApplicationPage> closing tag. This XAML replaces the auto-generated template for the Application Bar:

<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True">
            <shell:ApplicationBar.Buttons>
                <shell:ApplicationBarIconButton x:Name="btnCamera" Text="Take Photo"
IconUri="images/appbar.feature.camera.rest.png" Click="btnCamera_Click"/>
                <shell:ApplicationBarIconButton Text="Open Photo"
IconUri="images/appbar.folder.rest.png"/>
                <shell:ApplicationBarIconButton Text="Save Photo"
IconUri="images/appbar.save.rest.png"/>
            </shell:ApplicationBar.Buttons>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

Finally, you need to add an Image control to show the photos taken within your application. From the Toolbox, drag and drop an Image control onto the MainPage.xaml design surface, place it in the middle, and size it to be about half of the available screen space. Name it imgPhoto.

Open MainPage.xaml.cs (right-click MainPage.xaml and select View Code). Add the following using statements to the very top of the code page:

using Microsoft.Phone.Tasks;
using Microsoft.Phone;

Add the following class-level variables within the MainPage class (right above the MainPage constructor):

private CameraCaptureTask cameraCaptureTask;
     byte[] imageBits;

Add the following code for the btnCamera_Click method. This will invoke the PhotoCapture application when the user clicks the first button in the Application Bar:

private void btnCamera_Click(object sender, EventArgs e)
{
        cameraCaptureTask.Show();
        }

You are now ready to write event handler code that will be invoked when the CameraCaptureTask chooser completes its work (the user has taken a picture) and control returns to your application. When control returns to your application, the photo taken by the user is passed in as one of the arguments to the callback function; you will take that photo and show it in the imgPhoto image control that you have added previously. Add the following method, which will be executed when the chooser completes, to MainPage.xaml.cs:

private void PhotoChooserTaskCompleted(object sender, PhotoResult e)
{
        if (e.ChosenPhoto != null)
        {
                imageBits = new byte[(int)e.ChosenPhoto.Length];
                e.ChosenPhoto.Read(imageBits, 0, imageBits.Length);
                e.ChosenPhoto.Seek(0, System.IO.SeekOrigin.Begin);

                var bitmapImage = PictureDecoder.DecodeJpeg(e.ChosenPhoto);
                this.imgPhoto.Source = bitmapImage;
        }
}

You need to tell your application's instance of CameraCaptureTask that the PhotoChooserTaskCompleted method must be invoked upon its completion. You will do this within the MainPage() constructor using the following two lines of code:

cameraCaptureTask = new CameraCaptureTask();
cameraCaptureTask.Completed += PhotoChooserTaskCompleted;

You are now ready to run the application. Note that for this demo, it is not completely necessary to deploy your application to the physical device, since the emulator provides limited simulated photo-taking capabilities (the aforementioned small rectangle moving around the phone area).

Press F5 to run the application on the emulator, and then press the camera button in the Application Bar to be presented with the Windows Phone 7 PhotoCapture application. Press the button in the upper right-hand corner to simulate photo-taking within the emulator (notice how this simulation consists of a black rectangle moving around the screen's perimeter), and then press the Accept button to accept the photo. You should see a phone screen similar to the one shown in Figure 16-1 with your application displaying the captured image. Of course, if you deploy this application to the actual Windows Phone 7 device, the photos that you take will look a bit more exciting.

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.

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;
        }
}

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.png" Click="btnSave_Click"/>

Right-click the project name, select Add

Double-click the Extras.xml file to open it. Paste the following contents inside that file, which will enable the Windows Phone 7 framework to locate those applications ready to implement the Extras functionality:

<Extras>
       <PhotosExtrasApplication>
               <Enabled>true</Enabled>
       </PhotosExtrasApplication>
</Extras>

In the Properties window, make sure to set the Build Action property to Content and the Copy To Output property to Copy Always for the this file (click the file and press F4 to bring up the Properties dialog).

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

using System.Windows.Navigation;

The reference to the Microsoft.Xna.Framework assembly should still be in the project from the prior demos; however, if you start a new project that implements the Extras functionality, make sure to add a reference to that assembly and the following using statement to properly refer to the Media Library. You will also need System.Windows.Media.Imaging to work with the image source.

using Microsoft.Xna.Framework.Media;
using System.Windows.Media.Imaging;

Paste the following OnNavigatedTo method. Note how the basic operation is that of reading a QueryString passed in, determining if you have a value for the parameter token, and then trying to retrieve the photo from the Media Library by that token ID.

protected override void OnNavigatedTo(NavigationEventArgs e)
                   {
                        try
                        {
                                 IDictionary<string, string> queryStrings =
                                 this.NavigationContext.QueryString;
                                 if (queryStrings.ContainsKey("token"))
                                 {
                                         MediaLibrary library = new MediaLibrary();
                                         Picture picture =
library.GetPictureFromToken(queryStrings["token"]);

BitmapImage bitmap = new BitmapImage();
                                         bitmap.SetSource(picture.GetImage());
                                         WriteableBitmap picLibraryImage = new
WriteableBitmap(bitmap);
                                         imgPhoto.Source = picLibraryImage;
                                }

                        }
                        catch (Exception ex)
                        {
                                Dispatcher.BeginInvoke(() => txtStatus.Text = ex.Message);

                        }
                  }

Deploy the application to the phone. Then, from the phone's Start screen, select the Pictures hub, pick any picture collection, and select an individual picture of your choice. Click the ellipsis at the bottom of the screen, and select Extras. You should see the PhotoCapture application listed on the next screen that comes up. Clicking the PhotoCapture application should start the application and load the selected photo into the Image control—exactly the expected behavior.

Right-click the project name, select Add

While the contents of the file may not be very important, be sure to go to the Properties window and set the Build Action property to Content and the Copy To Output property to Copy Always for the this file (click the file and press F4 to bring up the Properties dialog).

If you are continuing from the Extras demo, you already have all the necessary references and using statements in place. However, if you were to start a new project, make sure that you have a reference added to Microsoft.Xna.Framework and the following using statements are in place:

using System.Windows.Navigation;
using Microsoft.Xna.Framework.Media;

Paste the following OnNavigatedTo method (or add to that method if you are continuing from the Extras demo). Note how the basic operation is that of reading a query string passed in, determining whether there is a value for the Field parameter, and then trying to retrieve the photo from the Media Library by that token ID.

try
                {
                        IDictionary<string, string> queryStrings =
                        this.NavigationContext.QueryString;

                        if (queryStrings.ContainsKey("FileId"))
                        {
                                MediaLibrary library = new MediaLibrary();
                                Picture picture =
library.GetPictureFromToken(queryStrings["FileId"]);

                                BitmapImage bitmap = new BitmapImage();
                                bitmap.SetSource(picture.GetImage());
                                WriteableBitmap picLibraryImage = new WriteableBitmap(bitmap);
                                imgPhoto.Source = picLibraryImage;
                        }
                }
                catch (Exception ex)
                {
                        Dispatcher.BeginInvoke(() => txtStatus.Text = ex.Message);

                }

Deploy the application to the phone.

Right-click the project name in Solution Explorer, select Add Reference, and then select System.Xml.Linq.

Add the following using statements to the top of the page:

using System.IO;
using System.Text;
using System.Xml.Linq;

Open MainPage.xaml.cs and paste the UploadPhoto function written here. This will be the only function that will be invoked when the photo upload needs to take place. This function sets the URL and the type of the request, and then it invokes the asynchronous BeginGetRequestStream, which packages the photo and the user credentials.

public void UploadPhoto()
                  {
                        HttpWebRequest request =
                        (HttpWebRequest)WebRequest.Create("http://twitpic.com/api/upload");
                        request.ContentType = "application/x-www-form-urlencoded";
                        request.Method = "POST";
                        request.BeginGetRequestStream(new
AsyncCallback(GetRequestStreamCallback),
                        request);
                  }

Figure 16.3. User interface for uploading photos to TwitPic

Add the following code to define the asynchronous function GetRequestStreamCallback that does all of the packaging of proper parameters; note that the exact form of the message was dictated by TwitPic, and this method simply conforms to it:

private void GetRequestStreamCallback(IAsyncResult asynchronousResult)
{
    try
    {

        HttpWebRequest request = (HttpWebRequest)asynchronousResult.AsyncState;
        string encoding = "iso-8859-1";
        // End the operation
        Stream postStream = request.EndGetRequestStream(asynchronousResult);

string boundary = Guid.NewGuid().ToString();
        request.ContentType = string.Format("multipart/form-data; boundary={0}", boundary);

       string header = string.Format("--{0}", boundary);
       string footer = string.Format("--{0}--", boundary);

       StringBuilder contents = new StringBuilder();
       contents.AppendLine(header);

 string fileHeader = String.Format("Content-Disposition: file; name="{0}";
       filename="{1}"; ", "media", "testpic.jpg");
       string fileData = Encoding.GetEncoding(encoding).GetString(imageBits, 0,
       imageBits.Length);

       contents.AppendLine(fileHeader);
       contents.AppendLine(String.Format("Content-Type: {0};", "image/jpeg"));
       contents.AppendLine();
       contents.AppendLine(fileData);
       contents.AppendLine(header);
       contents.AppendLine(String.Format("Content-Disposition: form-data;
       name="{0}"", "username"));
       contents.AppendLine();
       contents.AppendLine("BeginningWP7");

       contents.AppendLine(header);
       contents.AppendLine(String.Format("Content-Disposition: form-data;
       name="{0}"", "password"));
       contents.AppendLine();
       contents.AppendLine("windowsphone7");

       contents.AppendLine(footer);

       // Convert the string into a byte array.
       byte[] byteArray =
       Encoding.GetEncoding(encoding).GetBytes(contents.ToString());

       // Write to the request stream.
       postStream.Write(byteArray, 0, contents.ToString().Length);
       postStream.Close();

       // Start the asynchronous operation to get the response
       request.BeginGetResponse(new AsyncCallback(GetResponseCallback), request);
   }
   catch (Exception ex)
   {
       Dispatcher.BeginInvoke(() => txtStatus.Text = ex.Message);
   }
}

Add the GetResponseCallback function that will asynchronously receive the results of the upload (Success or Fail) and parse that result out using LINQ to XML:

private void GetResponseCallback(IAsyncResult asynchronousResult)
                {
                        try
                        {

                        HttpWebRequest request =
(HttpWebRequest)asynchronousResult.AsyncState;
                        // End the operation
                HttpWebResponse response =
                       (HttpWebResponse)request.EndGetResponse(asynchronousResult);
                        Stream streamResponse = response.GetResponseStream();
                        StreamReader streamRead = new StreamReader(streamResponse);
                        string responseString = streamRead.ReadToEnd();

                        XDocument doc = XDocument.Parse(responseString);
                        XElement rsp = doc.Element("rsp");
                string status = rsp.Attribute(XName.Get("status")) != null ?
                rsp.Attribute(XName.Get("status")).Value :
                rsp.Attribute(XName.Get("stat")).Value;

                        // Close the stream object
                        streamResponse.Close();
                        streamRead.Close();

                        // Release the HttpWebResponse
                        response.Close();

                        }
                        catch (Exception ex)
                        {
                                Dispatcher.BeginInvoke(() => txtStatus.Text = ex.Message);
                        }
                }

Now you need to call the UploadPhoto method when the user clicks the TwitPic button. Open MainPage.xaml in Design view, and double-click the TwitPic button. Inside the btnUpload_Click method, paste the following line of code:

UploadPhoto();

You are now ready to run the application. Fortunately, you can test the upload to TwitPic functionality in this demo by using Windows Phone emulator; you don't need to deploy to the actual device. Set the Windows Phone 7 emulator as your deployment target, click F5, and when the application comes up, click the camera button (the first button on the Application Bar). Take a picture, accept it, and then click the TwitPic button. If no errors were reported in the status TextBlock, you should see your image on TwitPic's web site, as shown in Figure 16-4.