Getting Started with Ink

Incorporating digital ink into your applications is easier than ever. Ink has evolved from being a corollary to the COM and Windows Forms method of programming to achieving full integration into the WPF. You do not need to install separate SDKs or runtime libraries.


To use the following examples, you must first install Microsoft Visual Studio 2005 and the Windows SDK. You should also understand how to write applications for the WPF. For more information about getting started with the WPF, see Walkthrough: My first WPF desktop application.

Quick Start

This section helps you write a simple WPF application that collects ink.

If you haven't already done so, install Microsoft Visual Studio 2005 and the Windows Software Development Kit (SDK). WPF applications usually must be compiled before you can view them, even if they consist entirely of Extensible Application Markup Language (XAML). However, the Windows Software Development Kit (SDK) includes an application, XamlPad, designed to speed up the process of implementing a XAML-based UI. You can use that application to view and tinker with the first few samples in this document. The process of creating compiled applications from XAML is covered later in this document.

To launch XAMLPad, click the Start menu, point to All Programs, point to Microsoft Windows SDK, point to Tools, and click XAMLPad. In the rendering pane, XAMLPad renders the XAML code written in the code pane. You can edit the XAML code, and the changes immediately appear in the rendering pane.

Got Ink?

To start your first WPF application that supports ink:

  1. Open Microsoft Visual Studio 2005

  2. Create a new Windows Application (WPF)

  3. Type <InkCanvas/> between the <Grid> tags

  4. Press F5 to launch your application in the debugger

  5. Using a stylus or mouse, write hello world in the window

You've written the ink equivalent of a "hello world" application with only 12 keystrokes!

Spice Up Your Application

Let’s take advantage of some features of the WPF. Replace everything between the opening <Window> and closing </Window> tags with the following markup to get a gradient brush background on your inking surface.

  <InkCanvas Name="myInkCanvas">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Blue" Offset="0.5" />
        <GradientStop Color="Green" Offset="1.0" />

Using Animation

For fun, let's animate the colors of the gradient brush. Add the following XAML after the closing </InkCanvas> tag but before the closing </Page> tag.

  <EventTrigger RoutedEvent="Page.Loaded">
        <Storyboard RepeatBehavior="Forever" AutoReverse="True">
          <ColorAnimation  Storyboard.TargetName="myInkCanvas"
          From="Yellow" To="Blue" Duration="0:0:5"/>
          <ColorAnimation Storyboard.TargetName="myInkCanvas"
          From="Blue" To="Red" Duration="0:0:5"/>
          <ColorAnimation Storyboard.TargetName="myInkCanvas"
          From="Green" To="Blue" Duration="0:0:5"/>

Adding Some Code Behind the XAML

While XAML makes it very easy to design the user interface, any real-world application needs to add code to handle events. Here is a simple example that zooms in on the ink in response to a right-click from a mouse:

Set the MouseRightButtonUp handler in your XAML:

<InkCanvas Name="myInkCanvas" MouseRightButtonUp="RightMouseUpHandler">

In Visual Studio’s Solution Explorer, expand Windows1.xaml and open the code-behind file, Window1.xaml.cs or Window1.xaml.vb if you are using Visual Basic. Add the following event handler code:

private void RightMouseUpHandler(object sender, 
                                 System.Windows.Input.MouseButtonEventArgs e)
    Matrix m = new Matrix();
    m.Scale(1.1d, 1.1d);
    ((InkCanvas)sender).Strokes.Transform(m, true);
Private Sub RightMouseUpHandler(ByVal sender As Object, _
                                ByVal e As System.Windows.Input.MouseButtonEventArgs)

    Dim m As New Matrix()
    m.Scale(1.1, 1.1)
    CType(sender, InkCanvas).Strokes.Transform(m, True)

End Sub 'RightMouseUpHandler

Now, run your application. Add some ink and then right-click with the mouse or perform a press-and-hold equivalent with a stylus.

Using Procedural Code Instead of XAML

You can access all WPF features from procedural code. Here is a "Hello Ink World" application for WPF that doesn’t use any XAML at all. Paste the code below into an empty Console Application in Visual Studio. Add references to the PresentationCore, PresentationFramework, and WindowsBase assemblies, and build the application by pressing F5:

using System;
using System.Windows;
using System.Windows.Controls;
class Program : Application
    Window win;
    InkCanvas ic;

    protected override void OnStartup(StartupEventArgs args)
        win = new Window();
        ic = new InkCanvas();
        win.Content = ic;

    static void Main(string[] args)
        new Program().Run();
Imports System
Imports System.Windows
Imports System.Windows.Controls

Class Program
    Inherits Application
    Private win As Window
    Private ic As InkCanvas

    Protected Overrides Sub OnStartup(ByVal args As StartupEventArgs)
        win = New Window()
        ic = New InkCanvas()
        win.Content = ic

    End Sub 'OnStartup

End Class 'Program

Module Module1

    Sub Main()
        Dim prog As New Program()

    End Sub

End Module

See Also

Digital Ink
Collecting Ink
Handwriting Recognition
Storing Ink