Incorporating Photos

June 15, 2011

You can use photographs and other images as application resources to display them within your UI. Your application can access photos in the phone media library or enable users to take pictures using the built-in camera.

You Will Learn

  • How to access photos on Windows Phone.

Applies To

  • Silverlight for Windows Phone OS 7.0

    Download Fuel Tracker Sample

To access the media library images and the camera, you use the PhotoChooserTask and the CameraCaptureTask. These classes are known as choosers because they launch a separate experience in which your user makes a selection that is returned to your application. There are also launchers, which launch a separate experience without returning a user selection to the application. For more information, see Launchers and Choosers QuickStart.

The PhotoChooserTask and CameraCaptureTask require similar code, so this section describes only the PhotoChooserTask. Additionally, this section describes how to save the selected photos using isolated storage. You can also retrieve and save images in the media library through the XNA MediaLibrary class. However, this class is not covered in this topic.

To use a chooser, you show an instance of the chooser. The following illustration shows an example of the PhotoChooserTask.

Gg680264.12a4ff72-cfe1-47b4-a85a-eae0fb513acb(en-us,PandP.11).png

When the user is done with the chooser, you handle the Completed event to take appropriate action. The following code (from CarDetailsPage.xaml.cs) demonstrates how to set up a PhotoChooserTask and handle its Completed event. Note that the PhotoChooserTask must have global page scope and the Completed event must be wired up in the constructor.

private readonly PhotoChooserTask photoTask = new PhotoChooserTask();

public CarDetailsPage()
{
    InitializeComponent();
    photoTask.Completed += PhotoTask_Completed;

    // ... other code ...
}

private void PhotoButton_Click(object sender, RoutedEventArgs e)
{
    photoTask.Show();
}

private void PhotoTask_Completed(object sender, PhotoResult e)
{
    if (e.TaskResult == TaskResult.OK)
    {
        var image = new System.Windows.Media.Imaging.BitmapImage();
        image.SetSource(e.ChosenPhoto);
        CarDataStore.SaveTempCarPhoto(image, delegate
        {
            MessageBox.Show("There is not enough space on " +
                "your phone to save your selection. Free some " +
                "space and try again.", "Warning", MessageBoxButton.OK);
        });
        car.Picture = image;
        hasUnsavedChanges = true;
    }
}

When the user taps the Photo button, the PhotoChooserTask is displayed. This causes the application to deactivate. After the user selects a photo, the application reactivates, although in this case, the PhotoChooserTask.Completed event occurs before the OnNavigatedTo method is called to handle the reactivation.

The Completed event handler creates a new BitmapImage and sets its source to the chosen photo. Next, the event handler stores the image in isolated storage. Images are not serializable, so they cannot be stored in the in-memory state dictionaries nor in the isolated storage state dictionary. Therefore, if you want to save an image, you must store it using the isolated storage virtual file system interface. The CarDataStore class must also store the photo in isolated storage after the user taps the Save button. Therefore, the SaveTempCarPhoto and GetTempCarPhoto methods for handling the temporary photo simply wrap the SaveCarPhoto and GetCarPhoto methods for handling the saved photo. For a description of the SaveCarPhoto and GetCarPhoto methods, see Saving and Loading Data.

Finally, the event handler assigns the image to the Picture property of the Car object stored in the car field. This causes the photo to appear in the Image control bound to the Picture property.

Gg680264.note(en-us,PandP.11).gifNote:
The PhotoResult class passed to the Completed event handler contains an OriginalFileName property. This property would be useful for retrieving the chosen photo from the XNA MediaLibrary so that you don't have to save it separately in isolated storage. However, as of this writing, the OriginalFileName implementation does not behave as expected: it returns a temporary filename that is not useful for retrieving the photo from the XNA MediaLibrary class later. However, even if you could use the media library in this way, you might still choose to store user-selected images in isolated storage. That way, they remain available to your application even if the user later removes the images from the media library, or alters their appearance using other applications.


Show: