InkToolbarCustomPen
InkToolbarCustomPen
InkToolbarCustomPen
InkToolbarCustomPen
Class
Definition
Represents an InkToolbar 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 InkToolbarCustomPen : DependencyObject, IInkToolbarCustomPen, IInkToolbarCustomPenOverridespublic class InkToolbarCustomPen : DependencyObject, IInkToolbarCustomPen, IInkToolbarCustomPenOverridesPublic Class InkToolbarCustomPen Inherits DependencyObject Implements IInkToolbarCustomPen, IInkToolbarCustomPenOverrides// This API is not available in Javascript.
- Inheritance
-
InkToolbarCustomPenInkToolbarCustomPenInkToolbarCustomPenInkToolbarCustomPen
- Attributes
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
Inherited Members
Inherited methods
Inherited properties
Examples
Here's a definition of a custom calligraphic pen.
- In code-behind, we first create a custom pen class derived from InkToolbarCustomPen.
A custom pen class must override the CreateInkDrawingAttributesCore method and provide the InkDrawingAttributes for the custom configuration. In this example, we customize the following InkDrawingAttributes:
- PenTip is set to PenTipShape.Circle;
- Size is set to a Windows.Foundation.Size of
(strokeWidth, strokeWidth * 20). - Color is set to the SolidColorBrush selected from the palette, or Colors.Black by default.
- PenTipTransform (through Matrix3x2.CreateRotation) is set to rotate the pen tip by 45°.
using System.Numerics;
using Windows.UI;
using Windows.UI.Input.Inking;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
namespace Ink_Basic_InkToolbar
{
class CalligraphicPen : InkToolbarCustomPen
{
public CalligraphicPen()
{
}
protected override InkDrawingAttributes CreateInkDrawingAttributesCore(Brush brush, double strokeWidth)
{
InkDrawingAttributes inkDrawingAttributes = new InkDrawingAttributes();
inkDrawingAttributes.PenTip = PenTipShape.Circle;
inkDrawingAttributes.Size = new Windows.Foundation.Size(strokeWidth, strokeWidth * 20);
SolidColorBrush solidColorBrush = brush as SolidColorBrush;
if (solidColorBrush != null)
{
inkDrawingAttributes.Color = solidColorBrush.Color;
}
else
{
inkDrawingAttributes.Color = Colors.Black;
}
Matrix3x2 matrix = Matrix3x2.CreateRotation(.785f);
inkDrawingAttributes.PenTipTransform = matrix;
return inkDrawingAttributes;
}
}
}
- In markup, we then bind our custom pen class using a {StaticResource} markup extension reference in the CustomPen attribute of the InkToolbarCustomPenButton element (alternatively, you can instantiate the custom pen and assign it to InkToolbarCustomPenButton.CustomPen in code).
You can use the built-in InkToolbarPenConfigurationControl (as shown here) or you can specify a custom InkToolbarPenConfigurationControl definition in the standard InkToolbar pen declaration.
Here's the declaration for the custom pen defined in the previous snippet.
<!-- Set up locally defined resource dictionary. -->
<Page.Resources>
<!-- Add the custom CalligraphicPen to the page resources. -->
<local:CalligraphicPen x:Key="CalligraphicPen" />
<!-- Specify the colors for the palette of the custom pen. -->
<BrushCollection x:Key="CalligraphicPenPalette">
<SolidColorBrush Color="Blue" />
<SolidColorBrush Color="Red" />
</BrushCollection>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
<TextBlock x:Name="Header"
Text="Basic ink sample"
Style="{ThemeResource HeaderTextBlockStyle}"
Margin="10,0,0,0" />
</StackPanel>
<Grid Grid.Row="1">
<Image Source="Assets\StoreLogo.png" />
<InkCanvas x:Name="inkCanvas" />
<InkToolbar x:Name="inkToolbar"
VerticalAlignment="Top"
TargetInkCanvas="{x:Bind inkCanvas}">
<InkToolbarCustomPenButton
CustomPen="{StaticResource CalligraphicPen}"
MinStrokeWidth="1" MaxStrokeWidth="3" SelectedStrokeWidth="2"
Palette="{StaticResource CalligraphicPenPalette}"
SelectedBrushIndex ="1"
ToolTipService.ToolTip="Calligraphic pen">
<SymbolIcon Symbol="{x:Bind CalligraphicPenIcon}"/>
<InkToolbarCustomPenButton.ConfigurationContent>
<InkToolbarPenConfigurationControl />
</InkToolbarCustomPenButton.ConfigurationContent>
</InkToolbarCustomPenButton>
</InkToolbar>
</Grid>
</Grid>
Here's the definition of CalligraphicPenIcon from the MainPage.xaml.cs file of 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_AddCustomPen : Page
{
// Icon for calligraphic pen custom button.
Symbol CalligraphicPenIcon = (Symbol)0xEDFB;
public MainPage_AddCustomPen()
{
this.InitializeComponent();
}
}
}
Remarks
To create an app-defined pen and corresponding button on the InkToolbar, use this class in conjunction with InkToolbarCustomPenButton.
Constructors
InkToolbarCustomPen() InkToolbarCustomPen() InkToolbarCustomPen() InkToolbarCustomPen()
Initializes a new instance of the InkToolbarCustomPen class.
protected : InkToolbarCustomPen()protected InkToolbarCustomPen()Protected Sub New()// This API is not available in Javascript.
- See Also
-
Methods
CreateInkDrawingAttributes(Brush, Double) CreateInkDrawingAttributes(Brush, Double) CreateInkDrawingAttributes(Brush, Double) CreateInkDrawingAttributes(Brush, Double)
Retrieves the InkToolbarCustomPen attributes used for an InkToolbarPenConfigurationControl.
public : InkDrawingAttributes CreateInkDrawingAttributes(Brush brush, double strokeWidth)public InkDrawingAttributes CreateInkDrawingAttributes(Brush brush, Double strokeWidth)Public Function CreateInkDrawingAttributes(brush As Brush, strokeWidth As Double) As InkDrawingAttributes// This API is not available in Javascript.
- strokeWidth
- double Double Double Double
The width of the stroke. The default is 0.
The attributes applied to the InkStroke when it is drawn.
Remarks
When providing a custom pen, it is possible to derive from InkToolbarCustomPen and specify a custom InkToolbarPenConfigurationControl. The derived class overrides the CreateInkDrawingAttributesCore method to change the default InkDrawingAttributes settings.
CreateInkDrawingAttributesCore(Brush, Double) CreateInkDrawingAttributesCore(Brush, Double) CreateInkDrawingAttributesCore(Brush, Double) CreateInkDrawingAttributesCore(Brush, Double)
When overridden in a derived class, retrieves an InkDrawingAttributes object used to specify the ConfigurationContent for an InkToolbarCustomPen.
This method is not called by application code.
protected : virtual InkDrawingAttributes CreateInkDrawingAttributesCore(Brush brush, double strokeWidth)protected virtual InkDrawingAttributes CreateInkDrawingAttributesCore(Brush brush, Double strokeWidth)Protected Overridable Function CreateInkDrawingAttributesCore(brush As Brush, strokeWidth As Double) As InkDrawingAttributes// This API is not available in Javascript.
- strokeWidth
- double Double Double Double
The width of the stroke. The default is 0.
The attributes applied to the InkStroke when it is drawn.
Remarks
An InkToolbarCustomPenButton can reuse the standard InkToolbarPenConfigurationControl object to configure an optional settings flyout for the custom pen. An "extension glyph" is displayed on the button to indicate the existence of the flyout.
Derive from InkToolbarCustomPen and specify a custom InkToolbarPenConfigurationControl. Override the CreateInkDrawingAttributesCore method to change the default InkDrawingAttributes settings.
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
- DependencyObject DependencyObject DependencyObject DependencyObject
- Ink sample (JavaScript)
- Get Started Tutorial: Support ink in your UWP app
- Coloring book sample