Using InkToolbar and InkCanvas with the Universal Windows Platform

The InkCanvas control allows for easy painting with pen, touch, or mouse. My book Professional C# 6 and .NET Core 1.0 already contains a simple how this can be done. The sample includes drawing using different colors, as well as saving the custom drawing, and loading it again.
With the Anniversary edition of Windows 10 it’s a lot less work doing the same – and now the toolbar looks a lot better than the toolbar I created for the sample app. This article demonstrates how you can use the new InkToolbar control with the InkCanvas.

The source code of the sample application is available on GitHub: ProfessionalCSharp / More Samples.

Prerequisites

To create and run the sample, Windows 10 needs to be updated to the Anniversary edition, and the Windows SDK needs to be installed for this version. You can install the Anniversary update using the Windows update, and the SDK using the Visual Studio extensions. Just in case you need it, I’m including links to additional information:

How to get the Windows 10 Anniversary Update

Windows 10 Anniversary Update SDK

Create the Application

Creating the UWP application, you need to select the target and minimum version of the build supported by the application. Because the first build is available with build 14393, you need to select this build number. With the target version it’s best to select the latest available build. With the mimimum version you need to specify build 14393. If you offer an alternative to the InkToolbar with your application for older builds, you can also support older builds with your application.

To support older Windows 10 builds, you can create a custom toolbar to create the colors, as well as do manual customization of the InkCanvas to supply pen and colors as I’ve shown it in my book. An alternative would be to offer your application without ink support.

InkCanvas and InkToolbar

In the XAML file you just need to add the InkCanvas and the InkToolbar controls. The InkCanvas is the drawing area that allows drawing with the input device type you specify. The InkToolbar is the new control available with the Anniversary update of Windows 10. This control offers selecting a ballpoint pen, a pencil, and a highlighter. With these devices you can select the color and the size. The InkToolbar is associated with the InkCanvas by assigning the TargetInkCanvas property. With this connection, the drawing attributes of the InkPresenter are automatically assigned. Just check the code sample of my book for what needs to be done without using the InkToolbar.

<InkCanvas x:Name="inkCanvas" />
<InkToolbar x:Name="inkToolbar" TargetInkCanvas="{x:Bind inkCanvas}" />

With the XAML code shown here I’ve removed the properties used to arrange them within the page. The code shown here just concentrates on the important parts discussed. Consult the source code on GitHub for more the complete sample.

By default, you can use the pen to draw within the canvas. In case you don’t have a touch monitor, you can also use the mouse to create the drawing. Just assign the input device types as needed:

inkCanvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Pen | CoreInputDeviceTypes.Touch;

Running the Application

Running the application, you can see the InkToolbar as shown in the following figure. As mentioned, you can select a ballpoint pen a pencil, and a highlighter. With these items you can select the color and the size. Depending on the type of the device more or less colors are shown.

In addition to the three pens, you can select an eraser to erase parts of the drawing, and a ruler to draw straight lines.

Customizing the Toolbar

The InkToolbar can be customized setting the InitialControls property to show all items, only the pens, all items except the pens, or nothing.

With the sample app I also added a CommandBar with buttons to load and save the drawing, and a button to clear the complete drawing. The CommandBar is directly attached to the InkToolbar with the help of a RelativePanel. For having a look of the CommandBar that directly fits to the InkToolbar, the ellipsis button of the CommandBar is removed using a custom template. Check the code sample for this code, and the book for more information.

The InkToolbar with the CommandBar attached is shown in the following figure. This also shows a drawing from a famous artist 😉

Ruler

I have some issues drawing straight lines with the pen – as you can probably see from the previous picture. The Windows 10 Anniversary edition also includes a ruler that allows making straight lines easily. Just check the following image for a drawing with a ruler. You can easily move the ruler with your fingers, and draw with the pen.

Summary

The InkCanvas and InkToolbar controls make it extremly easy to create a drawing area for your application and to support pen and touch. The Anniversary edition of Windows 10 includes a ruler, which allows drawing straight lines.

In case you need a device with pen support, I can advice the Surface Pro or the Surface Book. Every developer should own such a device 😉

Have fun with programming and learning!
Christian

More Information

More information on creating Universal Windows apps is available in my new book Professional C# 6 and .NET Core 1.0, and my workshops. Workshops can be customized to your specific needs.

Dog image © Damedeeso | Dreamstime.com Painter artist dog