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
Requires Free Membership to View
When you register, you'll begin receiving targeted emails from my team of award-winning writers. Our goal is to provide a unique online resource for developers, architects and development managers tasked with building and maintaining enterprise applications using Visual Basic, C# and the Microsoft .NET platform.
Hannah Smalltree, Editorial Director
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