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

Download this episode

Download Video

Description

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!

Day:

3

Code:

PLAT-192C

Room:

Trident

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      FremyCompany

      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
      FremyCompany

      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) { ... }

    • User profile image
      erikxaml

      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
      mono

      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
      ilmago

      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)
                  {
                      panel.Children.Add(CreatePathForStroke(stroke));
                  }
              }
          }
      
          // 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;
                      figure.Segments.Add(bs);
                  }
                  var geometry = new Windows.UI.Xaml.Media.PathGeometry();
                  geometry.Figures.Add(figure);
                  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);
          }
      }
      

       

       

       

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.