Draw using the InkCanvas - Page 1
       by kirupa  |  10 February 2008

Did you ever wish you could just scribble on your computer using your mouse just like you could using pen and paper? Well, if you did, then look no further! WPF includes a handy control known as InkCanvas that allows you to do just that. The following is an example of something that I drew using just my mouse cursor:


[ with an InkCanvas, your mouse cursor becomes a virtual pen ]

In this article, I will first cover the easy part of how to insert an InkCanvas into your document, and then I will describe the more involved parts describing common scenarios and how to implement them.

Get Expression Blend and Visual Studio 2008 Express
To get the most out of this article, you should follow along with my instructions. To do that, you will need Expression Blend 2 and Visual Studio 2008 installed. If you do not already have them, you can download and install the fully-functional trial version of Blend and the free Visual C# 2008 Express from the links shown below:

Download Visual C# 2008 Express
Download Expression Blend 2 Preview (60-Day Trial)

Alright - now that you have the right tools, it's time to start working on our application.

Inserting an InkCanvas
Launch Blend and create a new WPF C# project. Once you have created your new project, you should see an empty artboard. Your Objects and Timeline panel will only contain entries for Window and LayoutRoot:

[ the default objects displayed for a WPF application ]

Now, let's insert our InkCanvas control. From your toolbox, click on the Asset Library icon:

[ find the Asset Library icon ]

The Asset Library window will appear. The search text field inside your Asset Library window will have focus by default, so start typing the word inkcanvas. After typing a few letters, your InkCanvas control will appear:

[ find the InkCanvas control in your Asset Library ]

Select the InkCanvas control. Once you have it selected, your Asset Library will close and your toolbox will display your InkCanvas control:

[ the InkCanvas control you selected earlier will now be displayed in your toolbox ]

Double click on the InkCanvas control from your toolbox to insert it at its default size in your application:

[ your InkCanvas control should now be inserted at its default size ]

The default InkCanvas size is pretty small, so let's make it take up all available space in our application. The easiest way of doing that is by clicking on the bottom-right resize adorner and just dragging:

[ there are several ways of making a control take up all available space! ]

Alright - you now have a very simple application that contains nothing of interest beyond just an ink canvas. Wait...isn't that interesting enough?! Test your application from Blend by hitting F5.

If you move your mouse over your running application, you will see your cursor change to a small point. If you click and begin to drag your mouse around, you'll begin to draw and see lines:

[ I drew a simple squiggly line ]

That's pretty cool, but there are a lot more things that can be done than just drawing a simple, boring line.. In the next page, let's see how this works and begin looking at customizing it.

Onwards to the next page!

1 | 2 | 3 | 4 | 5 | 6


kirupa.com's fast and reliable hosting provided by Media Temple.