Skip to content

Latest commit

 

History

History
143 lines (116 loc) · 8.56 KB

inktoolbarcustompenbutton.md

File metadata and controls

143 lines (116 loc) · 8.56 KB
Raw
-api-id -api-type
T:Windows.UI.Xaml.Controls.InkToolbarCustomPenButton
winrt class

Windows.UI.Xaml.Controls.InkToolbarCustomPenButton

-description

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.

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

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

-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, Windows.UI.Xaml.Controls classes, InkToolbarPenButton, InkToolbarCustomPen, Ink sample (JavaScript), Get Started Tutorial: Support ink in your UWP app, Coloring book sample, Family notes sample

-ignore