Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.
Handwriting overlay lens app for Windows Phone
This article explains how to develop a lens app where you can "handwrite" over the picture.
A lens on Windows Phone is a specialised camera or imaging app that can be opened from the built-in camera app.
This code example shows how to create a lens which you can "handwrite" over (DrawLens), using the InkPresenter control. As lenses are well documented on the Windows Phone Dev Center (and you can get a list of useful resources in Camera Lens apps on Windows Phone), it primarily focuses on InkPresenter and the drawing aspects.
As discussed in Camera Lens apps on Windows Phone (and its linked articles) the code to register the lens, add the icons needed in the lens-picker, and redirect "lens requests" to launch the required page in the lens app, is nearly "boilerplate" - you can view it in File:DrawLens.zip if needed!
This example therefore starts from the construction of LensPage.xaml the page that is launched when the lens is selected. We use the InkPresenter control for the drawing, and the WriteableBitmapEx Nuget package for the image processing.
The LensPage.xaml will look like this:
<!--LayoutRoot is the root grid where all page content is placed-->
There are two columns. One with the buttons Clear and Save and the other with an InkPresenter that has a video brush. The camera feed will be streamed to this brush. I will not explain how the InkPresenter is drawing the strokes, it is not the purpose of this wiki and it is explained in the InkPresenter link above.
First, when the page is loaded, we initialize the camera and redirect the feed to the InkPresenter videobrush background:
private PhotoCamera _camera;
this.Loaded += LensPage_Loaded;
void LensPage_Loaded(object sender, RoutedEventArgs e)
// Initialize camera, and show buttons only when camera ready
_camera = new PhotoCamera(CameraType.Primary);
// Event launched when the camera as taken a picture
_camera.CaptureImageAvailable += _camera_CaptureImageAvailable;
When the user press on the Save button, we capture an image:
private void Save_OnClick(object sender, RoutedEventArgs e)
When the image is captured, the camera CaptureImageAvailable event is launched. There you get the bitmap stream.
We make a bitmap from that stream and then take all the strokes data of the InkPresenter and redraw them on the bitmap (the DrawLineBresenham method in the code is based on the WritebeableBitmapEx one and allows us to draw lines thicker than 1 pixel - see the example source code). As the InkPresenter size is different than the size of the image, I compute the magnification ratio by dividing the image size by the InkPresenter size.
After drawing all the strokes, I save the bitmap to the Media Library.
/// Called when image is available
/// <param name="sender"></param>
/// <param name="e"></param>
void _camera_CaptureImageAvailable(object sender, ContentReadyEventArgs e)
Dispatcher.BeginInvoke(() => CreateAndSave(e.ImageStream));
/// Process the image
/// <param name="stream"></param>
private void CreateAndSave(Stream stream)
// Get bitmap from stream
var _bitmap = new WriteableBitmap(1, 1);
_bitmap = _bitmap.FromStream(stream);
var width = _bitmap.PixelWidth;
var height = _bitmap.PixelHeight;
// Get ratio between the InkPresentersize and the bitmap size
var ratiox = width / TheInkPresenter.Width;
var ratioy = height / TheInkPresenter.Height;
// Draw each strokes on the bitmap
foreach (var stroke in TheInkPresenter.Strokes)
var x1 = stroke.StylusPoints.X * ratiox;
var y1 = stroke.StylusPoints.Y * ratioy;
foreach (var point in stroke.StylusPoints.Skip(1))
var x2 = point.X * ratiox;
var y2 = point.Y * ratioy;
DrawLineBresenham(_bitmap, (int)x1, (int)y1, (int)x2, (int)y2, Colors.Red, (int)ratiox, (int)ratioy);
x1 = x2;
y1 = y2;
// Save into library
MessageBox.Show("Image saved !");
The resulting lens produces the images shown in the introduction.
You can download the sources from here: File:DrawLens.zip
(Original article and a French translation can be found here : http://www.guruumeditation.net/developping-a-lens-app-for-windows-phone-8)