Selecting a Photo from the Photo Hub Using the PhotoChooserTask
,The photo chooser task is used to launch the built-in Photo Picker app, which allows a user to select an image from isolated storage or, optionally, to take a photo using the device’s camera.
The following is a list of the PhotoChooserTask properties:
PixelHeight—The maximum height, in pixels, of the resulting image.
PixelWidth—The maximum width, in pixels, of the resulting image.
ShowCamera—If set to true, the user is presented with the option to use the device’s camera to take a photo. A button is displayed on the first page of the Photo Picker app. If not specified, this value defaults to false.
The PhotoChooserTask should be defined as a field in your class, like so:
readonly PhotoChooserTask photoChooserTask = new PhotoChooserTask();
Subscribe to the PhotoChooserTask.Completed event within your class constructor, as shown:
PhotoChooserTask.Completed
+= new EventHandler<PhotoResult>(HandlePhotoChooserTaskCompleted);
Use the Show method of the PhotoChooserTask to launch the built-in Photo Picker app. When the task completes the handler receives a PhotoResult object, as shown:
void HandleTaskCompleted(object sender, PhotoResult e)
{
if (e.TaskResult == TaskResult.OK)
{
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.SetSource(e.ChosenPhoto);
CapturedImage = bitmapImage;
...
}
if (e.Error != null)
{
MessageService.ShowError("An error occurred. " + e.Error.ToString());
}
}
When the task’s Show method is called, the built-in Photo Picker app is launched, allowing the user to select or take a photo (see Figure 14.29).
FIGURE 14.29 The PhotoChooserTask.ShowCamera property determines whether the user is given the option to use the device’s camera.
After an image has been selected by the user, it can be cropped to the aspect ratio specified by the PhotoChooserTask’s PixelHeight and PixelWidth properties.
If neither the PixelHeight nor PixelWidth is specified, the Photo Picker application skips the step that allows the user to crop the image.
The PhotoChooserTask’s Completed event is raised when an image has been selected or the user cancels out of the Photo Picker application. If the user completes the task of choosing an image, the Completed event is raised and the event handler receives a PhotoResult object that exposes a stream containing the image data. For information on working with image streams, see Chapter 20.
The properties of the PhotoResult class (a subclass of TaskEventArgs) are presented in the following list:
ChosenPhoto—A System.IO.Stream for the selected image
OriginalFileName—The path to the file in isolated storage
Sample Overview
The PhotoChooserViewModel class in the downloadable sample code demonstrates how to use the PhotoChooserTask (see Listing 14.4).
Subscription to the PhotoChooserTask.Completed event occurs in the class constructor. The chooseCommand’s execute handler assigns the task’s various properties and calls its Show method. When the Completed event of the task is raised, a BitmapImage is created using the chosen image Stream.
LISTING 14.4. PhotoChooserViewModel Class (excerpt)
public class PhotoChooserViewModel : ViewModelBase
{
readonly PhotoChooserTask task = new PhotoChooserTask();
public PhotoChooserViewModel()
{
task.Completed += HandleTaskCompleted;
chooseCommand = new DelegateCommand(
delegate
{
task.PixelWidth = pixelWidth;
task.PixelHeight = pixelHeight;
task.ShowCamera = showCamera;
task.Show();
});
}
void HandleTaskCompleted(object sender, PhotoResult e)
{
if (e.TaskResult == TaskResult.OK)
{
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.SetSource(e.ChosenPhoto);
CapturedImage = bitmapImage;
PixelWidth = ImageWidth = bitmapImage.PixelWidth;
PixelHeight = ImageHeight = bitmapImage.PixelHeight;
OriginalFileName = e.OriginalFileName;
}
if (e.Error != null)
{
MessageService.ShowError("An error occurred. " + e.Error.ToString());
}
}
...
}
The PhotoChooserView is data bound to the PhotoChooserViewModel, which allows the user to affect the properties of the PhotoChooserTask when the viewmodel’s ChooseCommand is executed. The ChooseCommand is executed when the Capture button is pressed. The user can change the aspect ratio of the image by modifying the Width and Height Ratio Sliders.
A PhotoChooserViewModel instance is assigned to the view’s DataContext, as shown in the following excerpt from the PhotoChooserView code-beside:
public PhotoChooserView()
{
InitializeComponent();
DataContext = new PhotoChooserViewModel();
}
The view uses data binding to populate its controls and to interact with the viewmodel. After the user chooses an image via the PhotoChooserTask, the Image control is populated via its data binding to the CapturedImage property of the PhotoChooserViewModel. The Capture button causes the execution of the ChooseCommand (see Listing 14.5).
LISTING 14.5. PhotoChooserView.xaml (excerpt)
<StackPanel x:Name="ContentPanel" Grid.Row="1">
<TextBlock Text="{Binding PixelWidth, StringFormat='Width Ratio: {0}'}"
Style="{StaticResource PhoneTextNormalStyle}" />
<Slider Value="{Binding PixelWidth, Mode=TwoWay}"
Minimum="10" Maximum="200" LargeChange="50" SmallChange="10"/>
<TextBlock Text="{Binding PixelHeight, StringFormat='Height Ratio: {0}'}"
Style="{StaticResource PhoneTextNormalStyle}" />
<Slider Value="{Binding PixelHeight, Mode=TwoWay}"
Minimum="10" Maximum="200" LargeChange="50" SmallChange="10"/>
<CheckBox IsChecked="{Binding ShowCamera, Mode=TwoWay}" Content="Show Camera" />
<Button Command="{Binding ChooseCommand}"
Content="Choose" />
<Image Source="{Binding CapturedImage}"
Width="{Binding ImageWidth}" Height="{Binding ImageHeight}"
HorizontalAlignment="Left" Margin="15,0,15,0" />
<TextBlock Text="Path: "
Style="{StaticResource PhoneTextSmallStyle}" />
<TextBlock Text="{Binding OriginalFileName}"
Style="{StaticResource PhoneTextSmallStyle}" TextWrapping="Wrap" />
</StackPanel>
The PhotoChooserView page is presented in Figure 14.30.
The PixelWidth and PixelHeight properties of the PhotoChooserTask determine the maximum dimensions of the resulting image. The Photo Picker crop page presents the image with a selection overlay conforming to the aspect ratio PixelWidth/PixelHeight, which spans either the entire width or height of the image. When the user confirms the selection, the image is reduced to the size specified by PixelWidth and PixelHeight (see Figure 14.31).
When the user completes the PhotoChooserTask, the PhotoChooserTask.Completed event is handled by the PhotoChooserViewModel.HandleTaskCompleted method. A new BitmapImage is created using the resulting image stream, and it is assigned to the CapturedImage property of the viewmodel. The view is then automatically updated via the Image control’s data binding (see Figure 14.32).
