Mobile Development at U2U Consult

Based in Brussels, Belgium, U2U Consult has been offering consulting & development services in the EMEA region for over 10 years. We offer mobile development on all platforms from Apple to Android & Microsoft.

is populated through a SourceImage dependency property, of type WriteableBitmap,

has a templatable UI that allows you to select a region by

dragging a corner,

dragging the entire selection, and

scaling the selection through a pinch gesture,

exposes the result as a CroppedImage dependency property, of type WriteableBitmap, and

provides helper methods to load and save a WriteableBitmap from and to different image formats.

The sample app shows how to use the control, restyle the control, and capture an image from the camera. Here’s a screenshot of it. It shows the control in its default UI on the left, and the cropped image on the right:

This control is an upgrade of the Windows RT version that I wrote a couple of years ago, with some improvements and bug fixes.

Default usage

To use the control, all you need to do is drop it on a page:

<controls:ImageCropperx:Name="ImageCropper"/>

It will look like a dull grey rectangle, until you assign a value to its SourceImage property. Here’s how to do that through a file picker (note that the LoadAsync extension method comes with the package):

The ImageCropper will now show the image, and the UI elements that allow you to select and highlight a region. That selected region is exposed by the control as the CroppedImage property. This is also a WriteableBitmap, so you can use it as a source for an image control:

Here’s the custom template for the corner element. I’s a group of two RectangleGeometry instances, that is translated out of the selected region. Since these are hard to hit by touch, there’s a transparent ellipse on top of them:

Capturing the camera view

A common use case for this type of control is the selection of a portion of the image from a camera built into the device or attached to it. For this scenario, I placed a CaptureElement on top of the ImageCropper, to display the stream from the (back) camera:

I refactored the code of the new Camera Preview Frame sample (see Credits) into a reusable MVVM-ish CameraService class. When the user navigates to the corresponding page, the service looks up the camera, configures it, and hooks its image stream to the CaptureElement:

[The file = null is necessary, to unlock the file between the overriding and the reading.]

Here’s the ImageCropper control cropping some flowers from my garden:

Credits

The ImageCropper control was originally written according to the Hackathon Design Pattern: it was quickly assembled from different non-related resources on the Internet, just to win a device. But don’t worry: I took the time to refactor and debug it properly. Here are some of the resources: