Bring pen and touch input to your Metro style apps with ink

Play Bring pen and touch input to your Metro style apps with ink

The Discussion

  • User profile image

    I don't see any API to detect if I use my pen to "write" or "erase" strokes, at least for Metro apps. Can anyone from Microsoft comment on this issue? It's a big problem for any notetaking application...

  • User profile image

    Ok, I did find the answer to my question in the sample app : You can't now from the Device if he's in eraser mode, but you have that information from the "point" :

    var pt = evt.currentPoint;
    if ( { ... }

  • User profile image

    What kind of devices support ink?

    Because on the ipad the ink experience is very bad. Used different pen's for ipad, but it's all the same as just writing with your finger on the screen. It simply doesn't work like the old tablet PC's used to work, which was way more closer to writing on paper.

    The pen point is also this weird 0.5 cm thick thing, which feels more like using a crayon on the device.

    Is there a sort of list of devices somewhere?

  • User profile image

    Can I use these Inking APIs in C# and XAML?
    I have trouble programming because there is no controls to be bound by InkManager etc.

  • User profile image

    You can indeed use the inking API with C# and XAML, however be aware that the performant rendering of live Ink in XAML is still being investigated. You collect live ink by processing pointer events and calling the InkManager's ProcessPointer* APIs, but you must do the rendering yourself as the inking API does not provide the functionality for rendering. The (current) concern with live rendering is that the latency introduced by WPF's retained-mode graphics causes lagging between the input device and the rendering. The lagging is far more apparent with pen than it is with mouse, due to the proximity of the pen to the actual rendering on the screen.

    The InkManager doesn't need to be bound to any control, you just create it from code:

    var inkManager = new Windows.UI.Input.Inking.InkManager();

    Here's the example for offline rendering of stored ink on a XAML panel (eg. a canvas):

    public static class RenderingHelpers
        // Offline Bezier rendering.
        // Renders the ink saved within inkManager on panel.
        public static void RenderInk(Windows.UI.Xaml.Controls.Panel panel, Windows.UI.Input.Inking.InkManager inkManager)
            foreach (Windows.UI.Input.Inking.IInkStroke stroke in inkManager.GetStrokes())
                if (stroke.GetRenderingSegments().Count > 0)
        // Creates the data structure that renders the stroke.
        static Windows.UI.Xaml.Shapes.Path CreatePathForStroke(Windows.UI.Input.Inking.IInkStroke stroke)
            var figure = new Windows.UI.Xaml.Media.PathFigure();
            Windows.UI.Xaml.Shapes.Path path = null;
            // First segment is degenerate and corresponds to initial position
            var segments = stroke.GetRenderingSegments().GetEnumerator();
            if (segments.MoveNext())
                figure.StartPoint = segments.Current.Position;
                while (segments.MoveNext())
                    var bs = new Windows.UI.Xaml.Media.BezierSegment();
                    bs.Point1 = segments.Current.BezierControlPoint1;
                    bs.Point2 = segments.Current.BezierControlPoint2;
                    bs.Point3 = segments.Current.Position;
                var geometry = new Windows.UI.Xaml.Media.PathGeometry();
                path = new Windows.UI.Xaml.Shapes.Path();
                path.Data = geometry;
                path.Stroke = new Windows.UI.Xaml.Media.SolidColorBrush(int2color(stroke.DrawingAttributes.Color));
                path.StrokeThickness = stroke.DrawingAttributes.Size.Width;
            return path;
        static Windows.UI.Xaml.Media.Color int2Color(int iColor)
            byte alpha = (byte)  (0xff);
            byte red   = (byte)  (iColor & 0x0000ff);
            byte green = (byte) ((iColor & 0x00ff00) >> 8);
            byte blue  = (byte) ((iColor & 0xff0000) >> 16);
            return Windows.UI.Xaml.Media.ColorHelper.FromArgb(alpha, red, green, blue);




Add Your 2 Cents