I have to say that I absolutely love the path mini language that is part of XAML. If you haven't heard about it, there are more details here: http://msdn2.microsoft.com/en-us/library/ms752293.aspx
So, while playing with ink in Silverlight, I realized that there was no way that I could see where you could interact with an application using ink other than drawing on the surface. If you ever played (the highly addictive) inkball game that comes with Vista, you'll know what I mean.
So, I wondered to myself if it was possible to use the path mini language to generate a XAML representation of what I ink on the screen. Not only was it possible. It was easy.
So, first, let's see how to get started with ink in Silverlight. You get up an running with the InkPresenter object. Here's an example of a very simple XAML document that uses it.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="Black">
var theInk; // Reference to the ink presenter
var newStroke; // Reference to a stroke
var theControl; // Reference to the Silverlight control
function handleLoad(control, userContext, rootElement)
// The Load event returns a reference to the control
// But other event handlers do not. So we're going
// to make a reference to the control here
theControl = control;
theRoot = rootElement;
// Here we will create a reference to the ink element
theInk = control.content.findName("inkEl");
// Capture the Mouse
// Create a new stroke
newStroke = theControl.content.createFromXaml('<Stroke/>');
// Assign a new drawing attributes element to the stroke
// This, as its name suggests, defines how the stroke will appear
var da = theControl.content.CreateFromXaml('<DrawingAttributes/>');
newStroke.DrawingAttributes = da;
// Now that the stroke has drawing attributes
// Let's define them...
newStroke.DrawingAttributes.Width = 1;
newStroke.DrawingAttributes.Height = 1;
newStroke.DrawingAttributes.Color = "Black"
newStroke.DrawingAttributes.OutlineColor = "Black"
// Add the new points to the Stroke we're working with
if (newStroke != null)
// Release the mouse
var pathString = ""
var pathElement = "<Path Stroke='Black' Data='"
var bDoPath = window.confirm("Convert to Path?");
var n = newStroke.StylusPoints.Count;
pathString +="M "
pathString +="L "
pathString+= + newStroke.StylusPoints.GetItem(i).X + "," +
newStroke.StylusPoints.GetItem(i).Y + " "
thePath = theControl.content.createFromXaml(pathElement);
newStroke = null;
The workhorse of the conversion is in the inkMouseUp function. Here, the stroke has been completed, and a Silverlight ink stroke has a collection of StylusPoints. You can get the contents of a specific StylusPoint in this collection using GetItem(). The Path Mini language uses M for 'move' followed by X,Y co-ordinates, and L for 'line' followed by X,Y co-ordinates.
So M0,0 L100,100 L200,200, will move the pen to 0,0, draw a line to 100,100 and draw another to 200,200. The StylusPoints have X and Y co-ordinates, so we can build up a string like this easily.
The format of a <Path> node is <Path Stroke='Color' Data='Expression in Path mini Language' />.
So, we just build a string like this, sticking the path language string we generated from the strokes, and then use createFromXaml to stick this into the Xaml DOM. We then remove the strokes collection generated by the pen, and we have XAML in the DOM being rendered instead.
If your browser supports IFrame, you can see it here too (Scribble in the space with mouse, pen or whatever):