Problem solve Get help with specific problems with your technologies, process and projects.

Soliciting hand drawn feedback from your users

There are many instances when using screen capture is essential in communicating. In this tip, contributor Walt Ritscher explains how to create hand drawn notes on screen captured images with WPF InkCanvas control.

We've all heard the phrase "a picture is worth 1000 words." This is true in many scenarios. I find myself using screen capture utilities frequently to create a picture of UI bugs or defects. Then I attach the screenshot to an email and send to the support department. It makes it easy to provide proof of a problem by using pictures of the faulty screen.

My favorite screen capture program is Snag-it, but there are loads of other utilities that can do the job. One nice feature provided by Snag-it is the ability to draw arrows and write notes on the captured image. In this tip, I show you how to do something similar with the WPF InkCanvas control.


The purpose of the InkCanvas is to simplify gathering hand writing input from tablet PCs. By adding an InkCanvas to your XAML, the user can draw on the screen; that is, they can draw if they're within the boundaries of the control. Best of all the control just works without having to write any additional code. You don't have to have a tablet PC in order to gather input as it also works with the mouse. 

Here's some sample XAML for the InkCanvas.   

<InkCanvas Background="Blue"/>

Yes, it's as simple as that.

In the following screenshot I'm drawing on the InkCanvas with my mouse.


With a few more lines of XAML, you can transform the drawing point. This lets you customize the 'pen;. In the following code I'll change the color and size of the drawing point. The IsHighlighter=true  makes the drawing point semitransparent and I can changed the shape of the drawing point by setting the StylusTip property to either an Ellipse or Rectangle.

Saving the ink strokes

Once the user is finished drawing in the  control, you can save ink strokes to file. That way you can retrieve them later.  As you can see in the following code the InkCanvas works with the FileStream to save and load the ink strokes.  Also note the use of the Strokes.Clear method to reset the canvas.

Making a bug report system

Let's brainstorm how to make a simple bug reporting application. First we need code to capture screenshot. (You can find details on how to do this in an earlier tip.)

Once we have a screenshot we can load it into the background of the InkCanvas. 

Now the user can draw on the screenshot. Next, write some code to save the screenshot and the ink strokes and you are done. One of my clients implemented something similar earlier this year. The data was stored in a database and made available to the testers and developers when a bug was filed.

Dig Deeper on ASP.NET, Ajax and Web application development

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.