Strokes

Microsoft Silverlight will reach end of support after October 2021. Learn more.

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

<InkPresenter ...>
  <InkPresenter.Strokes>
    oneOrMoreStrokes
  </InkPresenter.Strokes>
<InkPresenter/>

value = object.Strokes
object.Strokes = value

XAML Values

Value	Description
oneOrMoreStrokes	One or more Stroke object elements.

Property Value

Type: StrokeCollection

The collection of ink strokes that corresponds to the InkPresenter object.

This property is read/write.

Managed Equivalent

Strokes

Remarks

In practical terms, you would generally never replace the entire Strokes collection (by setting this property). It is also uncommon to prepopulate the Strokes collection in the initially loaded XAML. However, when the collection of strokes is populated by user input, you might add, remove, or query items from the existing collection. Typically, this is done by handling user input events on a stylus device or mouse, creating new Stroke objects based on starting and ending positions during user actions, and adding these strokes to the collection.

In order to render, each Stroke in Strokes must also have values established for the DrawingAttributes (Stroke) property, which must be set through property element syntax if set in XAML.

Example

The following example illustrates how to generate Stroke and DrawingAttributes object elements in XAML, and then use CreateFromXaml to add strokes to the InkPresenter surface based on user input at run time.

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 that 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 attribute 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

See Also

Reference

Stroke

DrawingAttributes