Creating an Ink Input Control

  • Article

You can create a custom control that dynamically and statically renders ink. That is, render ink as a user draws a stroke, causing the ink to appear to "flow" from the tablet pen, and display ink after it is added to the control, either via the tablet pen, pasted from the Clipboard, or loaded from a file. To dynamically render ink, your control must use a DynamicRenderer. To statically render ink, you must override the stylus event methods (OnStylusDown, OnStylusMove, and OnStylusUp) to collect StylusPoint data, create strokes, and add them to an InkPresenter (which renders the ink on the control).

This topic contains the following subsections:

  • How to: Collect Stylus Point Data and Create Ink Strokes

  • How to: Enable Your Control to Accept Input from the Mouse

  • Putting it Together

  • Using Additional Plugins and DynamicRenderers

  • Conclusion

How to: Collect Stylus Point Data and Create Ink Strokes

To create a control that collects and manages ink strokes do the following:

  1. Derive a class from Control or one of the classes derived from Control, such as Label.

    Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.Windows.Ink
Imports System.Windows.Input
Imports System.Windows.Input.StylusPlugIns
Imports System.Windows.Controls
Imports System.Windows


...


Class InkControl
    Inherits Label


...


End Class 'StylusControl

    using System;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Input.StylusPlugIns;
using System.Windows.Controls;
using System.Windows;


...


class InkControl : Label
{


...


}

  2. Add an InkPresenter to the class and set the Content property to the new InkPresenter.

    Private ip As InkPresenter

Public Sub New()
    ' Add an InkPresenter for drawing.
    ip = New InkPresenter()
    Me.Content = ip

End Sub

    InkPresenter ip;

public InkControl()
{
    // Add an InkPresenter for drawing.
    ip = new InkPresenter();
    this.Content = ip;
}

  3. Attach the RootVisual of the DynamicRenderer to the InkPresenter by calling the AttachVisuals method, and add the DynamicRenderer to the StylusPlugIns collection. This allows the InkPresenter to display the ink as the stylus point data is collected by your control.

    Public Sub New()


...


    ' Add a dynamic renderer that 
    ' draws ink as it "flows" from the stylus.
    dr = New DynamicRenderer()
    ip.AttachVisuals(dr.RootVisual, dr.DrawingAttributes)
    Me.StylusPlugIns.Add(dr)

End Sub

    public InkControl()
{


...


    // Add a dynamic renderer that 
    // draws ink as it "flows" from the stylus.
    dr = new DynamicRenderer();
    ip.AttachVisuals(dr.RootVisual, dr.DrawingAttributes);
    this.StylusPlugIns.Add(dr);

}

  4. Override the OnStylusDown method. In this method, capture the stylus with a call to Capture. By capturing the stylus, your control will to continue to receive StylusMove and StylusUp events even if the stylus leaves the control's boundaries. This is not strictly mandatory, but almost always desired for a good user experience. Create a new StylusPointCollection to gather StylusPoint data. Finally, add the initial set of StylusPoint data to the StylusPointCollection.

    Protected Overrides Sub OnStylusDown(ByVal e As StylusDownEventArgs)
    ' Capture the stylus so all stylus input is routed to this control.
    Stylus.Capture(Me)

    ' Allocate memory for the StylusPointsCollection and 
    ' add the StylusPoints that have come in so far.
    stylusPoints = New StylusPointCollection()
    Dim eventPoints As StylusPointCollection = e.GetStylusPoints(Me, stylusPoints.Description)

    stylusPoints.Add(eventPoints)

End Sub 'OnStylusDown

    protected override void OnStylusDown(StylusDownEventArgs e)
{
    // Capture the stylus so all stylus input is routed to this control.
    Stylus.Capture(this);

    // Allocate memory for the StylusPointsCollection and 
    // add the StylusPoints that have come in so far.
    stylusPoints = new StylusPointCollection();
    StylusPointCollection eventPoints = 
        e.GetStylusPoints(this, stylusPoints.Description);

    stylusPoints.Add(eventPoints);

}

  5. Override the OnStylusMove method and add the StylusPoint data to the StylusPointCollection object that you created earlier.

    Protected Overrides Sub OnStylusMove(ByVal e As StylusEventArgs)

    If stylusPoints Is Nothing Then 
        Return 
    End If 

    ' Add the StylusPoints that have come in since the  
    ' last call to OnStylusMove. 
    Dim newStylusPoints As StylusPointCollection = e.GetStylusPoints(Me, stylusPoints.Description)
    stylusPoints.Add(newStylusPoints)

