Drawing And Inking Using InkCanvas Control For UWP

In this blog, you will learn about how to Draw and Ink, using InkCanvas control for UWP.

Prerequisites

• Visual Studio 2015

InkCanvas element represents a InkCanvas control in XAML.

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

Now, let's get started with the steps, given below.

Step 1 Create Windows Universal Project

Open Visual Studio 2015 and click File -> New -> Project Option for New Universal app.



Step 2 Giving the Project Name

Now, new Project Window will open. You can select an Installed -> Template -> Visual C# -> Windows -> Universal and select a Blank app (Universal Windows).

Type project name InkCanvas and click OK button.



Step 3 Setting the platform Versions

Here, we choose the Target Version, Minimum Version for our Universal Windows Application and click OK button.



Step 4 Choose Designer Window

Now, we go to Solution Explorer and select MainPage.xaml.



Step 5 Designing the App

Drag the InkControl Control from the tool box and change the name to Inkcontrol1 in the Property Window.



Step 6 Add the Coding

Now, we add C# code, given below in MainPage.xaml.cs.

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

Step 7 Run the Application

Now, we are ready to run our project. Thus, click the local machine to run the Application.



Output



Changing the Ink Color

We can change the ink colors, thickness and other properties by overriding the DefultDrawingAttributes.

Add the namespaces, given below, to our project, which is required in the further process.

using Windows.UI.Input.Inking;

The code, given below, will change the default ink color to blue.

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

Output



Conclusion

I hope you understood InkCanvas control in Universal Windows platform and how to use it.