Use the UWP Inking platform as input for advanced scenarios

Published May 01 2020 05:00 AM 1,744 Views
Microsoft

Since almost 5 years, Windows 10 is bringing innovations and powerful usages of devices' capabilities; The Windows Inking platform ✏ is a one great example of natural user interface: With the use of the pen, your computer or tablet becomes a intelligent digital paper! You can free your imagination and draw/paint thanks to apps like Fresh Paint. Also with AI services your written words are understood and the corresponding text is produced; your drawings are recognized and converted into geometric shapes!

In the Enterprise space, writing and drawing can be a vector for innovation and productivity for users. Let's first go deeper in some usages of the Windows Inking capabilities. We will then explore how Azure AI Services can unlock impressive scenarios.

 

The starting point and docs

The Microsoft docs website gives you all the APIs and controls details to bring you into the Digital Inking journey. Let me give you some pieces of advise for starting:

  1. Just open/compile/look at the source code of the SimpleInk Sample which is part of the Universal Windows official samples. The XAML is straightforward. The C# code is light and easily understandable. It will give you the ability to give a try to inking code in your project with only some copy/paste. The initial controls to use are
  2. Keep an eye on the Windows Ink UX guidelines - https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/inking-controls
  3. Bookmark the landing page for Inking interactions - https://docs.microsoft.com/en-us/windows/uwp/design/input/pen-and-stylus-interactions
  4. Refer to the following 2 namespaces

--

 

With all the documentation mentioned before, you would be easily able to

  • Use the InkCanvas for allowing pen/mouse/touch drawing
  • Add a InkToolbar to change the pencil type/size/color
  • Use the ruler to draw perfect lines
  • Select Inkstrokes, copy/cut/paste them
  • Save and load serialized Inkstrokes on disk

 

The idea: Go further of the InkStrokes

The purpose of this blog post is to go deeper on one scenario: Accept Inkstrokes and convert them to shapes! What? Inkstrokes are not good? Do not misunderstand: Strokes are perfect. They are the digital objects representing the strokes that the user created by using the pen/mouse/touch. The idea is to leverage on the drawings to create digital formalized shapes. This way we can produce high fidelity floor plan, measure lengths, areas; we can create vectorial shapes and figures for printing, creating user interfaces, etc.

 

The initial project

The simplest way to be able to accept inking is to use the InkCanvas control. Create a new empty UWP blank projet and just add the following XAML:

<InkCanvas x:Name="inkCanvas" />

In the C# code, we just say what type of input we accept for this InkCanvas. Make your choice depending of the requirements of your app (You can change it at anytime by code):

// Initialize the InkCanvas
inkCanvas.InkPresenter.InputDeviceTypes =
    Windows.UI.Core.CoreInputDeviceTypes.Mouse |
    Windows.UI.Core.CoreInputDeviceTypes.Pen | 
    Windows.UI.Core.CoreInputDeviceTypes.Touch;

We are done, you can draw on the whole surface of the app with pen/touch/mouse.

Sample drawing by hands on a UWP WindowSample drawing by hands on a UWP Window

 

The source code is available on GitHub - https://github.com/sbovo/UWP-Advanced-Inking/tree/master/StrokesToShapes

 

Getting the last InkStroke drawn ✏

In order to be able to do some actions after each draw, the Ink platform gives us the StrokesCollected event on the InkPresenter object associated with the InkCanvas.

Note: The InkPresenter provides properties, methods, and events for managing the input. That includes the processing and the rendering of the Ink input. It allows us to gain a fined control on the input.

Let's add a event handler for the StrokesCollected event:

inkCanvas.InkPresenter.StrokesCollected += InkPresenter_StrokesCollected;

Then, in this event handler, we just get the latest stroke from the InkPresenter:

private void InkPresenter_StrokesCollected(
    Windows.UI.Input.Inking.InkPresenter sender, 
    Windows.UI.Input.Inking.InkStrokesCollectedEventArgs args)
 {
     InkStroke stroke = inkCanvas.InkPresenter.StrokeContainer.GetStrokes().Last();
 }

 

Working with XAML Shapes

XAML Shapes were first introduced in WPF. If you discover XAML Shapes, the following page gives you a perfect startup: Draw shapes - https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/shapes.

XAML Shapes are basically vector-based regions in the XAML UI. They provide you the ability to draw not only simple forms like rectangles, circles, ellipses but also any path, Bezier curves or geometric shapes. All are vector's shapes displayed on a XAML Canvas.

Let's go back to our goal: We have the last InkStroke and we would like to "replace" it by a nice and friendly XAML Shapes that we could manipulate/move/modify easily by APIs.

First, we modify the XAML page in order to add a new Canvas. The one that will contains all XAML Shapes:

<Canvas x:Name="ShapesCanvas" />

The entire XAML page is like:

<Grid>
   <InkCanvas x:Name="inkCanvas" />

   <!-- Canvas for displaying the "recognized" XAML Shapes -->
   <Canvas x:Name="ShapesCanvas" />
</Grid>

It now like we have two layers, on for drawing on the surface and the other one for displaying/manipulating all the final XAML shapes.

We can now do two actions:

  1. Create the new XAML Line based on the properties of the last InkStroke and add this line to the ShapesCanvas
  2. Remove the last InkStroke from the inkCanvas in order to have a clean display made only by XAML Shapes

