Loading user information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading user information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

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

49 minutes, 43 seconds


Right click “Save as…”

Slides (view online)
Metro style apps are much better with ink! In Windows 8, you code your Metro style apps for touch, and get pen and mouse support for free. In addition, with the new Windows 8 API for ink, you can expand your app’s capability and support ink strokes with precise control over Pen width and color. Add ink notations to your app, build an electronic whiteboard for families, create an app for the next Picasso—all these are possible. Interacting with your computer is going to be easier than ever with ink-enabled Metro style apps in Windows 8!

Follow the discussion

  • Oops, something didn't work.

    Getting subscription
    Subscribe to this conversation
  • FremyCompanyFremyCompany

    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...

  • FremyCompanyFremyCompany

    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 (pt.properties.isEraser) { ... }

  • 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?

  • monomono

    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.

  • 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);




Remove this comment

Remove this thread


Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.