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
Windows 10 requirements
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.

  1. 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:

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;
        }
    }
}
  1. 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()

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.
Parameters
brush
Brush Brush Brush Brush

The brush used to draw the stroke. The default is 0 (Black ).

strokeWidth
double Double Double Double

The width of the stroke. The default is 0.

Returns

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.

See Also

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.
Parameters
brush
Brush Brush Brush Brush

The brush used to draw the stroke. The default is 0 (Black ).

strokeWidth
double Double Double Double

The width of the stroke. The default is 0.

Returns

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

See Also