Export (0) Print
Expand All
Key
M11
M12
M21
M22
Tag
Uri
X1
X2
Y1
Y2
Expand Minimize

Strokes

Silverlight

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

Value

Description

oneOrMoreStrokes

One or more Stroke object elements.

Type: StrokeCollection

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

This property is read/write.

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.

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();
}

Community Additions

ADD
Show:
© 2014 Microsoft