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

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()

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.
Value
UIElement UIElement UIElement UIElement

The contents of the flyout. The default is null.

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.

See Also

ConfigurationContentProperty ConfigurationContentProperty ConfigurationContentProperty ConfigurationContentProperty

CustomPen CustomPen CustomPen CustomPen

CustomPenProperty CustomPenProperty CustomPenProperty CustomPenProperty

See Also