Strokes Property

Article
11/08/2007

Gets or sets the collection of ink strokes that corresponds to the InkPresenter.

XAML	<InkPresenter ...> <InkPresenter.Strokes> oneOrMoreStrokes </InkPresenter.Strokes> <InkPresenter/>
Scripting	value = object.Strokes object.Strokes = value

XAML Values

oneOrMoreStrokes

One or more Stroke object elements.

Property Value

StrokeCollection

The collection of ink strokes that corresponds to the InkPresenter.

This property is read/write.

Remarks

In practical terms, you would generally never replace the entire Strokes collection (by using the "set" aspect of this property). It is also uncommon to prepopulate the Strokes collection in the initially loaded XAML. However, once the collection of strokes is populated by user input, you might add, remove or query items from the existing collection.

In order to render, each Stroke in Strokes must also have values established for the DrawingAttributes property, which must be set through property element syntax if set in XAML. See the example below for code that illustrates how to generate Stroke and DrawingAttributes object elements in XAML and then how to use CreateFromXaml to add strokes to the InkPresenter surface based on user input at run time.

Examples

JavaScript
var agCtrl; var inkPresenter; // Corresponds to InkPresenter element in xaml var newStroke = null; // The Stroke variable we'll use here in mouse handlers // DrawingAttributes variables var daWidth = 2; var daHeight = 2; var daColor = "Black"; var daOutlineColor = "Black"; function root_Loaded(sender, args) { // Get the html object which contains the Silverlight plug-in agCtrl = sender.GetHost(); inkPresenter = sender.findname("inkPresenterElement"); } // Capture mouse movement when the left button is pressed and create the stroke function InkPresenterMouseDown(sender,args) { inkPresenter.CaptureMouse(); newStroke = agCtrl.content.createFromXaml('<Stroke/>'); var da = agCtrl.content.CreateFromXaml('<DrawingAttributes/>'); newStroke.DrawingAttributes = da; // Set the drawing attributes properties newStroke.DrawingAttributes.Width = daWidth; newStroke.DrawingAttributes.Height = daHeight; newStroke.DrawingAttributes.Color = daColor; newStroke.DrawingAttributes.OutlineColor = daOutlineColor; newStroke.StylusPoints.AddStylusPoints(args.GetStylusPoints(inkPresenter)); inkPresenter.Strokes.Add(newStroke); } // Add the new points to the Stroke we're working with function InkPresenterMouseMove(sender,args) { if (newStroke != null) { newStroke.StylusPoints.AddStylusPoints(args.GetStylusPoints(inkPresenter)); } } // Release the mouse function InkPresenterMouseUp(sender,args) { newStroke = null; inkPresenter.ReleaseMouseCapture(); } // Set the Drawing Attributes for a pen function SelectPen(sender, args) { daWidth = 1; daHeight = 1; daColor = "Black"; daOutlineColor = "Black"; } // Set the Drawing Attributes for a marker function SelectMarker(sender, args) { daWidth = 10; daHeight = 4; daColor = "Blue"; daOutlineColor = "Blue"; } // Set the Drawing Attributes for a highlighter function SelectHighlighter(sender, args) { daWidth = 25; daHeight = 5; daColor = "Yellow"; daOutlineColor = "Yellow"; } // Erase all strokes from the canvas function EraseCanvas(sender, args) { inkPresenter.Strokes.Clear(); }

var agCtrl;
var inkPresenter; // Corresponds to InkPresenter element in xaml
var newStroke = null; // The Stroke variable we'll use here in mouse handlers
// DrawingAttributes variables
var daWidth = 2;
var daHeight = 2;
var daColor = "Black";
var daOutlineColor = "Black";
function root_Loaded(sender, args) 
{
    // Get the html object which contains the Silverlight plug-in
    agCtrl = sender.GetHost();
    inkPresenter = sender.findname("inkPresenterElement");
}
// Capture mouse movement when the left button is pressed and create the stroke
function InkPresenterMouseDown(sender,args)
{
   inkPresenter.CaptureMouse();
   
   newStroke = agCtrl.content.createFromXaml('<Stroke/>');
   
   var da = agCtrl.content.CreateFromXaml('<DrawingAttributes/>');
   newStroke.DrawingAttributes = da;
   
   // Set the drawing attributes properties
   newStroke.DrawingAttributes.Width = daWidth;
   newStroke.DrawingAttributes.Height = daHeight;
   newStroke.DrawingAttributes.Color = daColor;
   newStroke.DrawingAttributes.OutlineColor = daOutlineColor;
   
   newStroke.StylusPoints.AddStylusPoints(args.GetStylusPoints(inkPresenter));
   inkPresenter.Strokes.Add(newStroke);
}
// Add the new points to the Stroke we're working with
function InkPresenterMouseMove(sender,args)
{
   if (newStroke != null)
   {
      newStroke.StylusPoints.AddStylusPoints(args.GetStylusPoints(inkPresenter));
   }
}
// Release the mouse
function InkPresenterMouseUp(sender,args)
{
   newStroke = null;
   inkPresenter.ReleaseMouseCapture();
}
// Set the Drawing Attributes for a pen
function SelectPen(sender, args)
{
  daWidth = 1;
  daHeight = 1;
  daColor = "Black";
  daOutlineColor = "Black";
}
// Set the Drawing Attributes for a marker
function SelectMarker(sender, args)
{
  daWidth = 10;
  daHeight = 4;
  daColor = "Blue";
  daOutlineColor = "Blue";
}
// Set the Drawing Attributes for a highlighter
function SelectHighlighter(sender, args)
{
  daWidth = 25;
  daHeight = 5;
  daColor = "Yellow";
  daOutlineColor = "Yellow";
}
// Erase all strokes from the canvas
function EraseCanvas(sender, args)
{
  inkPresenter.Strokes.Clear();
}

Applies To

InkPresenter