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.
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.