End Sub 'OnStylusMove

    protected override void OnStylusMove(StylusEventArgs e)
{
    if (stylusPoints == null)
    {
        return;
    }

    // Add the StylusPoints that have come in since the  
    // last call to OnStylusMove.
    StylusPointCollection newStylusPoints = 
        e.GetStylusPoints(this, stylusPoints.Description);
    stylusPoints.Add(newStylusPoints);
}

  6. Override the OnStylusUp method and create a new Stroke with the StylusPointCollection data. Add the new Stroke you created to the Strokes collection of the InkPresenter and release stylus capture.

    Protected Overrides Sub OnStylusUp(ByVal e As StylusEventArgs)
    ' Allocate memory for the StylusPointsCollection, if necessary. 
    If stylusPoints Is Nothing Then 
        Return 
    End If 

    ' Add the StylusPoints that have come in since the  
    ' last call to OnStylusMove. 
    Dim newStylusPoints As StylusPointCollection = e.GetStylusPoints(Me, stylusPoints.Description)
    stylusPoints.Add(newStylusPoints)

    ' Create a new stroke from all the StylusPoints since OnStylusDown. 
    Dim stroke As New Stroke(stylusPoints)

    ' Add the new stroke to the Strokes collection of the InkPresenter.
    ip.Strokes.Add(stroke)

    ' Clear the StylusPointsCollection.
    stylusPoints = Nothing 

    ' Release stylus capture.
    Stylus.Capture(Nothing)

End Sub 'OnStylusUp

    protected override void OnStylusUp(StylusEventArgs e)
{
    if (stylusPoints == null)
    {
        return;
    }

    // Add the StylusPoints that have come in since the  
    // last call to OnStylusMove.
    StylusPointCollection newStylusPoints = 
        e.GetStylusPoints(this, stylusPoints.Description);
    stylusPoints.Add(newStylusPoints);

    // Create a new stroke from all the StylusPoints since OnStylusDown.
    Stroke stroke = new Stroke(stylusPoints);

    // Add the new stroke to the Strokes collection of the InkPresenter.
    ip.Strokes.Add(stroke);

    // Clear the StylusPointsCollection.
    stylusPoints = null;

    // Release stylus capture.
    Stylus.Capture(null);
}

How to: Enable Your Control to Accept Input from the Mouse

If you add the preceding control to your application, run it, and use the mouse as an input device, you will notice that the strokes are not persisted. To persist the strokes when the mouse is used as the input device do the following:

  1. Override the OnMouseLeftButtonDown and create a new StylusPointCollection Get the position of the mouse when the event occurred and create a StylusPoint using the point data and add the StylusPoint to the StylusPointCollection.

    Protected Overrides Sub OnMouseLeftButtonDown(ByVal e As MouseButtonEventArgs)

    MyBase.OnMouseLeftButtonDown(e)

    ' If a stylus generated this event, return. 
    If Not (e.StylusDevice Is Nothing) Then 
        Return 
    End If 

    ' Start collecting the points.
    stylusPoints = New StylusPointCollection()
    Dim pt As Point = e.GetPosition(Me)
    stylusPoints.Add(New StylusPoint(pt.X, pt.Y))

End Sub 'OnMouseLeftButtonDown

    protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
{

    base.OnMouseLeftButtonDown(e);

    // If a stylus generated this event, return. 
    if (e.StylusDevice != null)
    {
        return;
    }

    // Start collecting the points.
    stylusPoints = new StylusPointCollection();
    Point pt = e.GetPosition(this);
    stylusPoints.Add(new StylusPoint(pt.X, pt.Y));

}

  2. Override the OnMouseMove method. Get the position of the mouse when the event occurred and create a StylusPoint using the point data. Add the StylusPoint to the StylusPointCollection object that you created earlier.

    Protected Overrides Sub OnMouseMove(ByVal e As MouseEventArgs)

    MyBase.OnMouseMove(e)

    ' If a stylus generated this event, return. 
    If Not (e.StylusDevice Is Nothing) Then 
        Return 
    End If 

    ' Don't collect points unless the left mouse button 
    ' is down. 
    If e.LeftButton = MouseButtonState.Released Then 
        Return 
    End If 

    If stylusPoints Is Nothing Then 
        Return 
    End If 

    Dim pt As Point = e.GetPosition(Me)
    stylusPoints.Add(New StylusPoint(pt.X, pt.Y))

