InkToolbarCustomToggleButton
InkToolbarCustomToggleButton
InkToolbarCustomToggleButton
InkToolbarCustomToggleButton
Class
Definition
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.
public : class InkToolbarCustomToggleButton : InkToolbarToggleButton, IInkToolbarCustomToggleButtonpublic class InkToolbarCustomToggleButton : InkToolbarToggleButton, IInkToolbarCustomToggleButtonPublic Class InkToolbarCustomToggleButton Inherits InkToolbarToggleButton Implements IInkToolbarCustomToggleButton// This API is not available in Javascript.
- Inheritance
-
InkToolbarCustomToggleButtonInkToolbarCustomToggleButtonInkToolbarCustomToggleButtonInkToolbarCustomToggleButton
- Attributes
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
Inherited Members
Inherited properties
Inherited events
Inherited methods
Examples
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).
<!-- This is the recommended way to implement inking with touch.
Because touch is typically reserved for navigation and manipulation
(pan, zoom, rotate, etc.), InkToolbar does not support touch inking
by default.
If you need to support inking with touch, we recommended that you
enable it using a CustomToggleButton, with the icon and tooltip
specified in this example.
-->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
x:Name="HeaderPanel"
Orientation="Horizontal">
<TextBlock x:Name="Header"
Text="Basic ink sample"
Style="{ThemeResource HeaderTextBlockStyle}"
Margin="10" />
</StackPanel>
<ScrollViewer Grid.Row="1"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<InkToolbar Grid.Row="0"
Margin="10"
x:Name="inkToolbar"
VerticalAlignment="Top"
TargetInkCanvas="{x:Bind inkCanvas}">
<InkToolbarCustomToggleButton
x:Name="toggleButton"
Click="CustomToggle_Click"
ToolTipService.ToolTip="Touch Writing">
<SymbolIcon Symbol="{x:Bind TouchWritingIcon}"/>
</InkToolbarCustomToggleButton>
</InkToolbar>
<ScrollViewer Grid.Row="1"
Height="500"
Width="500"
x:Name="scrollViewer"
ZoomMode="Enabled"
MinZoomFactor=".1"
VerticalScrollMode="Enabled"
VerticalScrollBarVisibility="Auto"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Auto">
<Grid x:Name="outputGrid"
Height="1000"
Width="1000"
Background="{ThemeResource SystemControlBackgroundChromeWhiteBrush}">
<InkCanvas x:Name="inkCanvas"/>
</Grid>
</ScrollViewer>
</Grid>
</ScrollViewer>
</Grid>
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.
namespace Ink_Basic_InkToolbar
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage_AddCustomToggle : Page
{
Symbol TouchWritingIcon = (Symbol)0xED5F;
public MainPage_AddCustomToggle()
{
this.InitializeComponent();
}
// Handler for the custom toggle button that enables touch inking.
private void CustomToggle_Click(object sender, RoutedEventArgs e)
{
if (toggleButton.IsChecked == true)
{
inkCanvas.InkPresenter.InputDeviceTypes |= CoreInputDeviceTypes.Touch;
}
else
{
inkCanvas.InkPresenter.InputDeviceTypes &= ~CoreInputDeviceTypes.Touch;
}
}
}
}
Remarks
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 ruler (InkToolbarRulerButton ) button. Custom toggles (InkToolbarCustomToggleButton ) are added here.
Features are not mutually exclusive and can be used concurrently with other active tools.
Constructors
InkToolbarCustomToggleButton() InkToolbarCustomToggleButton() InkToolbarCustomToggleButton() InkToolbarCustomToggleButton()
Initializes a new instance of the InkToolbarCustomToggleButton class.
public : InkToolbarCustomToggleButton()public InkToolbarCustomToggleButton()Public Sub New()// This API is not available in Javascript.
- See Also