Ink in Silverlight 2 (Beta 1)
I am very excited to write my first blog post about Silverlight 2 today, the project I am currently working on. In early March 2008 we shipped a public Beta for Silverlight 2 that you can download (along with all the neccessary tools) from https://silverlight.net/.
Today I want to introduce you to using Ink in your Silverlight 2 application, using the new managed object model. This post has two versions of a basic inking sample attached - a C# version and a VB.NET version. Let's take a look at the XAML first. The relevant piece here is the InkPresenter element, which is our inking surface that will host the ink strokes collected by the user:
<InkPresenter x:Name="inkCtrl" Cursor="Stylus"
MouseLeftButtonDown="inkCtrl_MouseLeftButtonDown"
MouseMove="inkCtrl_MouseMove"
MouseLeftButtonUp="inkCtrl_MouseLeftButtonUp"/>
Now we need to add a little bit of code behind in the mouse event handlers in order to collect strokes from the user's input. Note that the 'GetStylusPoints()' calls actually obtain the high fidelity stylus input when using a stylus, so you get optimal, smooth ink on a Tablet PC - or with an external Tablet input device on your desktop.
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void inkCtrl_MouseLeftButtonDown(object sender,
MouseButtonEventArgs e)
{
// capture mouse and create a new stroke
inkCtrl.CaptureMouse();
newStroke = new Stroke();
inkCtrl.Strokes.Add(newStroke);
// set the desired drawing attributes here
newStroke.DrawingAttributes.Color = Colors.Blue;
newStroke.DrawingAttributes.OutlineColor = Colors.Yellow;
newStroke.DrawingAttributes.Width = 6d;
newStroke.DrawingAttributes.Height = 6d;
// add the stylus points
newStroke.StylusPoints.AddStylusPoints(e.GetStylusPoints(inkCtrl));
}
private void inkCtrl_MouseMove(object sender,
MouseEventArgs e)
{
if (newStroke != null)
{
// add the stylus points
newStroke.StylusPoints.AddStylusPoints(e.GetStylusPoints(inkCtrl));
}
}
private void inkCtrl_MouseLeftButtonUp(object sender,
MouseButtonEventArgs e)
{
if (newStroke != null)
{
// add the stylus points
newStroke.StylusPoints.AddStylusPoints(e.GetStylusPoints(inkCtrl));
}
// release mouse capture and we are done
inkCtrl.ReleaseMouseCapture();
newStroke = null;
}
private Stroke newStroke = null;
}
And here is the result at runtime, after collecting a couple of strokeson my Tablet PC:
For a more advanced sample app that uses ink to annotate pictures and has support for erasing ink, please visit the Silverlight 2 Beta1 Gallery and look for the 'Image Snipper' sample. You can also run it directly from the below IFrame (requires the Silverlight 2 Beta1 runtime to be installed on your computer):
<embedded sample removed, since Silverlight 2 Beta1 is no longer relevant>