Windows Phone 7 : Picking a Photo from Your Media Library

1. Problem

You need to pick a photo from your media library and upload it to the Flickr site.

2. Solution

You have to use the PhotoChooserTask chooser.

3. How It Works

The PhotoChooserTask chooser class provides the Show method, which shows the picture library and lets you to pick a photo from it. When the photo has been chosen, the Completed event is raised. This event provides a PhotoResult object as a parameter; by using its properties, you can retrieve the stream data composing the photo by using the ChosenPhoto property, obtain the path and filename of the image by using the OriginalFileName property, and the get the result of the photo-picking operation by using the TaskResult property.

4. The Code

To demonstrate this recipe, we have enhanced the application written in Recipe 7-1, the FlickrPhotoAlbum. We added the Load button to the MainPage.xaml code, specifying that we want to manage its Click event.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <phone:WebBrowser x:Name="wbBrowser" Grid.Row="0"
        Navigated="wbBrowser_Navigated"/>
        <Image x:Name="imgPhoto" Grid.Row="0" Stretch="UniformToFill"
        Visibility="Collapsed" />
        <Button x:Name="btnAuthenticate" Grid.Row="1" Content="Autenthicate"
        Click="btnAuthenticate_Click" IsEnabled="False" />
        <Button x:Name="btnTakePicture" Grid.Row="2" Content="Take a picture"
        Click="btnTakePicture_Click" IsEnabled="False" />
        <Button x:Name="btnLoad" Grid.Row="3" Content="Load" Click="btnLoad_Click"
        IsEnabled="False" />

					  

<Button x:Name="btnUpload" Grid.Row="4" Content="Upload"
        Click="btnUpload_Click" IsEnabled="False" />
    </Grid>
</Grid>

In the MainPage.xaml.cs code file, a PhotoChooserTask object is defined at the class level and created in the MainPage constructor. Finally, the chooser_CompletedCompleted event. event handler is defined in order to respond to the

public partial class MainPage : PhoneApplicationPage
{
   CameraCaptureTask camera = null;
   Popup popup = null;
   PhotoChooserTask chooser = null;

   // Constructor
   public MainPage()
   {
       InitializeComponent();

       camera = new CameraCaptureTask();
       camera.Completed += new EventHandler<PhotoResult>(camera_Completed);

       popup = new Popup();
       popup.Child = new MySplashScreen();
       popup.IsOpen = true;

       chooser = new PhotoChooserTask();
       chooser.Completed += new EventHandler<PhotoResult>(chooser_Completed);
    }
. . .

					  

In the chooser_Completed event handler, we call the private DoCompletedTask method. Because the code from Recipe 7-1 in the camera_Completed event handler is the same as that needed to load a photo from the media library, we have created DoCompletedTask, which accepts the PhotoResult argument, puts the image in a memory stream object, and shows a preview image.

private void DoCompletedTask(PhotoResult e)
{
    App app = Application.Current as App;

    if (e.TaskResult == TaskResult.OK)
    {
        byte[] data;
        using (var br =
    new BinaryReader(e.ChosenPhoto)) data = br.ReadBytes((int)e.ChosenPhoto.Length);
        app.settings.Image = new MemoryStream(data);

        imgPhoto.Source = new BitmapImage(new Uri(e.OriginalFileName));
        btnUpload.IsEnabled = true;
    }

					  

}

Finally, in the btnLoad_Click event handler, we call the Show method provided by the PhotoChooserTask class:

private void btnLoad_Click(object sender, RoutedEventArgs e)
{
    chooser.Show();
}

5. Usage

The application usage is similar to Recipe 7-1. After having authenticated to the Flickr site and authorized our application to access the user's library, the Load button will be enabled.

Press the Load button, and the application will show the picture's library on your phone. In the emulator, you can access the library with some photos inside, as shown in Figure 1.

Figure 1. The picture library on the emulator

Now, select a picture of your choice, and you will see it in the FlickrPhotoAlbum application as a preview. The Upload button becomes enabled. Press the Upload button as you did in Recipe 7-1, and the picture loads into the Flickr site, as shown in Figure 2.

Figure 2. The photo has been uploaded to the Flickr site.