StrokeCollection

XAML Values

Methods

Add, Clear, Equals, FindName (DependencyObject), GetBounds (StrokeCollection), GetHost, GetItem, GetValue, HitTest (StrokeCollection), Insert, Remove, RemoveAt, SetValue

Properties

Count, Name (DependencyObject)

Managed Equivalent

StrokeCollection

Remarks

The Strokes property uses the StrokeCollection object to store Stroke information.

Collection methods such as Add or GetItem will expect or return objects that are of type Stroke. In addition to defining Collection methods, this collection also defines the methods GetBounds and HitTest.

The XAML syntax for properties that use a StrokeCollection is potentially an example of implicit collection syntax, in which you can omit an actual StrokeCollection object element. However, prepopulating an InkPresenter object with strokes is not a common technique; usually you start with a blank Strokes collection and capture strokes as user input with runtime JavaScript. For more information about XAML implicit collection syntax, see XAML Syntax (Silverlight 1.0).

Example

The following example code shows how to create a Stroke that draws from points captured from an InkPresenter. Each stroke thus created is then added to the StrokeCollection of the InkPresenter.

// Define variables.
var agCtrl;
var inkPresenter; // Corresponds to the InkPresenter element in XAML.
var newStroke = null; // The Stroke variable to use in mouse handlers.

function root_Loaded(sender, args)
{
  // Get the HTML object that contains the Silverlight plug-in.
  agCtrl = sender.GetHost();

  // Hold on to the InkPresenter plug-in interface.
  inkPresenter = sender.findname("inkPresenterElement");
}

// Capture mouse movement and create the stroke.
function InkPresenterMouseDown(sender,args)
{
  inkPresenter.CaptureMouse();

  // Inverted stylus should enter Erase mode
  if (args.GetStylusInfo().IsInverted)
  {
    var sc = agCtrl.content.createFromXaml("<StrokeCollection/>");
    sc = inkPresenter.Strokes.HitTest(args.GetStylusPoints(inkPresenter));
    
    for (var i = 0; i < sc.Count; i++)
    {
      inkPresenter.Strokes.Remove(sc.GetItem(i));
    }
  }
  else // Ink mode
  {
    newStroke = agCtrl.content.createFromXaml('<Stroke/>');

    var da = agCtrl.content.createFromXaml('<DrawingAttributes/>');
    newStroke.DrawingAttributes = da;
    var spc = agCtrl.content.createFromXaml('<StylusPointCollection/>');
    newStroke.StylusPoints = spc;

    newStroke.DrawingAttributes.Width = 5;
    newStroke.DrawingAttributes.Height = 5;
    newStroke.DrawingAttributes.Color = "Green";
    newStroke.DrawingAttributes.OutlineColor = "Black";

    newStroke.StylusPoints.AddStylusPoints(args.GetStylusPoints(inkPresenter));
    inkPresenter.Strokes.Add(newStroke);
  }
}

// Add the new points to the Stroke 
// or delete strokes if you are in erase mode.
function inkPresenterMouseMove(sender, args)
{
    var stylusPoints = args.getStylusPoints(sender);
    
    // Erase Mode
    if (lastErasePoint != null)
    {
        // Connect the point from the previous mouse event
        // to the current collection of stylus points.
        stylusPoints.insert(0, lastErasePoint);
        var hitStrokes = sender.strokes.hitTest(stylusPoints);

        // Remove the strokes that were intersected above.
        for (var i = 0; i < hitStrokes.Count; i++)
        {
          sender.strokes.remove(hitStrokes.getItem(i));
        }
        
        // Update the cached last erase point.
        lastErasePoint = stylusPoints.getItem(stylusPoints.count-1);
    }

    // Ink Mode
    if (newStroke != null)
    {
        newStroke.stylusPoints.addStylusPoints(stylusPoints);
    }
}


// Release the mouse.
function InkPresenterMouseUp(sender,args)
{
  newStroke = null;
  inkPresenter.ReleaseMouseCapture();
}

function ClearInkMouseDown(sender,args)
{
  inkPresenter.Strokes.Clear();
}

See Also

Reference