End Sub 'OnMouseMove

    protected override void OnMouseMove(MouseEventArgs e)
{

    base.OnMouseMove(e);

    // If a stylus generated this event, return. 
    if (e.StylusDevice != null)
    {
        return;
    }

    // Don't collect points unless the left mouse button 
    // is down. 
    if (e.LeftButton == MouseButtonState.Released || 
        stylusPoints == null)
    {
        return;
    }

    Point pt = e.GetPosition(this);
    stylusPoints.Add(new StylusPoint(pt.X, pt.Y));
}

  3. Override the OnMouseLeftButtonUp method. Create a new Stroke with the StylusPointCollection data, and add the new Stroke you created to the Strokes collection of the InkPresenter.

    Protected Overrides Sub OnMouseLeftButtonUp(ByVal e As MouseButtonEventArgs)

    MyBase.OnMouseLeftButtonUp(e)

    ' If a stylus generated this event, return. 
    If Not (e.StylusDevice Is Nothing) Then 
        Return 
    End If 

    If stylusPoints Is Nothing Then
        stylusPoints = New StylusPointCollection()
    End If 

    Dim pt As Point = e.GetPosition(Me)
    stylusPoints.Add(New StylusPoint(pt.X, pt.Y))

    ' Create a stroke and add it to the InkPresenter. 
    Dim stroke As New Stroke(stylusPoints)
    stroke.DrawingAttributes = dr.DrawingAttributes
    ip.Strokes.Add(stroke)

    stylusPoints = Nothing 

End Sub 'OnMouseLeftButtonUp 

    protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
{

    base.OnMouseLeftButtonUp(e);

    // If a stylus generated this event, return. 
    if (e.StylusDevice != null)
    {
        return;
    }

    if (stylusPoints == null)
    {
        return;
    }

    Point pt = e.GetPosition(this);
    stylusPoints.Add(new StylusPoint(pt.X, pt.Y));

    // Create a stroke and add it to the InkPresenter.
    Stroke stroke = new Stroke(stylusPoints);
    stroke.DrawingAttributes = dr.DrawingAttributes;
    ip.Strokes.Add(stroke);

    stylusPoints = null;

}

Putting it together

The following example is a custom control that collects ink when the user uses either the mouse or the pen.

Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.Windows.Ink
Imports System.Windows.Input
Imports System.Windows.Input.StylusPlugIns
Imports System.Windows.Controls
Imports System.Windows


...


