Drawing And Inking Using New InkCanvas Control For Universal Windows App

Windows 10 introduced built-in InkCanvas control to capture the user input. I am going to show the use of InkCanvas control to capture the user touch input and save it as image.

In Windows 8.1 apps you had to create a Canvas, listen to input events, and render your own strokes, but in Windows 10 use the built-in InkCanvas control to immediately capture use input.

This control allows user to quickly enable inking for user and easily expand its functionality by accessing the InkCanvas’s InkPresenter property. InkPresenter can be used to configure a collection of user input through touch or mouse input.

Let’s see the steps to perform this operation.

Create a new windows 10 UWP ap. Once successful created, go to MainPage.XAML page and write the following code to design your page.

<InkCanvas x:Name="myCanvas" PointerPressed="myCanvas_PointerPressed" PointerMoved="myCanvas_PointerMoved" PointerReleased="myCanvas_PointerReleased" Margin="0,0,10,10">
  </InkCanvas>

The control looks like the following, 



Next got to code behind page and write the following code,

Firstly, create new instance for InkPresenter.

InkPresenter myPresenter = myCanvas.InkPresenter;

Next define the input device type for Canvas control to let the control accepts inputs from those devices.

Pen, Mouse and Touch.

myPresenter.InputDeviceTypes = Windows.UI.Core.CoreInputDeviceTypes.Pen
|Windows.UI.Core.CoreInputDeviceTypes.Mouse|Windows.UI.Core.CoreInputDeviceTypes.Touch;

Set the pen colour, pencil tip shape and size.

myAttributes.Color = Windows.UI.Colors.Crimson;
myAttributes.PenTip = PenTipShape.Circle;
myAttributes.Size = new Size(2, 5);

The whole code on canvas pointer pressed event looks like the following,

private void myCanvas_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    InkPresenter inkPresenter = myCanvas.InkPresenter;
    inkPresenter.InputDeviceTypes = Windows.UI.Core.CoreInputDeviceTypes.Pen | Windows.UI.Core.CoreInputDeviceTypes.Mouse | Windows.UI.Core.CoreInputDeviceTypes.Touch;
    InkDrawingAttributes myAttributes = inkPresenter.CopyDefaultDrawingAttributes();
    myAttributes.Color = Windows.UI.Colors.Crimson;
    myAttributes.PenTip = PenTipShape.Circle;
    myAttributes.PenTipTransform = System.Numerics.Matrix3x2.CreateRotation((float) Math.PI / 4);
    myAttributes.Size = new Size(2, 5);
    inkPresenter.UpdateDefaultDrawingAttributes(myAttributes);
}

Next save this ink into image,

private async void savebtn_Click(object sender, RoutedEventArgs e)
{
    var savePicker = new FileSavePicker();
    savePicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
    savePicker.FileTypeChoices.Add("PNG", new System.Collections.Generic.List < string >
    {
        ".png"
    });
    StorageFile file = await savePicker.PickSaveFileAsync();
    if (null != file)
    {
        try
        {
            using(IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
            {
                await myCanvas.InkPresenter.StrokeContainer.SaveAsync(stream);
            }
        }
        catch (Exception ex)
        {}
    }
}

Now change the inkpresenter processing mode to erase to delete the ink,

myCanvas.InkPresenter.InputProcessingConfiguration.Mode = InkInputProcessingMode.Erasing;

Erase button click event looks like the following,

private void erasebtn_Click(object sender, RoutedEventArgs e)
{
    myCanvas.InkPresenter.InputProcessingConfiguration.Mode = InkInputProcessingMode.Erasing;
}

Now run the app and see the output like the following screen,





For Source Code