|
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.
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:
Alright - now that you have the right tools, it's
time to start working on our application.
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!
|
Draw using the InkCanvas - Page 1