' A control for managing ink input
Class InkControl
    Inherits Label
    Private ip As InkPresenter
    Private dr As DynamicRenderer

    ' The StylusPointsCollection that gathers points 
    ' before Stroke from is created.
    Private stylusPoints As StylusPointCollection = Nothing


    Public Sub New()
        ' Add an InkPresenter for drawing.
        ip = New InkPresenter()
        Me.Content = ip

        ' Add a dynamic renderer that 
        ' draws ink as it "flows" from the stylus.
        dr = New DynamicRenderer()
        ip.AttachVisuals(dr.RootVisual, dr.DrawingAttributes)
        Me.StylusPlugIns.Add(dr)

        Dim cdr As New CustomDynamicRenderer()
        ip.AttachVisuals(cdr.RootVisual, cdr.DrawingAttributes)
        Me.StylusPlugIns.Add(cdr)

    End Sub 'New

    Shared Sub New()

        ' Allow ink to be drawn only within the bounds of the control.
        Dim owner As Type = GetType(InkControl)
        ClipToBoundsProperty.OverrideMetadata(owner, New FrameworkPropertyMetadata(True))

    End Sub 'New

    Protected Overrides Sub OnStylusDown(ByVal e As StylusDownEventArgs)
        ' Capture the stylus so all stylus input is routed to this control.
        Stylus.Capture(Me)

        ' Allocate memory for the StylusPointsCollection and
        ' add the StylusPoints that have come in so far.
        stylusPoints = New StylusPointCollection()
        Dim eventPoints As StylusPointCollection = e.GetStylusPoints(Me, stylusPoints.Description)

        stylusPoints.Add(eventPoints)

    End Sub 'OnStylusDown

    Protected Overrides Sub OnStylusMove(ByVal e As StylusEventArgs)

        If stylusPoints Is Nothing Then
            Return
        End If

        ' Add the StylusPoints that have come in since the 
        ' last call to OnStylusMove.
        Dim newStylusPoints As StylusPointCollection = e.GetStylusPoints(Me, stylusPoints.Description)
        stylusPoints.Add(newStylusPoints)

    End Sub 'OnStylusMove

    Protected Overrides Sub OnStylusUp(ByVal e As StylusEventArgs)
        ' Allocate memory for the StylusPointsCollection, if necessary.
        If stylusPoints Is Nothing Then
            Return
        End If

        ' Add the StylusPoints that have come in since the 
        ' last call to OnStylusMove.
        Dim newStylusPoints As StylusPointCollection = e.GetStylusPoints(Me, stylusPoints.Description)
        stylusPoints.Add(newStylusPoints)

        ' Create a new stroke from all the StylusPoints since OnStylusDown.
        Dim stroke As New Stroke(stylusPoints)

        ' Add the new stroke to the Strokes collection of the InkPresenter.
        ip.Strokes.Add(stroke)

        ' Clear the StylusPointsCollection.
        stylusPoints = Nothing

        ' Release stylus capture.
        Stylus.Capture(Nothing)

    End Sub 'OnStylusUp

    Protected Overrides Sub OnMouseLeftButtonDown(ByVal e As MouseButtonEventArgs)

        MyBase.OnMouseLeftButtonDown(e)

        ' If a stylus generated this event, return.
        If Not (e.StylusDevice Is Nothing) Then
            Return
        End If

        ' Start collecting the points.
        stylusPoints = New StylusPointCollection()
        Dim pt As Point = e.GetPosition(Me)
        stylusPoints.Add(New StylusPoint(pt.X, pt.Y))

    End Sub 'OnMouseLeftButtonDown

    Protected Overrides Sub OnMouseMove(ByVal e As MouseEventArgs)

        MyBase.OnMouseMove(e)

        ' If a stylus generated this event, return.
        If Not (e.StylusDevice Is Nothing) Then
            Return
        End If

        ' Don't collect points unless the left mouse button
        ' is down.
        If e.LeftButton = MouseButtonState.Released Then
            Return
        End If

        If stylusPoints Is Nothing Then
            Return
        End If

        Dim pt As Point = e.GetPosition(Me)
        stylusPoints.Add(New StylusPoint(pt.X, pt.Y))

    End Sub 'OnMouseMove

    Protected Overrides Sub OnMouseLeftButtonUp(ByVal e As MouseButtonEventArgs)

        MyBase.OnMouseLeftButtonUp(e)

        ' If a stylus generated this event, return.
        If Not (e.StylusDevice Is Nothing) Then
            Return
        End If

        If stylusPoints Is Nothing Then
            stylusPoints = New StylusPointCollection()
        End If

        Dim pt As Point = e.GetPosition(Me)
        stylusPoints.Add(New StylusPoint(pt.X, pt.Y))

        ' Create a stroke and add it to the InkPresenter.
        Dim stroke As New Stroke(stylusPoints)
        stroke.DrawingAttributes = dr.DrawingAttributes
        ip.Strokes.Add(stroke)

        stylusPoints = Nothing

    End Sub 'OnMouseLeftButtonUp 
End Class 'StylusControl

using System;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Input.StylusPlugIns;
using System.Windows.Controls;
using System.Windows;


...


// A control for managing ink input
class InkControl : Label
{
    InkPresenter ip;
    DynamicRenderer dr;

    // The StylusPointsCollection that gathers points 
    // before Stroke from is created.
    StylusPointCollection stylusPoints = null;

    public InkControl()
    {
        // Add an InkPresenter for drawing.
        ip = new InkPresenter();
        this.Content = ip;

        // Add a dynamic renderer that 
        // draws ink as it "flows" from the stylus.
        dr = new DynamicRenderer();
        ip.AttachVisuals(dr.RootVisual, dr.DrawingAttributes);
        this.StylusPlugIns.Add(dr);

    }

    static InkControl()
    {
        // Allow ink to be drawn only within the bounds of the control.
        Type owner = typeof(InkControl);
        ClipToBoundsProperty.OverrideMetadata(owner,
            new FrameworkPropertyMetadata(true));
    }

