# Ink comes to WinUI 3 ✍️

[Pranav Gupta (pranav-gupta-msft)]

Handwriting is one of those inputs that either feels instant or feels broken. There is no middle ground.

You asked for it in #7426, "Is there a plan/schedule for adding InkCanvas into WinUI desktop?", and again in #10817, when apps moving over from UWP found the control simply was not there.

It is there now. WinUI 3 has InkCanvas and InkToolbar, available from Windows App SDK 2.5.4-experimental. Between them you get a surface that collects strokes and a tool strip that drives it, so a note app stops being a drawing engine you have to write yourself.

Pen

Pencil

Highlighter

Here is the whole thing working. One canvas, one toolbar, no custom drawing code:

A canvas is one element

InkCanvas collects strokes on its own:

<muxc:InkCanvas x:Name="Ink" />

🎨 The toolbar is the second element

InkToolbar attaches to a canvas through TargetInkCanvas:

<muxc:InkToolbar x:Name="Toolbar"
                 TargetInkCanvas="{x:Bind Ink}"
                 HorizontalAlignment="Left">
    <muxc:InkToolbarBallpointPenButton x:Name="PenButton" />
    <muxc:InkToolbarPencilButton />
    <muxc:InkToolbarHighlighterButton />
    <muxc:InkToolbarEraserButton />
    <muxc:InkToolbarStencilButton x:Name="StencilButton" />
</muxc:InkToolbar>

💾 Save a picture that is still ink

GifWithEmbeddedIsf writes an ordinary GIF with the stroke data tucked inside it, so loading the file back returns editable strokes:

// GifWithEmbeddedIsf writes a normal GIF that any viewer can open, with the stroke data
// travelling inside it. Loading the file back returns editable strokes, not a flat picture.
private async Task<int> SaveAndReloadAsync(string path)
{
    var stream = new InMemoryRandomAccessStream();
    await Ink.InkPresenter.StrokeContainer.SaveAsync(
        stream.GetOutputStreamAt(0),
        InkPersistenceFormat.GifWithEmbeddedIsf);

    var bytes = new byte[stream.Size];
    var reader = new DataReader(stream.GetInputStreamAt(0));
    await reader.LoadAsync((uint)stream.Size);
    reader.ReadBytes(bytes);

    System.IO.Directory.CreateDirectory(System.IO.Path.GetDirectoryName(path));
    System.IO.File.WriteAllBytes(path, bytes);

    // Reload into the OS container to prove the strokes survived as ink. The WinUI
    // InkStrokeContainer has no public constructor, so use the OS one.
    var reloadStream = new InMemoryRandomAccessStream();
    var writer = new DataWriter(reloadStream.GetOutputStreamAt(0));
    writer.WriteBytes(System.IO.File.ReadAllBytes(path));
    await writer.StoreAsync();
    writer.DetachStream();

    var reloaded = new Windows.UI.Input.Inking.InkStrokeContainer();
    await reloaded.LoadAsync(reloadStream.GetInputStreamAt(0));

    return reloaded.GetStrokes().Count;
}

Attach a title bar and a page, and the two elements above are already a usable note app:

The cream page and window chrome are ordinary WinUI styling around the canvas, left out of the snippets above.

The whole app

MainWindow.xaml

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="InkNotes.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    Title="Ink Notes">

    <Grid x:Name="Root" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Border Grid.Row="0"
                Margin="24,12,24,0"
                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="1"
                CornerRadius="8"
                Padding="18,14">
            <StackPanel Spacing="12">
                <Grid>
                    <TextBlock Text="InkToolbar" FontSize="16" VerticalAlignment="Center" />
                    <Button x:Name="SaveButton"
                            Content="Save"
                            HorizontalAlignment="Right"
                            Click="OnSaveClick" />
                </Grid>
                <muxc:InkToolbar x:Name="Toolbar"
                                 TargetInkCanvas="{x:Bind Ink}"
                                 HorizontalAlignment="Left">
                    <muxc:InkToolbarBallpointPenButton x:Name="PenButton" />
                    <muxc:InkToolbarPencilButton />
                    <muxc:InkToolbarHighlighterButton />
                    <muxc:InkToolbarEraserButton />
                    <muxc:InkToolbarStencilButton x:Name="StencilButton" />
                </muxc:InkToolbar>
            </StackPanel>
        </Border>

        <Border Grid.Row="1"
                Margin="24,12,24,24"
                Background="#FFFDFCF8"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="1"
                CornerRadius="8">
            <muxc:InkCanvas x:Name="Ink" />
        </Border>
    </Grid>
