UWP sample app demonstrating Inking, Surface Dial support, and printing
page_type: sample languages: - csharp products: - windows - windows-uwp statusNotificationTargets:
A mini-app that demonstrates the versatility of Windows Ink (including the Windows Ink Toolbar) and radial controller (for Wheel devices such as the Surface Dial) features.
Using the extensive customization features provided by the inking and radial controller APIs, this sample app incorporates coloring book functionality (line art, standard inking tools such as pen and pencil), a custom Ink Toolbar that features additional tools (flood fill, touch inking, undo/redo), and a fully customized standalone color palette containing a much more extensive collection of colors.
The Coloring Book sample includes the following features:
This sample does not cover Windows Ink Analysis.
The current version of this sample includes updates to support WinUI 2.4 (including ColorPicker, ProgressBar, and ProgressRing).
Note - This sample is targeted and tested for Windows 10, version 2004 (10.0; Build 19041), and Visual Studio 2019. If you prefer, you can use project properties to retarget the project(s) to Windows 10, version 1903 (10.0; Build 18362).
For a simpler inking sample, see Coloring Book V1.
This version of the sample includes extensive architecture, code, and functional improvements over the previous version. These updates necessarily make the sample more complicated. For a simpler inking sample, see Coloring Book V1.
This sample requires Visual Studio 2019, the Microsoft.UI.Xaml 2.4 nuget package, and the latest version of the Windows 10 SDK. You can use the free Visual Studio Community Edition to build and run Windows Universal Platform (UWP) apps.
To get the latest updates to Windows and the development tools, and to help shape their development, join the Windows Insider Program.
There are two projects in the VS solution for this sample:
You can Start Debugging (F5) or Start Without Debugging (Ctrl+F5) to try it out. The app will run in the emulator or on physical devices.
Note: The platform target currently defaults to ARM, so be sure to change that to x64 or x86 if you want to test on a non-ARM device.
By default, ink input is processed on a low-latency background thread and rendered "wet" as it is drawn. When the stroke is completed (pen or finger lifted, or mouse button released), the stroke is processed on the UI thread and rendered "dry" to the InkCanvas layer (above the application content and replacing the wet ink). Windows Ink enables you to override this behavior and completely customize the inking experience by custom drying the ink input and providing more efficient management of large, or complex, collections of ink strokes. For example code, see ColoringPage.xaml, ColoringPage.xaml.cs, and ColoringPageController.cs.
To resolve ink rendering issues when a user zooms in or out (or for any change in display DPI), we adjust the DPI scale of the dry ink canvas in in the ColoringPage.ScrollViewer_ViewChanged method.
Each ColoringBook coloring page is composed of 4 layers:
Important: The ink strokes are encapsulated in a SwapChainPanel. This creates a more complex composition tree where the ink input is not rendered on the top layer (the image) but is instead directly associated with the InkCanvas.
The ColoringBook sample includes a default set of line art images that have been pre-processed to identify coloring regions. The region boundaries are derived from the lines in the images and are used to constrain inking to the active region. Users can draw individual ink strokes with the pen or pencil tools, or use the flood fill tool for more immediate gratification. Once inking has started in a region, strokes are not rendered outside the boundary of that region.
This sample includes the ColoringBookPreprocessingGenerator project, which is the utility we built to process line art for use in the ColoringBook app. You can use this utility for your own line art.
Issue: Ink bleeding into other regions when coloring near a boundary
Reason: Clipping ink points as they cross a boundary is not a trivial task and is beyond the scope of this sample.