Providing a Drawing Surface with the InkPresenter Element

InkPresenter provides a primitive drawing surface to collect strokes or Bézier curves within a Canvas control. The InkPresenter is derived from the Canvas class and includes the addition of a single property called Strokes, which is a collection of Stroke objects. A Stroke represents a line segment and is composed of a collection of StylusPoints.

The behavior of the InkPresenter can be likened to that of a pen and paper. When the pen makes contact with the paper, you begin a Stroke. As the pen moves on the paper, the Stroke is constructed using StylusPoints. When the pen leaves the paper, the Stroke is complete.

The appearance of a Stroke can be defined by using its DrawingAttributes property. This includes its color, height, outline, and width (see Figure 7.2).

FIGURE 7.2 A Stroke consists of many StylusPoint objects.

The InkPresenter does not provide any specialized support for capturing touch input. Instead, Strokes are created either in code by subscribing to the various touch related events, which you see later in the section, or by defining a StrokeCollection directly in XAML, as shown:

Click here to view code image

<InkPresenter VerticalAlignment="Stretch">
    <InkPresenter.Strokes>
        <StrokeCollection>
            <Stroke>
                <Stroke.DrawingAttributes>
                    <DrawingAttributes Color="White"
                        OutlineColor="Yellow"
                        Width="20" Height="10" />
                </Stroke.DrawingAttributes>
                <Stroke.StylusPoints>
                    <StylusPoint X="118" Y="141" />

                    ...
                    <StylusPoint X="202" Y="383" />
                </Stroke.StylusPoints>
            </Stroke>
        </StrokeCollection>
    </InkPresenter.Strokes>
</InkPresenter>

In this excerpt, the single Stroke present in the StrokeCollection is styled using the DrawingAttribute element. The OutlineColor property is used to create a border around the Stroke (see Figure 7.3).

FIGURE 7.3 InkPresenter with a StrokeCollection defined in XAML.