Choosing an image from gallery or camera a bit better in Universal Windows apps
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.
Enjoyed this article? Support my work by buying me a coffee! ☕️
Buy Me a Coffee