    protected override void OnStylusDown(StylusDownEventArgs e)
    {
        // Capture the stylus so all stylus input is routed to this control.
        Stylus.Capture(this);

        // Allocate memory for the StylusPointsCollection and
        // add the StylusPoints that have come in so far.
        stylusPoints = new StylusPointCollection();
        StylusPointCollection eventPoints = 
            e.GetStylusPoints(this, stylusPoints.Description);

        stylusPoints.Add(eventPoints);

    }

    protected override void OnStylusMove(StylusEventArgs e)
    {
        if (stylusPoints == null)
        {
            return;
        }

        // Add the StylusPoints that have come in since the 
        // last call to OnStylusMove.
        StylusPointCollection newStylusPoints = 
            e.GetStylusPoints(this, stylusPoints.Description);
        stylusPoints.Add(newStylusPoints);
    }

    protected override void OnStylusUp(StylusEventArgs e)
    {
        if (stylusPoints == null)
        {
            return;
        }

        // Add the StylusPoints that have come in since the 
        // last call to OnStylusMove.
        StylusPointCollection newStylusPoints = 
            e.GetStylusPoints(this, stylusPoints.Description);
        stylusPoints.Add(newStylusPoints);

        // Create a new stroke from all the StylusPoints since OnStylusDown.
        Stroke stroke = new Stroke(stylusPoints);

        // Add the new stroke to the Strokes collection of the InkPresenter.
        ip.Strokes.Add(stroke);

        // Clear the StylusPointsCollection.
        stylusPoints = null;

        // Release stylus capture.
        Stylus.Capture(null);
    }

    protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
    {

        base.OnMouseLeftButtonDown(e);

        // If a stylus generated this event, return.
        if (e.StylusDevice != null)
        {
            return;
        }

        // Start collecting the points.
        stylusPoints = new StylusPointCollection();
        Point pt = e.GetPosition(this);
        stylusPoints.Add(new StylusPoint(pt.X, pt.Y));

    }

    protected override void OnMouseMove(MouseEventArgs e)
    {

        base.OnMouseMove(e);

        // If a stylus generated this event, return.
        if (e.StylusDevice != null)
        {
            return;
        }

        // Don't collect points unless the left mouse button
        // is down.
        if (e.LeftButton == MouseButtonState.Released || 
            stylusPoints == null)
        {
            return;
        }

        Point pt = e.GetPosition(this);
        stylusPoints.Add(new StylusPoint(pt.X, pt.Y));
    }

    protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
    {

        base.OnMouseLeftButtonUp(e);

        // If a stylus generated this event, return.
        if (e.StylusDevice != null)
        {
            return;
        }

        if (stylusPoints == null)
        {
            return;
        }

        Point pt = e.GetPosition(this);
        stylusPoints.Add(new StylusPoint(pt.X, pt.Y));

        // Create a stroke and add it to the InkPresenter.
        Stroke stroke = new Stroke(stylusPoints);
        stroke.DrawingAttributes = dr.DrawingAttributes;
        ip.Strokes.Add(stroke);

        stylusPoints = null;

    }
}

Using Additional Plug-ins and DynamicRenderers

Like the InkCanvas, your custom control can have custom StylusPlugIn and additional DynamicRenderer objects. Add these to the StylusPlugIns collection. The order of the StylusPlugIn objects in the StylusPlugInCollection affects the appearance of the ink when it is rendered. Suppose you have a DynamicRenderer called dynamicRenderer and a custom StylusPlugIn called translatePlugin that offsets the ink from the tablet pen. If translatePlugin is the first StylusPlugIn in the StylusPlugInCollection, and dynamicRenderer is the second, the ink that "flows" will be offset as the user moves the pen. If dynamicRenderer is first, and translatePlugin is second, the ink will not be offset until the user lifts the pen.

Conclusion

You can create a control that collects and renders ink by overriding the stylus event methods. By creating your own control, deriving your own StylusPlugIn classes, and inserting them the into StylusPlugInCollection, you can implement virtually any behavior imaginable with digital ink. You have access to the StylusPoint data as it is generated, giving you the opportunity to customize Stylus input and render it on the screen as appropriate for your application. Because you have such low-level access to the StylusPoint data, you can implement ink collection and render it with optimal performance for your application.

See Also

Other Resources

Advanced Ink Handling

Accessing and Manipulating Pen Input