Ink Support for Annotations, Blogging, and Games in Silverlight

Article
11/08/2007

This topic describes various uses for ink in your Microsoft Silverlight-based Web applications.

This topic contains the following sections:

Common Ink Scenarios
Supported Ink Input Devices
Getting Started with Ink in Silverlight

Common Ink Scenarios

Annotation

Silverlight has rich support for hosting different types of content vessels and other media, and adding ink annotation is a way to make Silverlight content more interactive and personal. Using the elements to implement ink annotation in Silverlight is both easy and flexible. In addition, Silverlight is the only Web technology to support collection and display of high-quality pen input from Tablet PC devices.

Blogging

Blogs are personal, and adding ink to a blog gives it a unique, personal touch. You also extend what is possible in a blog when you add writing, drawing, and annotation over photos and videos.

Games

The use of ink in Silverlight opens up new scenarios for natural interaction in online game content. Silverlight makes the implementation of these scenarios straightforward, and the flexibility of the input model enables great flexibility when you implement it in your gaming content.

Supported Ink Input Devices

Pen Input

Computers with pen digitizers (such as a Tablet PC or even a desktop computer with an external digitizer) can take advantage of the full-fidelity pen input in Silverlight. These devices create ink that you can integrate into your Silverlight Web pages, resulting in high-quality handwriting, drawing, annotation, oil painting and other content input with a pen.

Touch Input

Silverlight supports touch-screen devices such as those found in certain Tablet PC and Ultra-Mobile PC (UMPC) computers. Touch enables users to interact with Silverlight content in a natural way, when a keyboard or a stylus is cumbersome or unnecessary.

Mouse Input

You can use a mouse to collect ink in Silverlight Web content. However, ink that is generated with the mouse has a lower resolution when compared to pen input that is gathered with a digitizer. You can use mouse-generated ink in the same way as pen-generated ink.

Getting Started with Ink in Silverlight

Understanding Ink Data

Ink refers to handwriting or drawing content that has been input with a pen, touch, or mouse. The ink in Silverlight contains a StrokeCollection object, which, in turn, contains individual Stroke objects. Each Stroke corresponds to a pen down, pen move, and pen up sequence. A Stroke can be a dot, a straight line, or a curving line. Each Stroke contains a StylusPointCollection object, which, in turn, contains individual StylusPoint objects. StylusPoint objects are collected when the pen moves while it is in contact with the digitizer. The ink also contains characteristics such as color, width, and outline color, all of which are contained in the DrawingAttributes class.

InkPresenter Element

The InkPresenter element is a Canvas that you use to display ink. The InkPresenter is generally the same as the Canvas element, but also has a StrokeCollection. When you add Stroke objects to the StrokeCollection, the InkPresenter automatically renders them.

Collecting Ink by Using Mouse Events

In general, you collect ink by retrieving StylusPoint objects when the pen moves while in contact with the screen. You then add a Stroke object, which consists of the collected StylusPoint objects, to the StrokeCollection that is associated with the InkPresenter.