</Window>

MainWindow.xaml.cs

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

using System;
using System.Threading.Tasks;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Input;
using Windows.Storage.Streams;
using Windows.System;
using Windows.UI.Input.Inking;

namespace InkNotes
{
    /// <summary>
    /// A note page you can write on. The canvas and the toolbar do the work; this file only wires
    /// up the input devices and saving.
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();

            // The canvas listens to pen only out of the box. Open it up to everyone.
            Ink.InkPresenter.InputDeviceTypes =
                Windows.UI.Core.CoreInputDeviceTypes.Touch |
                Windows.UI.Core.CoreInputDeviceTypes.Pen |
                Windows.UI.Core.CoreInputDeviceTypes.Mouse;

            // Ctrl+S saves too, for people who expect it.
            var save = new KeyboardAccelerator { Key = VirtualKey.S, Modifiers = VirtualKeyModifiers.Control };
            save.Invoked += async (_, args) =>
            {
                args.Handled = true;
                await SaveAsync();
            };
            Root.KeyboardAccelerators.Add(save);
        }

        private async void OnSaveClick(object sender, RoutedEventArgs e) => await SaveAsync();

        private static string NotePath => System.IO.Path.Combine(
            Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData),
            "InkNotes",
            "note.gif");

        private async Task SaveAsync()
        {
            int strokes = await SaveAndReloadAsync(NotePath);
            Title = $"Ink Notes - saved {strokes} strokes";
            await Task.Delay(2000);
            Title = "Ink Notes";
        }

        /// <summary>
        /// GifWithEmbeddedIsf writes a normal GIF that any viewer can open, with the stroke data
        /// travelling inside it. Loading the file back returns editable strokes, not a flat picture.
        /// </summary>
        private async Task<int> SaveAndReloadAsync(string path)
        {
            var stream = new InMemoryRandomAccessStream();
            await Ink.InkPresenter.StrokeContainer.SaveAsync(
                stream.GetOutputStreamAt(0),
                InkPersistenceFormat.GifWithEmbeddedIsf);

            var bytes = new byte[stream.Size];
            var reader = new DataReader(stream.GetInputStreamAt(0));
            await reader.LoadAsync((uint)stream.Size);
            reader.ReadBytes(bytes);

            System.IO.Directory.CreateDirectory(System.IO.Path.GetDirectoryName(path));
            System.IO.File.WriteAllBytes(path, bytes);

            // Reload to prove the strokes survived as ink. The WinUI InkStrokeContainer has no
            // public constructor, so use the one from Windows.UI.Input.Inking.
            var reloadStream = new InMemoryRandomAccessStream();
            var writer = new DataWriter(reloadStream.GetOutputStreamAt(0));
            writer.WriteBytes(System.IO.File.ReadAllBytes(path));
            await writer.StoreAsync();
            writer.DetachStream();

            var reloaded = new InkStrokeContainer();
            await reloaded.LoadAsync(reloadStream.GetInputStreamAt(0));

            return reloaded.GetStrokes().Count;
        }
    }
}

Try it

Inking ships in the Windows App SDK experimental channel. Add Microsoft.WindowsAppSDK 2.5.4-experimental to a WinUI 3 project, add the two elements above, and you have somewhere to write.

💬 Tell us what you build

We want to hear about it: what you are building, what feels good, and anything that gets in your way. Bugs, rough edges and missing pieces are all useful to us, and the earlier they reach us the more we can do about them.

Start a discussion or file an issue at microsoft/microsoft-ui-xaml.

Happy inking 🙌

Team WinUI