Basics of Ink in Windows Presentation Foundation

Ink is a first-class citizen in the next generation of Microsoft® Windows® user interfaces. Microsoft built ink functionality into all versions of the Microsoft Windows Vista™ operating system, and the new Windows Presentation Foundation (WPF) makes it easy to ink-enable your applications. Even using ink over moving video is easy in WPF!

Ink applications in WPF are similar in many respects to those in Windows Forms. You need to collect ink, display it over images, store and retrieve ink, and perform recognition on ink to find out what it says. In this article, I’ll look at the basics of performing each of these functions.

For the examples, I assume that you are working on Windows Vista. It is possible to configure a Windows XP system to integrate ink with WPF, and Eliot Graff talks about that in his article “The Proper Developer Environments for Mobile PC, Tablet PC, and Ultra-Mobile PC Applications,” elsewhere in this issue. In Windows Vista, Microsoft built in everything needed to do ink in WPF, except for the development tools.

You will need to install both Microsoft Visual Studio® 2005 and the Visual Studio 2005 extensions for .NET Framework 3.0. You can download the extensions from the Microsoft Web site. Start at http://msdn.microsoft.com/vista, and then look for the link for Windows Vista downloads.

The extensions include project templates for projects in WPF and in Windows Communication Foundation (WCF). This article is only concerned with WPF, so I won’t discuss WCF any further.

If you’re not working on a Tablet PC and you also don’t have a digitizer attached to your system, that’s OK. You can use your mouse as an ink input device on any Windows Vista system. All the examples will work on a vanilla Windows Vista system.

I’m not assuming that you know anything about WPF. However, I don’t go very deeply into the WPF concepts. I only introduce a few basics that are necessary to start working with ink.

I wrote the code examples in this article in Visual Basic®, and you only have to make minor changes in syntax to run them in C#. Only two examples use code. Most of the examples use the markup language for WPF called Extensible Application Markup Language (XAML). I’ll talk about that below.

Getting Started

If you have worked with ink before, you’ve probably used Windows Forms or direct access to COM objects for ink functions. WPF adds a new way to host ink functionality.

The easiest way to get started with ink in WPF is by using a new WPF control, the InkCanvas. This control combines all the things you would do with InkCollector, InkPicture, and InkOverlay controls when doing development on the classic Tablet PC.

You’ll find the InkCanvas control in the System.Windows.Controls namespace, along with all the other routine WPF controls. Other objects associated with ink manipulation are in the System.Windows.Ink namespace, including objects for holding ink and doing recognition from ink.

I’ll run through a simple example to show you just how easily you can get started with ink in WPF. After installing the Visual Studio extensions, start Visual Studio 2005, and then select the option to create a new project. You’ll see a new subfolder for .NET Framework 3.0 project templates just beneath the folder for Windows application project templates. Click that folder to see the project types available.

You’ll see a template for “Windows Application (WPF)”. This is similar to a Windows Forms application, except that WPF is the UI technology used. Select that template type, choose an appropriate folder to store your project, and then enter a project name of “InkInWPF1”.

You’ll see a design surface (called a WPF Window), which looks superficially similar to a form in Windows Forms. It has a default name, Window1. Even though it looks like a form, working with controls on the surface is different from the way it’s done with a Windows Form. I won’t spend a lot of time explaining how WPF positions things; others will write a complete article on that subject.

The visual designer for WPF in the Visual Studio 2005 Extensions is a placeholder until the next version of Visual Studio is ready. That means it’s not as polished as the Windows Forms designer. When working with controls, you’ll need to work a bit harder to position and size them than you did in Windows Forms.

Drag an InkCanvas control from the Toolbox onto the window. You should position and size the InkCanvas to be roughly the same size as the WPF window.

To make sure the designer doesn’t restrict the area in which you can input ink, select the InkCanvas control and set the Margin property to all zeros. To do this, right-click the Margin property and select Reset, which sets the Margin property to its default value of all zeros.

Press F5 to run the program. Use your stylus (or mouse) to scribble in the window.

By: Billy Hollis

Billy Hollis is an author and consultant specializing in .NET technologies. He has written several books and was coauthor of the first book ever published on Visual Basic .NET. He speaks at major conferences worldwide, including TechEd, VSLive, DevConnections, and Microsoft’s Patterns and Practices Architect Summit events. He is available for consulting and training on .NET architecture, smart client systems, Tablet PC, and WPF.

bhollis@dotnetmasters.com