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;

}

Comments

  1. Hi,
    Are you using the unlocked ROM for your PhotoChooserTask? When I try and run it, I can't see any sample pictures. Have I missed an emulator setting?

    ReplyDelete
  2. Hi,

    I was using an unlocked version of the April CTP refresh.

    Looks like the Beta release of the development tools will be released today, so Im assuming that there'll be a lot more features in the stock emulator release this time.

    ReplyDelete
  3. Hi,

    is the Sourcecode from your sample open?

    ReplyDelete
  4. Thank you for this great code snippet.
    I've added one extra line of code in the completed event handler in order to hide camera button in the application bar.

    // in case of cancelling, the camera button in the app bar is not removed.
    // let's do it manually in the completed handler
    // maybe it’s a bug in the phone tasks lib...
    photo.ShowCamera = false;

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

    Otherwise the button remains in the app bar after leaving the media lib with the back button (cancelling)

    ReplyDelete
  5. Thank you for this great code. I have a question, in this code:
    imgSelectedPhoto.Source = image;

    imgSelectedPhoto is an image control right? Because as I implement your code, it has an error on imgSelectedPhoto, it says that it doesn't exist in the current context. I named my image control as imgSelectedPhoto but still, an error occurs,

    ReplyDelete
  6. note make sure that ID_CAP_MEDIALIB_PHOTO from manifest is selected.(manifest is located on Properties > WMAppManifest.xml > Capabilities )

    ReplyDelete

Post a Comment

Popular posts from this blog

Windows Phone 7 - Jogging Application Part 2

Windows Phone 7 CTP April Refresh - Bing Maps Silverlight Control