| -api-id | -api-type |
|---|---|
T:Windows.UI.Xaml.Controls.InkToolbarCustomToggleButton |
winrt class |
Represents an InkToolbar button that sets the state of an app-defined feature to on or off. When turned on, the feature works in conjunction with the active tool.
The InkToolbar consists of two distinct groups of button types:
-
One group of "tool" buttons containing the built-in drawing (InkToolbarBallpointPenButton, InkToolbarPencilButton), erasing (InkToolbarEraserButton), and highlighting (InkToolbarHighlighterButton) buttons. Custom tools (InkToolbarCustomPenButton and InkToolbarCustomToolButton) are added here.
Feature selection is mutually exclusive.
-
A second group of "toggle" buttons containing the built-in stencil (InkToolbarStencilButton) button (or the InkToolbarRulerButton button). Custom toggles (InkToolbarCustomToggleButton) are added here.
Features are not mutually exclusive and can be used concurrently with other active tools.
In this example, we define a custom toggle button that enables inking with touch input. By default, touch inking is not enabled.
Typically, touch input is used for direct manipulation of an object or the app UI. To demonstrate the differences in behavior when touch inking is enabled, we place the InkCanvas within a ScrollViewer container and set the dimensions of the ScrollViewer to be smaller than the InkCanvas.
When the app starts, only pen inking is supported, with touch used for panning or zooming of the inking surface. When touch inking is enabled, the inking surface cannot be panned or zoomed through touch input.
Note
See Inking controls for both InkCanvas and InkToolbar UX guidelines. The following recommendations are relevant to this example:
- The InkToolbar, and inking in general, is best experienced through an active pen. However, inking with mouse and touch can be supported if required by your app.
- If supporting inking with touch input, we recommend using the "ED5F" icon from the "Segoe MLD2 Assets" font for the toggle button, with a "Touch writing" tooltip.
Here, we declare a InkToolbarCustomToggleButton element (toggleButton) with a Click event listener that specifies the event handler (Toggle_Custom).
[!code-xamlUI_AddCustomToggle]
In the previous snippet, we declared a Click event listener and handler (Toggle_Custom) on the custom toggle button for touch inking (toggleButton). This handler simply toggles support for CoreInputDeviceTypes.Touch through the InputDeviceTypes property of the InkPresenter.
We also specified an icon for the button using the SymbolIcon element and the {x:Bind} markup extension that binds it to a field defined in the code-behind file (TouchWritingIcon).
The following snippet includes both the Click event handler and the definition of TouchWritingIcon for this example.
[!code-csharpCustomToggleMain]
Pen and stylus interactions, Add an InkToolbar to a Universal Windows Platform (UWP) app, Get Started Tutorial: Support ink in your UWP app, Windows.UI.Xaml.Controls classes, InkToolbarToggleButton, InkToolbarToggle, Ink sample (JavaScript), Get Started Tutorial: Support ink in your UWP app, Coloring book sample, Family notes sample