How To: Implement an Ink enabled Silverlight Photo Annotation Webpage
So let’s take a look at what code needs to be written to implement basic photo annotation:
In this xaml, we have our root Canvas “root”, our Image, then our InkPresenter “inkPresenterElement” that specifies mouse event handlers for down, move, and up.
var inkPresenter; // Corresponds to InkPresenter element in xaml
var newStroke = null; // The Stroke variable we’ll use here in mouse handlers
function root_Loaded(sender, args)
silverlight = document.getElementById("agControl1");
inkPresenter = sender.findname("inkPresenterElement");
// Capture mouse and create the stroke
newStroke = silverlight.content.createFromXaml('<Stroke/>');
newStroke.DrawingAttributes.Color = "white";
newStroke.DrawingAttributes.OutlineColor = "black";
newStroke.DrawingAttributes.Width = 6;
newStroke.DrawingAttributes.Height = 6;
// Add the new points to the Stroke we’re working with
if (newStroke != null)
// Release the mouse
newStroke = null;
root_Loaded: In this method, we initialize our variables that reference the Silverlight control, and the InkPresenter that we’ll be manipulating.
InkPresenterMouseDown: In this method, we capture the mouse (so we get events if we go outside the control), Initialize our Stroke variable with a newly created stroke, add the collected StylusPoints to the Stroke, set the DrawingAttibute properties on the Stroke, then add the Stroke to the InkPresenter. This causes it to be rendered over the photo.
InkPresenterMouseMove: In this method, we add collected StylusPoints to the current Stroke variable (if we’re collecting ink).
InkPresenterMouseUp: In this method we stop inking our stroke by nulling our Stroke variable.
So that’s all you really need to implement Ink photo annotation in with Silverlight! Later, I’ll post a more comprehensive example, but this will get you started…
Screenshot of photo annotation page in action:
If you want to play with the sample code for this example, just download the attachment.
Until next time, happy coding!