--- title: "Creating an Ink Input Control" ms.date: "03/30/2017" helpviewer_keywords: - "ink strokes [WPF], managing" - "managing ink strokes [WPF]" - "ink input control [WPF]" - "input from mouse [WPF], accepting" - "mouse input [WPF], accepting" - "ink [WPF], rendering" - "ink strokes [WPF], collecting" - "rendering ink [WPF]" - "collecting ink strokes [WPF]" - "DynamicRenderer objects [WPF]" - "StylusPlugIn objects [WPF]" ms.assetid: c31f3a67-cb3f-4ded-af9e-ed21f6575b26 --- # Creating an Ink Input Control 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 . To statically render ink, you must override the stylus event methods (, , and ) to collect data, create strokes, and add them to an (which renders the ink on the control). This topic contains the following subsections: - [How to: Collect Stylus Point Data and Create Ink Strokes](#CollectingStylusPointDataAndCreatingInkStrokes) - [How to: Enable Your Control to Accept Input from the Mouse](#EnablingYourControlToAcceptInputTromTheMouse) - [Putting it together](#PuttingItTogether) - [Using Additional Plug-ins and DynamicRenderers](#UsingAdditionalPluginsAndDynamicRenderers) - [Conclusion](#AdvancedInkHandling_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 or one of the classes derived from , such as . [!code-csharp[AdvancedInkTopicsSamples#20](~/samples/snippets/csharp/VS_Snippets_Wpf/AdvancedInkTopicsSamples/CSharp/StylusControl.cs#20)] [!code-csharp[AdvancedInkTopicsSamples#14](~/samples/snippets/csharp/VS_Snippets_Wpf/AdvancedInkTopicsSamples/CSharp/StylusControlSnippets.cs#14)] [!code-csharp[AdvancedInkTopicsSamples#15](~/samples/snippets/csharp/VS_Snippets_Wpf/AdvancedInkTopicsSamples/CSharp/StylusControlSnippets.cs#15)] 2. Add an to the class and set the property to the new . [!code-csharp[AdvancedInkTopicsSamples#16](~/samples/snippets/csharp/VS_Snippets_Wpf/AdvancedInkTopicsSamples/CSharp/StylusControlSnippets.cs#16)] 3. Attach the of the to the by calling the method, and add the to the collection. This allows the to display the ink as the stylus point data is collected by your control. [!code-csharp[AdvancedInkTopicsSamples#17](~/samples/snippets/csharp/VS_Snippets_Wpf/AdvancedInkTopicsSamples/CSharp/StylusControlSnippets.cs#17)] [!code-csharp[AdvancedInkTopicsSamples#18](~/samples/snippets/csharp/VS_Snippets_Wpf/AdvancedInkTopicsSamples/CSharp/StylusControlSnippets.cs#18)] 4. Override the method. In this method, capture the stylus with a call to . By capturing the stylus, your control will to continue to receive and 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 to gather data. Finally, add the initial set of data to the . [!code-csharp[AdvancedInkTopicsSamples#7](~/samples/snippets/csharp/VS_Snippets_Wpf/AdvancedInkTopicsSamples/CSharp/StylusControl.cs#7)] 5. Override the method and add the data to the object that you created earlier. [!code-csharp[AdvancedInkTopicsSamples#8](~/samples/snippets/csharp/VS_Snippets_Wpf/AdvancedInkTopicsSamples/CSharp/StylusControl.cs#8)] 6. Override the method and create a new with the data. Add the new you created to the collection of the and release stylus capture. [!code-csharp[AdvancedInkTopicsSamples#10](~/samples/snippets/csharp/VS_Snippets_Wpf/AdvancedInkTopicsSamples/CSharp/StylusControl.cs#10)] ## 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 and create a new Get the position of the mouse when the event occurred and create a using the point data and add the to the . [!code-csharp[AdvancedInkTopicsSamples#11](~/samples/snippets/csharp/VS_Snippets_Wpf/AdvancedInkTopicsSamples/CSharp/StylusControl.cs#11)] 2. Override the method. Get the position of the mouse when the event occurred and create a using the point data. Add the to the object that you created earlier. [!code-csharp[AdvancedInkTopicsSamples#12](~/samples/snippets/csharp/VS_Snippets_Wpf/AdvancedInkTopicsSamples/CSharp/StylusControl.cs#12)] 3. Override the method. Create a new with the data, and add the new you created to the collection of the . [!code-csharp[AdvancedInkTopicsSamples#13](~/samples/snippets/csharp/VS_Snippets_Wpf/AdvancedInkTopicsSamples/CSharp/StylusControl.cs#13)] ## Putting it together The following example is a custom control that collects ink when the user uses either the mouse or the pen. [!code-csharp[AdvancedInkTopicsSamples#20](~/samples/snippets/csharp/VS_Snippets_Wpf/AdvancedInkTopicsSamples/CSharp/StylusControl.cs#20)] [!code-csharp[AdvancedInkTopicsSamples#6](~/samples/snippets/csharp/VS_Snippets_Wpf/AdvancedInkTopicsSamples/CSharp/StylusControl.cs#6)] ## Using Additional Plug-ins and DynamicRenderers Like the InkCanvas, your custom control can have custom and additional objects. Add these to the collection. The order of the objects in the affects the appearance of the ink when it is rendered. Suppose you have a called `dynamicRenderer` and a custom called `translatePlugin` that offsets the ink from the tablet pen. If `translatePlugin` is the first in the , 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 classes, and inserting them the into , you can implement virtually any behavior imaginable with digital ink. You have access to the data as it is generated, giving you the opportunity to customize input and render it on the screen as appropriate for your application. Because you have such low-level access to the data, you can implement ink collection and render it with optimal performance for your application. ## See also - [Advanced Ink Handling](advanced-ink-handling.md) - [Accessing and Manipulating Pen Input](https://docs.microsoft.com/previous-versions/ms818317(v=msdn.10))