InkPresenter Object
Implements a rectangular surface that displays ink strokes and can be a child, sibling or parent of other objects.
| XAML | |
| Scripting |
To create an object using scripting, see CreateFromXAML.
|
XAML Values
| oneOrMoreUIElements | One or more object elements that derive from UIElement. These can be one or more of the following: Canvas, Ellipse, Glyphs, Image, InkPresenter, Line, MediaElement, Path, Polygon, Polyline, Rectangle, Shape, TextBlock. Object elements defined here become members of the collection held by the Children property, when accessed by scripting at runtime. |
Properties
Background, Canvas.Left, Canvas.Top, Canvas.ZIndex, Children, Clip, Cursor, Height, IsHitTestVisible, Name, Opacity, OpacityMask, RenderTransform, RenderTransformOrigin, Resources, Strokes, Tag, Triggers, VisibilityWidth
Methods
AddEventListener, CaptureMouse, Equals, FindName, GetHost, GetParent, GetValue, ReleaseMouseCapture, RemoveEventListener, SetValue
Events
Loaded, MouseEnter, MouseLeave, MouseLeftButtonDown, MouseLeftButtonUp, MouseMove
Remarks
InkPresenter is a derived class of Canvas. In particular it inherits two properties that relate to presentation, Background and Children. The Background for an InkPresenter is applied behind any strokes that are presented on the surface.
The Children property is the content property for InkPresenter, which is why it is referenced as the oneOrMoreUIElements placeholder in the XAML syntax above. Because the primary purpose of InkPresenter is to display strokes, it might not be quite as common to specify Children UI elements for InkPresenter as it is to set Children for a Canvas.
The Children for an InkPresenter render on the InkPresenter surface just as they do on a Canvas. However, the collection of strokes is stored in a separate property, Strokes. By default a Canvas will draw Children elements in the order that they are declared for purposes of overlaps in rendering; the last element declared will draw on top. You can also adjust this order with Canvas.ZIndex attached property values set on the child elements. All the Children items draw over the Background. All of the Strokes draw over both Children and Background, and you cannot adjust Strokes with Canvas.ZIndex. Therefore, if you want any content to always remain on top of strokes, you should declare that content in a separate Canvas that overlays the InkPresenter, rather than in the InkPresenter Children property in script or as direct element content in XAML.
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();
}
|
See Also
Ink Support in Microsoft Silverlight
Stroke
StrokeCollection