In order to be able to perform these two actions when the user has just finished to draw a line, we use the StrokesCollected event of the InkPresenter object attached to the InkCanvas. We add the following event handler declaration in the constructor of the page:

// When the user finished to draw something on the InkCanvas
inkCanvas.InkPresenter.StrokesCollected += InkPresenter_StrokesCollected;

 

Let's code the 2 actions:

private void InkPresenter_StrokesCollected(
     Windows.UI.Input.Inking.InkPresenter sender,
     Windows.UI.Input.Inking.InkStrokesCollectedEventArgs args)
 {
     InkStroke stroke = inkCanvas.InkPresenter.StrokeContainer.GetStrokes().Last();
     
     // Action 1 = We use a function that we will implement just after to create the XAML Line
     Line line = ConvertStrokeToXAMLLine(stroke); 
     // Action 2 = We add the Line in the second Canvas
     ShapesCanvas.Children.Add(line);
     
     // We delete the InkStroke from the InkCanvas
     stroke.Selected = true;
     inkCanvas.InkPresenter.StrokeContainer.DeleteSelected();
 }

 

THE "conversion" ⚙: InkStroke → XAML Line

It is just about creating a Line (Windows.UI.Xaml.Shapes.Line) object with the initial and final positions of the InkStroke :unamused_face::grinning_face::

private Line ConvertStrokeToXAMLLine(InkStroke stroke)
{
	var line = new Line();
	line.Stroke = new SolidColorBrush(Windows.UI.Colors.Green);
	line.StrokeThickness = 6;
	// The origin = (X1, Y1)
	line.X1 = stroke.GetInkPoints().First().Position.X;
	line.Y1 = stroke.GetInkPoints().First().Position.Y;
	// The end = (X2, Y2)
	line.X2 = stroke.GetInkPoints().Last().Position.X;
	line.Y2 = stroke.GetInkPoints().Last().Position.Y;

	return line;
}

Here we go. We did it. We can draw on the surface and the final line will only be the XAML Line we added to the second Canvas.

XAML Shapes (Line) on a UWP WindowXAML Shapes (Line) on a UWP Window

 

This scenario "converting an Ink stroke to a XAML shape" is the basis for being able to achieve great and complex manipulations. Stay tuned for upcoming blog posts about XAML Shapes manipulations and modifications.

 

As usual, all the source code is available on GitHub - https://github.com/microsoft/Windows-AppConsult-Samples-UWP/

 

Feedback is welcome ;)

Happy coding on the Windows Platform!

 

@sbovo for the AppConsult team.

 

 

Inking series' articles

This article is part of a series exploring concepts about inking and XAML Shapes. Here are all links:

  1. Use the UWP Inking platform as input for advanced scenarios ⇐ You are here  

  2. Handling zoom in Inking applications

  3. Turning to the dark side of inking = UnprocessedInput 

  4. Free your mind: Start manipulating XAML Shapes

 

References

