When developing Windows Phone apps you may encounter a use case when you have to allow the user to either pick a photo from the photos gallery in the photo or a take a new photo using the phone’s camera. One example of this may be the registration process when the user may choose a profile picture.
In Windows Phone 8.1, this task is quite simple, just use the FileOpenPicker. It allows you to pick a photo from the gallery or take a new photo. Just take a look at this animation showing how the users takes a new photo using the phone’s camera.
The code for this is relatively simple, although the AndContinue pattern can be a pain
var openPicker = new FileOpenPicker
{
ViewMode = PickerViewMode.Thumbnail,
SuggestedStartLocation = PickerLocationId.PicturesLibrary
};
openPicker.FileTypeFilter.Add(".jpg");
openPicker.PickSingleFileAndContinue();
In Windows 10 Mobile, the FileOpenPicker has been changed to be more customizable. This make the process of taking a new photo using the phone’s camera totally hidden. Not a chance a common user will discover it, just take a look at this animation.
So how to make this experience a bit better for the user? My solution is instead of launching the FileOpenPicker showing a Flyout with two options; Choose from gallery and Take photo. The Choose from gallery option just launches the FileOpenPicker
var openPicker = new FileOpenPicker
{
ViewMode = PickerViewMode.Thumbnail,
SuggestedStartLocation = PickerLocationId.PicturesLibrary
};
openPicker.FileTypeFilter.Add(".jpg");
var file = await openPicker.PickSingleFileAsync();
if (file != null)
{
await ProcessFile(file);
}
and the Take photo option uses CameraCaptureUI to directly take a photo
var ccu = new CameraCaptureUI();
var file = await ccu.CaptureFileAsync(CameraCaptureUIMode.Photo);
if (file != null)
{
await ProcessFile(file);
}
The result might look like this. Do not forget to add an option to delete the photo if one is already chosen.
