InkToolbarCustomPenButton
InkToolbarCustomPenButton
InkToolbarCustomPenButton
InkToolbarCustomPenButton
Class
Definition
Represents an InkToolbar button that activates a pen for which the ink color palette and pen tip properties, such as shape, rotation, and size, are defined by the host app.
public : class InkToolbarCustomPenButton : InkToolbarPenButton, IInkToolbarCustomPenButtonpublic class InkToolbarCustomPenButton : InkToolbarPenButton, IInkToolbarCustomPenButtonPublic Class InkToolbarCustomPenButton Inherits InkToolbarPenButton Implements IInkToolbarCustomPenButton// This API is not available in Javascript.
- Inheritance
-
InkToolbarCustomPenButtonInkToolbarCustomPenButtonInkToolbarCustomPenButtonInkToolbarCustomPenButton
- 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
Here's an example of a custom pen that reuses the default InkToolbarPenConfigurationControl.
<Page ...>
<Page.Resources>
<local:CalligraphicPen x:Key="CalligraphicPen"/>
<BrushCollection x:Key="CalligraphicPenPalette">
<SolidColorBrush>Crimson</Color>
<SolidColorBrush>Black</Color>
<SolidColorBrush>Green</Color>
<SolidColorBrush>Blue</Color>
<SolidColorBrush>White</Color>
</BrushCollection>
<Color x:Key="CallipgraphicPenDefaultColor">Crimson</Color>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
...
<InkToolbar TargetInkCanvas="{x:Bind m_inkCanvas}">
<InkToolbarCustomPenButton CustomPen="{StaticResource CalligraphicPen}"
MinStrokeWidth="1" MaxStrokeWidth="3" SelectedStrokeWidth="2"
Palette="{StaticResource CalligraphicPenPalette}"
SelectedColor="{StaticResource CallipgraphicPenDefaultColor}">
<SymbolIcon Symbol="Placeholder"/>
<InkToolbarCustomPenButton.ConfigurationContent>
<InkToolbarPenConfigurationControl/>
</InkToolbarCustomPenButton.ConfigurationContent>
</InkToolbarCustomPenButton>
</InkToolbar>
...
<InkCanvas x:Name="m_inkCanvas"/>
...
</Page>
Here's an example of a custom pen that customizes the default InkToolbarPenConfigurationControl.
<Style TargetType="InkToolbarPenConfigurationControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="InkToolbarPenConfigurationControl">
<Grid MinWidth="272">
<Grid.Resources>
<Style x:Key="FlyoutStrokeWidthSelectorStyle" TargetType="Slider">
<Setter Property="IsThumbToolTipEnabled" Value="true"/>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="PenColorPaletteTitle"
Grid.Row="0" Grid.Column="0" Padding="16,14,16,10"
Style="{ThemeResource BodyTextBlockStyle}" Text="Colors"/>
<!-- Color palette -->
<GridView x:Name="PenColorPalette"
Grid.Row="1" Grid.Column="0" Padding="12,0,12,0"
Background="{TemplateBinding Background}"
ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PenButton.ColorPalette}"
SelectedItem="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PenButton.SelectedColor, Mode=TwoWay}">
...
</GridView>
...
<Slider x:Name="PenThicknessSlider"
Grid.Row="3" Grid.Column="0" Width="240"
Margin="16,0,16,0" HorizontalAlignment="Stretch"
Minimum="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PenButton.MinStrokeWidth}"
Maximum="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PenButton.MaxStrokeWidth}"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PenButton.SelectedStrokeWidth, Mode=TwoWay}"
Style="{StaticResource FlyoutStrokeWidthSelectorStyle}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
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.
Built-in buttons can be displayed by default, or you can specify which should be displayed by your app.
You cannot change the display order of the built-in buttons. The default display order is: InkToolbarBallpointPenButton, InkToolbarPencilButton, InkToolbarHighlighterButton, InkToolbarEraserButton, and InkToolbarRulerButton, with custom tool buttons appended to the radio button group and custom toggle buttons appended to the toggle button group.
You can use the built-in InkToolbarPenConfigurationControl or you can specify a custom InkToolbarPenConfigurationControl definition in the standard InkToolbar pen declaration.
For custom configurations, your pen class must derive from InkToolbarCustomPen, and override the CreateInkDrawingAttributesCore method. You can then set an instance of the derived class into InkToolbarCustomPenButton.CustomPen and provide the custom configuration UI elements.
Constructors
InkToolbarCustomPenButton() InkToolbarCustomPenButton() InkToolbarCustomPenButton() InkToolbarCustomPenButton()
Initializes a new instance of the InkToolbarCustomPenButton class.
public : InkToolbarCustomPenButton()public InkToolbarCustomPenButton()Public Sub New()// This API is not available in Javascript.
- See Also
-
Properties
ConfigurationContent ConfigurationContent ConfigurationContent ConfigurationContent
Gets or sets the content of an optional ink stroke configuration flyout associated with the InkToolbarCustomPenButton.
public : UIElement ConfigurationContent { get; set; }public UIElement ConfigurationContent { get; set; }Public ReadWrite Property ConfigurationContent As UIElement// This API is not available in Javascript.
Remarks
Each feature on the InkToolbar can support supplementary functionality in a flyout (an "extension glyph" on the feature button indicates to the user that the functionality is available).
To access the functionality, the feature button must be selected already, and the user must select the button again.
ConfigurationContentProperty ConfigurationContentProperty ConfigurationContentProperty ConfigurationContentProperty
Identifies the ConfigurationContent dependency property.
public : static DependencyProperty ConfigurationContentProperty { get; }public static DependencyProperty ConfigurationContentProperty { get; }Public Static ReadOnly Property ConfigurationContentProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the ConfigurationContent dependency property.
- See Also
-
CustomPen CustomPen CustomPen CustomPen
Gets or sets the InkToolbarCustomPen associated with the InkToolbarCustomPenButton.
public : InkToolbarCustomPen CustomPen { get; set; }public InkToolbarCustomPen CustomPen { get; set; }Public ReadWrite Property CustomPen As InkToolbarCustomPen// This API is not available in Javascript.
The InkToolbarCustomPen that is enabled or disabled by the InkToolbarCustomPenButton.
- See Also
-
CustomPenProperty CustomPenProperty CustomPenProperty CustomPenProperty
Identifies the CustomPen dependency property.
public : static DependencyProperty CustomPenProperty { get; }public static DependencyProperty CustomPenProperty { get; }Public Static ReadOnly Property CustomPenProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the CustomPen dependency property.
- See Also
-
See Also
- Pen and stylus interactions
- Add an InkToolbar to a Universal Windows Platform (UWP) app
- Get Started Tutorial: Support ink in your UWP app
- InkToolbarPenButton InkToolbarPenButton InkToolbarPenButton InkToolbarPenButton
- InkToolbarCustomPen InkToolbarCustomPen InkToolbarCustomPen InkToolbarCustomPen
- Ink sample (JavaScript)
- Get Started Tutorial: Support ink in your UWP app
- Coloring book sample
- InkToolbarPenButton InkToolbarPenButton InkToolbarPenButton InkToolbarPenButton