%3CLINGO-SUB%20id%3D%22lingo-sub-1352471%22%20slang%3D%22en-US%22%3EUse%20the%20UWP%20Inking%20platform%20as%20input%20for%20advanced%20scenarios%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1352471%22%20slang%3D%22en-US%22%3E%3CDIV%20id%3D%22MainContent%22%3E%3C!--%20Markdown%20Monster%20Content%20--%3E%0A%3CP%3ESince%20almost%205%20years%2C%20Windows%2010%20is%20bringing%20innovations%20and%20powerful%20usages%20of%20devices'%20capabilities%3B%20The%20%3CSTRONG%3EWindows%20Inking%20platform%3C%2FSTRONG%3E%20%E2%9C%8F%20is%20a%20one%20great%20example%20of%20natural%20user%20interface%3A%20With%20the%20use%20of%20the%20pen%2C%20your%20computer%20or%20tablet%20becomes%20a%20intelligent%20digital%20paper!%20You%20can%20free%20your%20imagination%20and%20draw%2Fpaint%20thanks%20to%20apps%20like%20-ERR%3AREF-NOT-FOUND-Fresh%20Paint.%20Also%20with%20-ERR%3AREF-NOT-FOUND-AI%20services%20your%20written%20words%20are%20understood%20and%20the%20corresponding%20text%20is%20produced%3B%20your%20drawings%20are%20recognized%20and%20converted%20into%20geometric%20shapes!%3C%2FP%3E%0A%3CP%3EIn%20the%20Enterprise%20space%2C%20writing%20and%20drawing%20can%20be%20a%20vector%20for%20innovation%20and%20productivity%20for%20users.%20Let's%20first%20go%20deeper%20in%20some%20usages%20of%20the%20Windows%20Inking%20capabilities.%20We%20will%20then%20explore%20how%20Azure%20AI%20Services%20can%20unlock%20impressive%20scenarios.%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId--1354526830%22%20id%3D%22toc-hId--1354526830%22%3E%26nbsp%3B%3C%2FH2%3E%0A%3CH2%20id%3D%22the-starting-point-and-docs-%22%20id%3D%22toc-hId-1132986003%22%20id%3D%22toc-hId-1132986003%22%3E%3CA%20id%3D%22pragma-line-6%22%20target%3D%22_blank%22%3E%3C%2FA%3EThe%20starting%20point%20and%20docs%3C%2FH2%3E%0A%3CP%3EThe%20Microsoft%20docs%20website%20gives%20you%20all%20the%20APIs%20and%20controls%20details%20to%20bring%20you%20into%20the%20Digital%20Inking%20journey.%20Let%20me%20give%20you%20some%20pieces%20of%20advise%20for%20starting%3A%3C%2FP%3E%0A%3COL%20id%3D%22pragma-line-8%22%3E%0A%3CLI%20id%3D%22pragma-line-8%22%3EJust%20open%2Fcompile%2Flook%20at%20the%20source%20code%20of%20the%20-ERR%3AREF-NOT-FOUND-SimpleInk%20Sample%20which%20is%20part%20of%20the%20Universal%20Windows%20official%20samples.%20The%20XAML%20is%20straightforward.%20The%20C%23%20code%20is%20light%20and%20easily%20understandable.%20It%20will%20give%20you%20the%20ability%20to%20give%20a%20try%20to%20inking%20code%20in%20your%20project%20with%20only%20some%20copy%2Fpaste.%20The%20initial%20controls%20to%20use%20are%3CUL%20id%3D%22pragma-line-9%22%3E%0A%3CLI%20id%3D%22pragma-line-9%22%3EInkCanvas%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2Fwindows.ui.xaml.controls.inkcanvas%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2Fwindows.ui.xaml.controls.inkcanvas%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-10%22%3EInkToolbar%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2Fwindows.ui.xaml.controls.inktoolbar%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2Fwindows.ui.xaml.controls.inktoolbar%3C%2FA%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-11%22%3EKeep%20an%20eye%20on%20the%20Windows%20Ink%20UX%20guidelines%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fwindows%2Fuwp%2Fdesign%2Fcontrols-and-patterns%2Finking-controls%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fwindows%2Fuwp%2Fdesign%2Fcontrols-and-patterns%2Finking-controls%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-12%22%3EBookmark%20the%20landing%20page%20for%20Inking%20interactions%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fwindows%2Fuwp%2Fdesign%2Finput%2Fpen-and-stylus-interactions%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fwindows%2Fuwp%2Fdesign%2Finput%2Fpen-and-stylus-interactions%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-13%22%3ERefer%20to%20the%20following%202%20namespaces%3CUL%20id%3D%22pragma-line-14%22%3E%0A%3CLI%20id%3D%22pragma-line-14%22%3EWindows.UI.Input.Inking%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2FWindows.UI.Input.Inking%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2FWindows.UI.Input.Inking%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-15%22%3EWindows.UI.Xaml.Controls%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2Fwindows.ui.xaml.controls%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2Fwindows.ui.xaml.controls%3C%2FA%3E%20(For%20Ink*%20controls)%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3E--%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWith%20all%20the%20documentation%20mentioned%20before%2C%20you%20would%20be%20easily%20able%20to%3C%2FP%3E%0A%3CUL%20id%3D%22pragma-line-20%22%3E%0A%3CLI%20id%3D%22pragma-line-20%22%3EUse%20the%20InkCanvas%20for%20allowing%20pen%2Fmouse%2Ftouch%20drawing%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-21%22%3EAdd%20a%20InkToolbar%20to%20change%20the%20pencil%20type%2Fsize%2Fcolor%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-22%22%3EUse%20the%20ruler%20to%20draw%20perfect%20lines%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-23%22%3ESelect%20Inkstrokes%2C%20copy%2Fcut%2Fpaste%20them%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-24%22%3ESave%20and%20load%20serialized%20Inkstrokes%20on%20disk%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CH2%20id%3D%22toc-hId--674468460%22%20id%3D%22toc-hId--674468460%22%3E%26nbsp%3B%3C%2FH2%3E%0A%3CH2%20id%3D%22the-idea--go-further-of-the-inkstrokes%22%20id%3D%22toc-hId-1813044373%22%20id%3D%22toc-hId-1813044373%22%3E%3CA%20id%3D%22pragma-line-26%22%20target%3D%22_blank%22%3E%3C%2FA%3EThe%20idea%3A%20Go%20further%20of%20the%20InkStrokes%3C%2FH2%3E%0A%3CP%3EThe%20purpose%20of%20this%20blog%20post%20is%20to%20go%20deeper%20on%20one%20scenario%3A%20%3CSTRONG%3EAccept%20Inkstrokes%20and%20convert%20them%20to%20shapes!%3C%2FSTRONG%3E%20What%3F%20Inkstrokes%20are%20not%20good%3F%20Do%20not%20misunderstand%3A%20Strokes%20are%20perfect.%20They%20are%20the%20digital%20objects%20representing%20the%20strokes%20that%20the%20user%20created%20by%20using%20the%20pen%2Fmouse%2Ftouch.%20The%20idea%20is%20to%20leverage%20on%20the%20drawings%20to%20create%20digital%20formalized%20shapes.%20This%20way%20we%20can%20produce%20high%20fidelity%20floor%20plan%2C%20measure%20lengths%2C%20areas%3B%20we%20can%20create%20vectorial%20shapes%20and%20figures%20for%20printing%2C%20creating%20user%20interfaces%2C%20etc.%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-5589910%22%20id%3D%22toc-hId-5589910%22%3E%26nbsp%3B%3C%2FH2%3E%0A%3CH2%20id%3D%22the-initial-project-%22%20id%3D%22toc-hId--1801864553%22%20id%3D%22toc-hId--1801864553%22%3E%3CA%20id%3D%22pragma-line-30%22%20target%3D%22_blank%22%3E%3C%2FA%3EThe%20initial%20project%3C%2FH2%3E%0A%3CP%3EThe%20simplest%20way%20to%20be%20able%20to%20accept%20inking%20is%20to%20use%20the%20InkCanvas%20control.%20Create%20a%20new%20empty%20UWP%20blank%20projet%20and%20just%20add%20the%20following%20XAML%3A%3C%2FP%3E%0A%3CPRE%3E%3CCODE%20id%3D%22pragma-line-32%22%20class%3D%22language-xml%20hljs%22%3E%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3EInkCanvas%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3Ex%3AName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%22inkCanvas%22%3C%2FSPAN%3E%20%2F%26gt%3B%3C%2FSPAN%3E%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3EIn%20the%20C%23%20code%2C%20we%20just%20say%20what%20type%20of%20input%20we%20accept%20for%20this%20InkCanvas.%20Make%20your%20choice%20depending%20of%20the%20requirements%20of%20your%20app%20(You%20can%20change%20it%20at%20anytime%20by%20code)%3A%3C%2FP%3E%0A%3CPRE%3E%3CCODE%20id%3D%22pragma-line-37%22%20class%3D%22language-csharp%20hljs%22%3E%3CSPAN%20class%3D%22hljs-comment%22%3E%2F%2F%20Initialize%20the%20InkCanvas%3C%2FSPAN%3E%0AinkCanvas.InkPresenter.InputDeviceTypes%20%3D%0A%20%20%20%20Windows.UI.Core.CoreInputDeviceTypes.Mouse%20%7C%0A%20%20%20%20Windows.UI.Core.CoreInputDeviceTypes.Pen%20%7C%20%0A%20%20%20%20Windows.UI.Core.CoreInputDeviceTypes.Touch%3B%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3EWe%20are%20done%2C%20you%20can%20draw%20on%20the%20whole%20surface%20of%20the%20app%20with%20pen%2Ftouch%2Fmouse.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22InitialInkCanvasScreen.png%22%20style%3D%22width%3A%20541px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F188156i4A0693FF5DDF17C5%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22InitialInkCanvasScreen.png%22%20alt%3D%22Sample%20drawing%20by%20hands%20on%20a%20UWP%20Window%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3ESample%20drawing%20by%20hands%20on%20a%20UWP%20Window%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20source%20code%20is%20available%20on%20GitHub%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fsbovo%2FUWP-Advanced-Inking%2Ftree%2Fmaster%2FStrokesToShapes%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fsbovo%2FUWP-Advanced-Inking%2Ftree%2Fmaster%2FStrokesToShapes%3C%2FA%3E%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-685648280%22%20id%3D%22toc-hId-685648280%22%3E%26nbsp%3B%3C%2FH2%3E%0A%3CH2%20id%3D%22getting-the-last-inkstroke-drawn-%22%20id%3D%22toc-hId--1121806183%22%20id%3D%22toc-hId--1121806183%22%3E%3CA%20id%3D%22pragma-line-51%22%20target%3D%22_blank%22%3E%3C%2FA%3EGetting%20the%20last%20InkStroke%20drawn%20%E2%9C%8F%3C%2FH2%3E%0A%3CP%3EIn%20order%20to%20be%20able%20to%20do%20some%20actions%20after%20each%20draw%2C%20the%20Ink%20platform%20gives%20us%20the%20%3CEM%3E%3CSTRONG%3EStrokesCollected%3C%2FSTRONG%3E%3C%2FEM%3E%20event%20on%20the%20%3CEM%3E%3CSTRONG%3EInkPresenter%3C%2FSTRONG%3E%3C%2FEM%3E%20object%20associated%20with%20the%20%3CEM%3E%3CSTRONG%3EInkCanvas%3C%2FSTRONG%3E%3C%2FEM%3E.%3C%2FP%3E%0A%3CBLOCKQUOTE%20id%3D%22pragma-line-53%22%3E%0A%3CP%3E%3CSTRONG%3ENote%3A%3C%2FSTRONG%3E%20The%20-ERR%3AREF-NOT-FOUND-InkPresenter%20provides%20properties%2C%20methods%2C%20and%20events%20for%20managing%20the%20input.%20That%20includes%20the%20processing%20and%20the%20rendering%20of%20the%20Ink%20input.%20It%20allows%20us%20to%20gain%20a%20fined%20control%20on%20the%20input.%3C%2FP%3E%0A%3C%2FBLOCKQUOTE%3E%0A%3CP%3ELet's%20add%20a%20event%20handler%20for%20the%20%3CEM%3E%3CSTRONG%3EStrokesCollected%3C%2FSTRONG%3E%3C%2FEM%3E%20event%3A%3C%2FP%3E%0A%3CPRE%3E%3CCODE%20id%3D%22pragma-line-56%22%20class%3D%22language-csharp%20hljs%22%3EinkCanvas.InkPresenter.StrokesCollected%20%2B%3D%20InkPresenter_StrokesCollected%3B%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3EThen%2C%20in%20this%20event%20handler%2C%20we%20just%20get%20the%20latest%20stroke%20from%20the%20InkPresenter%3A%3C%2FP%3E%0A%3CPRE%3E%3CCODE%20id%3D%22pragma-line-62%22%20class%3D%22language-csharp%20hljs%22%3E%3CSPAN%20class%3D%22hljs-function%22%3E%3CSPAN%20class%3D%22hljs-keyword%22%3Eprivate%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-keyword%22%3Evoid%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-title%22%3EInkPresenter_StrokesCollected%3C%2FSPAN%3E(%3CSPAN%20class%3D%22hljs-params%22%3E%0A%20%20%20%20Windows.UI.Input.Inking.InkPresenter%20sender%2C%20%0A%20%20%20%20Windows.UI.Input.Inking.InkStrokesCollectedEventArgs%20args%3C%2FSPAN%3E)%3C%2FSPAN%3E%0A%20%7B%0A%20%20%20%20%20InkStroke%20stroke%20%3D%20inkCanvas.InkPresenter.StrokeContainer.GetStrokes().Last()%3B%0A%20%7D%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CH2%20id%3D%22toc-hId-1365706650%22%20id%3D%22toc-hId-1365706650%22%3E%26nbsp%3B%3C%2FH2%3E%0A%3CH2%20id%3D%22working-with-xaml-shapes-%22%20id%3D%22toc-hId--441747813%22%20id%3D%22toc-hId--441747813%22%3E%3CA%20id%3D%22pragma-line-71%22%20target%3D%22_blank%22%3E%3C%2FA%3EWorking%20with%20XAML%20Shapes%3C%2FH2%3E%0A%3CP%3EXAML%20Shapes%20were%20first%20introduced%20in%20WPF.%20If%20you%20discover%20XAML%20Shapes%2C%20the%20following%20page%20gives%20you%20a%20perfect%20startup%3A%20Draw%20shapes%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fwindows%2Fuwp%2Fdesign%2Fcontrols-and-patterns%2Fshapes%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fwindows%2Fuwp%2Fdesign%2Fcontrols-and-patterns%2Fshapes%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3EXAML%20Shapes%20are%20basically%20vector-based%20regions%20in%20the%20XAML%20UI.%20They%20provide%20you%20the%20ability%20to%20draw%20not%20only%20simple%20forms%20like%20rectangles%2C%20circles%2C%20ellipses%20but%20also%20any%20path%2C%20Bezier%20curves%20or%20geometric%20shapes.%20All%20are%20vector's%20shapes%20displayed%20on%20a%20XAML%20Canvas.%3C%2FP%3E%0A%3CP%3ELet's%20go%20back%20to%20our%20goal%3A%20We%20have%20the%20last%20InkStroke%20and%20we%20would%20like%20to%20%22replace%22%20it%20by%20a%20nice%20and%20friendly%20XAML%20Shapes%20that%20we%20could%20manipulate%2Fmove%2Fmodify%20easily%20by%20APIs.%3C%2FP%3E%0A%3CP%3EFirst%2C%20we%20modify%20the%20XAML%20page%20in%20order%20to%20add%20a%20new%20Canvas.%20The%20one%20that%20will%20contains%20all%20XAML%20Shapes%3A%3C%2FP%3E%0A%3CPRE%3E%3CCODE%20id%3D%22pragma-line-79%22%20class%3D%22language-xml%20hljs%22%3E%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3ECanvas%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3Ex%3AName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%22ShapesCanvas%22%3C%2FSPAN%3E%20%2F%26gt%3B%3C%2FSPAN%3E%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3EThe%20entire%20XAML%20page%20is%20like%3A%3C%2FP%3E%0A%3CPRE%3E%3CCODE%20id%3D%22pragma-line-84%22%20class%3D%22language-xml%20hljs%22%3E%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3EGrid%3C%2FSPAN%3E%26gt%3B%3C%2FSPAN%3E%0A%20%20%20%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3EInkCanvas%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3Ex%3AName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%22inkCanvas%22%3C%2FSPAN%3E%20%2F%26gt%3B%3C%2FSPAN%3E%0A%0A%20%20%20%3CSPAN%20class%3D%22hljs-comment%22%3E%3C!--%20Canvas%20for%20displaying%20the%20%22recognized%22%20XAML%20Shapes%20--%3E%3C%2FSPAN%3E%0A%20%20%20%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3ECanvas%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3Ex%3AName%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%22ShapesCanvas%22%3C%2FSPAN%3E%20%2F%26gt%3B%3C%2FSPAN%3E%0A%3CSPAN%20class%3D%22hljs-tag%22%3EGrid%3C%2FSPAN%3E%26gt%3B%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3EIt%20now%20like%20we%20have%20two%20layers%2C%20on%20for%20drawing%20on%20the%20surface%20and%20the%20other%20one%20for%20displaying%2Fmanipulating%20all%20the%20final%20XAML%20shapes.%3C%2FP%3E%0A%3CP%3EWe%20can%20now%20do%20two%20actions%3A%3C%2FP%3E%0A%3COL%20id%3D%22pragma-line-96%22%3E%0A%3CLI%20id%3D%22pragma-line-96%22%3ECreate%20the%20new%20-ERR%3AREF-NOT-FOUND-XAML%20Line%20based%20on%20the%20properties%20of%20the%20last%20InkStroke%20and%20add%20this%20line%20to%20the%20%3CEM%3EShapesCanvas%3C%2FEM%3E%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-97%22%3ERemove%20the%20last%20InkStroke%20from%20the%20%3CEM%3EinkCanvas%3C%2FEM%3E%20in%20order%20to%20have%20a%20clean%20display%20made%20only%20by%20XAML%20Shapes%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CDIV%20id%3D%22MainContent%22%3E%0A%3CP%3EIn%20order%20to%20be%20able%20to%20perform%20these%20two%20actions%20when%20the%20user%20has%20just%20finished%20to%20draw%20a%20line%2C%20we%20use%20the%20%3CEM%3E%3CSTRONG%3EStrokesCollected%3C%2FSTRONG%3E%3C%2FEM%3E%20event%20of%20the%20%3CSTRONG%3EInkPresenter%3C%2FSTRONG%3E%20object%20attached%20to%20the%20InkCanvas.%20We%20add%20the%20following%20event%20handler%20declaration%20in%20the%20constructor%20of%20the%20page%3A%3C%2FP%3E%0A%3CPRE%3E%3CCODE%20id%3D%22pragma-line-101%22%20class%3D%22language-csharp%20hljs%22%3E%3CSPAN%20class%3D%22hljs-comment%22%3E%2F%2F%20When%20the%20user%20finished%20to%20draw%20something%20on%20the%20InkCanvas%3C%2FSPAN%3E%0AinkCanvas.InkPresenter.StrokesCollected%20%2B%3D%20InkPresenter_StrokesCollected%3B%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ELet's%20code%20the%202%20actions%3A%3C%2FP%3E%0A%3C%2FDIV%3E%0A%3CPRE%3E%3CCODE%20id%3D%22pragma-line-99%22%20class%3D%22language-csharp%20hljs%22%3E%3CSPAN%20class%3D%22hljs-function%22%3E%3CSPAN%20class%3D%22hljs-keyword%22%3Eprivate%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-keyword%22%3Evoid%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-title%22%3EInkPresenter_StrokesCollected%3C%2FSPAN%3E(%3CSPAN%20class%3D%22hljs-params%22%3E%0A%20%20%20%20%20Windows.UI.Input.Inking.InkPresenter%20sender%2C%0A%20%20%20%20%20Windows.UI.Input.Inking.InkStrokesCollectedEventArgs%20args%3C%2FSPAN%3E)%3C%2FSPAN%3E%0A%20%7B%0A%20%20%20%20%20InkStroke%20stroke%20%3D%20inkCanvas.InkPresenter.StrokeContainer.GetStrokes().Last()%3B%0A%20%20%20%20%20%0A%20%20%20%20%20%3CSPAN%20class%3D%22hljs-comment%22%3E%2F%2F%20Action%201%20%3D%20We%20use%20a%20function%20that%20we%20will%20implement%20just%20after%20to%20create%20the%20XAML%20Line%3C%2FSPAN%3E%0A%20%20%20%20%20Line%20line%20%3D%20ConvertStrokeToXAMLLine(stroke)%3B%20%0A%20%20%20%20%20%3CSPAN%20class%3D%22hljs-comment%22%3E%2F%2F%20Action%202%20%3D%20We%20add%20the%20Line%20in%20the%20second%20Canvas%3C%2FSPAN%3E%0A%20%20%20%20%20ShapesCanvas.Children.Add(line)%3B%0A%20%20%20%20%20%0A%20%20%20%20%20%3CSPAN%20class%3D%22hljs-comment%22%3E%2F%2F%20We%20delete%20the%20InkStroke%20from%20the%20InkCanvas%3C%2FSPAN%3E%0A%20%20%20%20%20stroke.Selected%20%3D%20%3CSPAN%20class%3D%22hljs-literal%22%3Etrue%3C%2FSPAN%3E%3B%0A%20%20%20%20%20inkCanvas.InkPresenter.StrokeContainer.DeleteSelected()%3B%0A%20%7D%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CH2%20id%3D%22toc-hId--575432537%22%20id%3D%22toc-hId--575432537%22%3E%26nbsp%3B%3C%2FH2%3E%0A%3CH2%20id%3D%22the-conversion--inkstroke--xaml-line%22%20id%3D%22toc-hId-1912080296%22%20id%3D%22toc-hId-1912080296%22%3E%3CA%20id%3D%22pragma-line-118%22%20target%3D%22_blank%22%3E%3C%2FA%3ETHE%20%22conversion%22%20%E2%9A%99%3A%20InkStroke%20%E2%86%92%20XAML%20Line%3C%2FH2%3E%0A%3CP%3EIt%20is%20just%20about%20creating%20a%20%3CEM%3ELine%3C%2FEM%3E%20(Windows.UI.Xaml.Shapes.Line)%20object%20with%20the%20initial%20and%20final%20positions%20of%20the%20InkStroke%20%3Aunamused_face%3A%3Agrinning_face%3A%3A%3C%2FP%3E%0A%3CPRE%3E%3CCODE%20id%3D%22pragma-line-120%22%20class%3D%22language-csharp%20hljs%22%3E%3CSPAN%20class%3D%22hljs-function%22%3E%3CSPAN%20class%3D%22hljs-keyword%22%3Eprivate%3C%2FSPAN%3E%20Line%20%3CSPAN%20class%3D%22hljs-title%22%3EConvertStrokeToXAMLLine%3C%2FSPAN%3E(%3CSPAN%20class%3D%22hljs-params%22%3EInkStroke%20stroke%3C%2FSPAN%3E)%3C%2FSPAN%3E%0A%7B%0A%20%3CSPAN%20class%3D%22hljs-keyword%22%3Evar%3C%2FSPAN%3E%20line%20%3D%20%3CSPAN%20class%3D%22hljs-keyword%22%3Enew%3C%2FSPAN%3E%20Line()%3B%0A%20line.Stroke%20%3D%20%3CSPAN%20class%3D%22hljs-keyword%22%3Enew%3C%2FSPAN%3E%20SolidColorBrush(Windows.UI.Colors.Green)%3B%0A%20line.StrokeThickness%20%3D%20%3CSPAN%20class%3D%22hljs-number%22%3E6%3C%2FSPAN%3E%3B%0A%20%3CSPAN%20class%3D%22hljs-comment%22%3E%2F%2F%20The%20origin%20%3D%20(X1%2C%20Y1)%3C%2FSPAN%3E%0A%20line.X1%20%3D%20stroke.GetInkPoints().First().Position.X%3B%0A%20line.Y1%20%3D%20stroke.GetInkPoints().First().Position.Y%3B%0A%20%3CSPAN%20class%3D%22hljs-comment%22%3E%2F%2F%20The%20end%20%3D%20(X2%2C%20Y2)%3C%2FSPAN%3E%0A%20line.X2%20%3D%20stroke.GetInkPoints().Last().Position.X%3B%0A%20line.Y2%20%3D%20stroke.GetInkPoints().Last().Position.Y%3B%0A%0A%20%3CSPAN%20class%3D%22hljs-keyword%22%3Ereturn%3C%2FSPAN%3E%20line%3B%0A%7D%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3EHere%20we%20go.%20We%20did%20it.%20We%20can%20draw%20on%20the%20surface%20and%20the%20final%20line%20will%20only%20be%20the%20XAML%20Line%20we%20added%20to%20the%20second%20Canvas.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22FinalXAMLShapesCanvas.png%22%20style%3D%22width%3A%20537px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F188157iE8FEEB23D75ACBD7%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22FinalXAMLShapesCanvas.png%22%20alt%3D%22XAML%20Shapes%20(Line)%20on%20a%20UWP%20Window%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EXAML%20Shapes%20(Line)%20on%20a%20UWP%20Window%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThis%20scenario%20%22converting%20an%20Ink%20stroke%20to%20a%20XAML%20shape%22%20is%20the%20basis%20for%20being%20able%20to%20achieve%20great%20and%20complex%20manipulations.%20Stay%20tuned%20for%20upcoming%20blog%20posts%20about%20XAML%20Shapes%20manipulations%20and%20modifications.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAs%20usual%2C%20all%20the%20source%20code%20is%20available%20on%20GitHub%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fmicrosoft%2FWindows-AppConsult-Samples-UWP%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fmicrosoft%2FWindows-AppConsult-Samples-UWP%2F%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFeedback%20is%20welcome%20%3B)%3C%2Fimg%3E%3C%2FP%3E%0A%3CP%3EHappy%20coding%20on%20the%20Windows%20Platform!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E-ERR%3AREF-NOT-FOUND-%40sbovo%20for%20the%20AppConsult%20team.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22inking-series-articles%22%20id%3D%22toc-hId-104625833%22%20id%3D%22toc-hId-104625833%22%3EInking%20series'%20articles%3C%2FH2%3E%0A%3CP%3EThis%20article%20is%20part%20of%20a%20series%20exploring%20concepts%20about%20inking%20and%20XAML%20Shapes.%20Here%20are%20all%20links%3A%3C%2FP%3E%0A%3COL%20id%3D%22pragma-line-448%22%3E%0A%3CLI%20id%3D%22pragma-line-448%22%3E%0A%3CP%20data-unlink%3D%22true%22%3E%3CSTRONG%3EUse%20the%20UWP%20Inking%20platform%20as%20input%20for%20advanced%20scenarios%3C%2FSTRONG%3E%20%E2%87%90%20You%20are%20here%26nbsp%3B%26nbsp%3B%3C%2FP%3E%0A%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-449%22%3E%0A%3CP%20data-unlink%3D%22true%22%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fwindows-dev-appconsult%2Fhandling-zoom-in-inking-applications%2Fba-p%2F1354930%22%20target%3D%22_blank%22%3EHandling%20zoom%20in%20Inking%20applications%3C%2FA%3E%3C%2FP%3E%0A%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-451%22%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fwindows-dev-appconsult%2Fturning-to-the-dark-side-of-inking-unprocessedinput%2Fba-p%2F1364331%22%20target%3D%22_blank%22%3ETurning%20to%20the%20dark%20side%20of%20inking%20%3D%20UnprocessedInput%26nbsp%3B%3C%2FA%3E%3C%2FP%3E%0A%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fwindows-dev-appconsult%2Ffree-your-mind-start-manipulating-xaml-shapes%2Fba-p%2F1442899%22%20target%3D%22_blank%22%3EFree%20your%20mind%3A%20Start%20manipulating%20XAML%20Shapes%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%0A%3CDIV%20id%3D%22MainContent%22%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fwindows-dev-appconsult%2Fxaml-shapes-manipulation-level-up%2Fba-p%2F1445405%22%20target%3D%22_blank%22%3EXAML%20Shapes%20manipulation%20level%20up%3C%2FA%3E%3C%2FP%3E%0A%3C%2FDIV%3E%0A%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22references%22%20id%3D%22toc-hId--1702828630%22%20id%3D%22toc-hId--1702828630%22%3E%3CA%20id%3D%22pragma-line-151%22%20target%3D%22_blank%22%3E%3C%2FA%3EReferences%3C%2FH2%3E%0A%3CUL%20id%3D%22pragma-line-152%22%3E%0A%3CLI%20id%3D%22pragma-line-152%22%3E%0A%3CP%3E%3CSTRONG%3ESimpleInk%20sample%3C%2FSTRONG%3E%3A%20Find%20examples%20of%20customization%20and%20extensibility%20possibilities%20provided%20by%20the%20Ink%20controls%20and%20APIs%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FMicrosoft%2FWindows-universal-samples%2Ftree%2Fmaster%2FSamples%2FSimpleInk%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FMicrosoft%2FWindows-universal-samples%2Ftree%2Fmaster%2FSamples%2FSimpleInk%3C%2FA%3E%3C%2FP%3E%0A%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-153%22%3E%0A%3CP%3E%3CSTRONG%3EXAML%20Controls%20Gallery%20sample%3C%2FSTRONG%3E%3A%20Explore%20the%20controls%20in%20action%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FMicrosoft%2FXaml-Controls-Gallery%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FMicrosoft%2FXaml-Controls-Gallery%3C%2FA%3E%3C%2FP%3E%0A%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-155%22%3E%0A%3CP%3EWindows%20Ink%20UX%20guidelines%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fwindows%2Fuwp%2Fdesign%2Fcontrols-and-patterns%2Finking-controls%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fwindows%2Fuwp%2Fdesign%2Fcontrols-and-patterns%2Finking-controls%3C%2FA%3E%3C%2FP%3E%0A%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-156%22%3E%0A%3CP%3EPen%20interactions%20and%20Windows%20Ink%20in%20UWP%20apps%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fwindows%2Fuwp%2Fdesign%2Finput%2Fpen-and-stylus-interactions%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fwindows%2Fuwp%2Fdesign%2Finput%2Fpen-and-stylus-interactions%3C%2FA%3E%3C%2FP%3E%0A%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-157%22%3E%0A%3CP%3EWindows.UI.Input.Inking%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2FWindows.UI.Input.Inking%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2FWindows.UI.Input.Inking%3C%2FA%3E%3C%2FP%3E%0A%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-158%22%3E%0A%3CP%3EWindows.UI.Xaml.Controls%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2Fwindows.ui.xaml.controls%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2Fwindows.ui.xaml.controls%3C%2FA%3E%20(For%20Ink*%20controls)%3C%2FP%3E%0A%3CUL%20id%3D%22pragma-line-159%22%3E%0A%3CLI%20id%3D%22pragma-line-159%22%3EInkCanvas%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2Fwindows.ui.xaml.controls.inkcanvas%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2Fwindows.ui.xaml.controls.inkcanvas%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-160%22%3EInkToolbar%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2Fwindows.ui.xaml.controls.inktoolbar%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2Fwindows.ui.xaml.controls.inktoolbar%3C%2FA%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-161%22%3E%0A%3CP%3EWindows.UI.Xaml.Shapes%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2FWindows.UI.Xaml.Shapes%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2FWindows.UI.Xaml.Shapes%3C%2FA%3E%3C%2FP%3E%0A%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-162%22%3E%0A%3CP%3EDraw%20shapes%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fwindows%2Fuwp%2Fdesign%2Fcontrols-and-patterns%2Fshapes%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fwindows%2Fuwp%2Fdesign%2Fcontrols-and-patterns%2Fshapes%3C%2FA%3E%3C%2FP%3E%0A%3C%2FLI%3E%0A%3CLI%20id%3D%22pragma-line-163%22%3E%0A%3CP%3EXAML%20Line%20-%20-ERR%3AREF-NOT-FOUND-%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2FWindows.UI.Xaml.Shapes.Line%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fuwp%2Fapi%2FWindows.UI.Xaml.Shapes.Line%3C%2FA%3E%3C%2FP%3E%0A%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3C!--%20End%20Markdown%20Monster%20Content%20--%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-1352471%22%20slang%3D%22en-US%22%3E%3CDIV%20id%3D%22MainContent%22%3E%0A%3CP%3ESince%20almost%205%20years%2C%20Windows%2010%20is%20bringing%20innovations%20and%20powerful%20usages%20of%20devices'%20capabilities%3B%20The%20%3CSTRONG%3EWindows%20Inking%20platform%3C%2FSTRONG%3E%20%E2%9C%8F%20is%20a%20one%20great%20example%20of%20natural%20user%20interface%3A%20With%20the%20use%20of%20the%20pen%2C%20your%20computer%20or%20tablet%20becomes%20a%20intelligent%20digital%20paper!%3C%2FP%3E%0A%3C%2FDIV%3E%3C%2FLINGO-TEASER%3E
Version history
Last update:
‎Jun 06 2020 09:07 AM
Updated by:
www.000webhost.com