Windows Phone 7 - Selecting device photos without PhotoChooserTask

A common feature of mobile based applications is the ability to let you view photos that have been taken with the device. For Silverlight based Windows Phone 7 applications, this functionality would generally be achieved by utilising the PhotoChooserTask.

The PhotoChooser task navigates to the phones photo gallery section, allows the user to select a photo and then returns this photo to the calling application. Now this approach is fine for the majority of circumstances, but what happens if more flexibility is required by the application for image selection? In this case the MediaLibrary class can be utilised to retrieve images from the device, and then displayed in whichever way the application chooses.

The following shows simple examples of both approaches.

PhotoChooserTask Implementation

Here we have a very simple UI that contains a button to select a photo and a currently unassigned image control.

The following code is then used to display the images on the phone.

private void butSelectPhoto_Click(object sender, RoutedEventArgs e)

{

PhotoChooserTask photo = new PhotoChooserTask();

photo.ShowCamera = true;

photo.Show();

}

This now opens up a gallery of photos to choose from.

Once the user has selected a picture from the gallery, then the image is returned as a stream to the calling application. The application then overrides the OnChooserReturn method(used to capture the results from all chooser operations) and simply assigns the returned stream to a Bitmap image, which is then assigned to the image on the user interface.

public override void OnChooserReturn(object sender, EventArgs e)

{

base.OnChooserReturn(sender, e);

TaskEventArgs<PhotoResult> photo = e as TaskEventArgs<PhotoResult>;

if (photo != null && photo.Result != null && photo.Result.ChosenPhoto != null)

{

BitmapImage image = new BitmapImage();

image.SetSource(photo.Result.ChosenPhoto);

imgPhoto.Source = image;

}

}

Media Library Implementation

The media library implementation example simply displays a horizontally scrolling list containing all of the photos on the device. When a user selects an item from the list, then a larger version of the image is simply displayed above the list.

In order to achieve this first a reference to the Microsoft.XNA.Framework assembly needs to be added to the project, as it is this assembly which contains the MediaLibrary class which does most of the work.

A simple class is now created called MediaImage, and this simply holds a reference to an individual BitmapImage which represents a photo. This is required to allow us to use data binding within the the listbox.

public class MediaImage

{

public BitmapImage ImageFile { get; set; }

}

<ListBox.ItemTemplate>

<DataTemplate>

<Image Source="{Binding ImageFile}" Width="100" Height="100"/>

DataTemplate>

ListBox.ItemTemplate>

The following method is then called from the page’s constructor, and this method is responsible for populating the list with the images.

private void GetImages()

{

MediaLibrary mediaLibrary = new MediaLibrary();

var pictures = mediaLibrary.Pictures;

foreach (var picture in pictures)

{

BitmapImage image = new BitmapImage();

image.SetSource(picture.GetImage());

MediaImage mediaImage = new MediaImage();

mediaImage.ImageFile = image;

lstImages.Items.Add(mediaImage);

}

Finally the list’s SelectionChanged event is handled to simply populate the Image with the selected image from the list.

private void lstImages_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

MediaLibrary mediaLibrary = new MediaLibrary();

BitmapImage image = new BitmapImage();

image.SetSource(mediaLibrary.Pictures[lstImages.SelectedIndex].GetImage());

imgSelectedPhoto.Source = image;

}