Tip

Soliciting hand drawn feedback from your users

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.

InkCanvas

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.

DefaultDrawingAttributes

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.

This was first published in May 2011

There are Comments. Add yours.

 
TIP: Want to include a code block in your comment? Use <pre> or <code> tags around the desired text. Ex: <code>insert code</code>

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy
Sort by: OldestNewest

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.