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.
Prerequisites
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: Getting Started with WPF.
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 Winndows 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:
Open Microsoft Visual Studio 2005
Create a new Windows Application (WPF)
Type <InkCanvas/> between the <Grid> tags
Press F5 to launch your application in the debugger
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.
<Page>
<InkCanvas Name="myInkCanvas">
<InkCanvas.Background>
<LinearGradientBrush>
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Blue" Offset="0.5" />
<GradientStop Color="Green" Offset="1.0" />
</LinearGradientBrush>
</InkCanvas.Background>
</InkCanvas>
...
</Page>
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.
<Page.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever" AutoReverse="True">
<ColorAnimation Storyboard.TargetName="myInkCanvas"
Storyboard.TargetProperty=
"(InkCanvas.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
From="Yellow" To="Blue" Duration="0:0:5"/>
<ColorAnimation Storyboard.TargetName="myInkCanvas"
Storyboard.TargetProperty=
"(InkCanvas.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
From="Blue" To="Red" Duration="0:0:5"/>
<ColorAnimation Storyboard.TargetName="myInkCanvas"
Storyboard.TargetProperty=
"(InkCanvas.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)"
From="Green" To="Blue" Duration="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Page.Triggers>
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 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
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);
}
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:
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)
MyBase.OnStartup(args)
win = New Window()
ic = New InkCanvas()
win.Content = ic
win.Show()
End Sub 'OnStartup
End Class 'Program
Module Module1
Sub Main()
Dim prog As New Program()
prog.Run()
End Sub
End Module
using System;
using System.Windows;
using System.Windows.Controls;
class Program : Application
{
Window win;
InkCanvas ic;
protected override void OnStartup(StartupEventArgs args)
{
base.OnStartup(args);
win = new Window();
ic = new InkCanvas();
win.Content = ic;
win.Show();
}
[STAThread]
static void Main(string[] args)
{
new Program().Run();
}
}