Drawing And Inking Using InkCanvas Control For UWP

Alagunila Meganathan
8y
16.6k
0
1

Blog

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.

Visual Studio

Step 3 Setting the platform Versions

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

Visual Studio

Step 4 Choose Designer Window

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

Visual Studio

Step 5 Designing the App

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

Visual Studio

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

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

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

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

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