WPF Ink Canvas


The WPF InkCanvas control is discussed on pages 316 – 318.

The main purpose of the InkCanvas control is to capture from the user handwriting form the mouse or stylus, but not touch. InkCanvas is actually not a Control. It derives directly from FrameworkElement. You cannot restyle the InkCanvas with a new template.

By default, InkCanvas enables simple writing or drawing on its surface. Using a mouse, you see a thin black line when you drag the mouse over the surface. All you need to do is add the InkCanvas to you project and you get the ability to draw! Here is the XAML.

<Window x:Class="InkCanvasSimple.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:InkCanvasSimple"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="InkCanvasSimple" Height="250" Width="400">
    <Grid>
        <InkCanvas>
        </InkCanvas>
    </Grid>
</Window>

Below is the screenshot after I’ve scribbled on it.

More Information

For more information, in a video format, yo u can check out YouTube for videos by Derek Banas. He has a series of videos on C#. He has a video called C# Tutorial 22 InkCanvas & Key Listeners.

You probably want to set some defaults in you XAML code.

        <InkCanvas Name="myCanvas">
            <InkCanvas.DefaultDrawingAttributes>
                <DrawingAttributes x:Name="strokeAttrib" Color="Black" Width="3" Height="3"/>
            </InkCanvas.DefaultDrawingAttributes>
        </InkCanvas>