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.
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.
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!
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>
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).(GradientStop.Color)" From="Yellow" To="Blue" Duration="0:0:5"/> <ColorAnimation Storyboard.TargetName="myInkCanvas" Storyboard.TargetProperty= "(InkCanvas.Background).(LinearGradientBrush.GradientStops).(GradientStop.Color)" From="Blue" To="Red" Duration="0:0:5"/> <ColorAnimation Storyboard.TargetName="myInkCanvas" Storyboard.TargetProperty= "(InkCanvas.Background).(LinearGradientBrush.GradientStops).(GradientStop.Color)" From="Green" To="Blue" Duration="0:0:5"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Page.Triggers>
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:
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
Now, run your application. Add some ink and then right-click with the mouse or perform a press-and-hold equivalent with a stylus.
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