Easy drawing and inking using new InkCanvas Control for Universal Windows App

By | September 4, 2015

Universal Windows Platform introduced a new  InkCanvas control to easy drawing and a new Inking API to manage the inking. If you are coming from a WPF & XAML development background, you must be familiar with this control. However, till now for a XAML based Windows Store App there was no as such control for direct drawing.  Most of the time we have used Canvas control and then draw top of that using drawing APIs. It was not easy to develop and mange.

With the Windows 10 Universal Platform, The new InkCanvas XAML control and InkPresenter Windows Runtime APIs allow you to draw direct ink and access ink stroke data.

image

 

This works perfectly well on multiple devices and you can implement it very easily. The APIs supports lot of customization and allow to control the ink data.

image

How to work with it ?  This is fairly simple and straight forward. Follow these simple steps to get the basic things working

Step 1 :  Adding the Control

Create a New Universal Windows App Project. Open the XAML Page and an InkCanvas control.

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

Step 2 : Define the Input Device Types

You have to define the input device type for your inCanvas control to let the control accepts inputs from those devices.

public MainPage()
{
this.InitializeComponent();
inkCanvas.InkPresenter.InputDeviceTypes = Windows.UI.Core.CoreInputDeviceTypes.Mouse | Windows.UI.Core.CoreInputDeviceTypes.Pen;
}

Step 3: Run the application

Run the application and test it for desktops, tablets or even on phones.

inkcanvas

Changing the ink Color ?

You can customize the ink colors, thickness and other properties by overriding the DefultDrawingAttributes.  Below code snippet will change the default ink color to blue.


InkDrawingAttributes inkDrawingAttributes = new InkDrawingAttributes();
inkDrawingAttributes .Color = Windows.UI.Colors.Blue;
inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(inkDrawingAttributes );

 

image

Here is the complete code snippet

public MainPage()
{
this.InitializeComponent();
InkDrawingAttributes inkDrawingAttributes = new InkDrawingAttributes();
inkDrawingAttributes .Color = Windows.UI.Colors.Blue;
inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(inkDrawingAttributes );
inkCanvas.InkPresenter.InputDeviceTypes = Windows.UI.Core.CoreInputDeviceTypes.Mouse | Windows.UI.Core.CoreInputDeviceTypes.Pen;
}


To learn more about InkCanvas, please refer to the InkCanvas class documentation.

3 thoughts on “Easy drawing and inking using new InkCanvas Control for Universal Windows App

  1. Pingback: Dew Drop – September 4 2015 (#2084) | Morning Dew

  2. Pingback: Dew Drop – September 8, 2015 (#2085) | Morning Dew

  3. Raja

    I want An Eraser to erase that ..
    Can u do it?
    anD how can i control Color pencil to not go out from paint Area or Border Of an Image Which i had draw ,Matching Dots.

Comments are closed.