How to set inktoolbar's pen color

Question

As the code shown, I add a ballpointpen, and it support 30 colors, but not enough.

I got colorSelected(Color type) using some other ways, not discuss here. Now I want to click ballpointPen, using my colorSelected to draw. How? Thanks.

<Grid>
        <InkToolbar TargetInkCanvas="{x:Bind inkCanvas}" InitialControls="AllExceptPens" VerticalAlignment="Top">
            <InkToolbarBallpointPenButton x:Name="ballpointPen" Click="xxx_Click"/>
            <InkToolbarCustomToolButton x:Name="toolButtonColorPicker" Click="ToolButton_ColorPicker">
                <Image Height="20" Width="20" Source="ms-appx:///Assets/Palette.png"/>
                <ToolTipService.ToolTip>
                    <ToolTip Content="ColorPicker"/>
                </ToolTipService.ToolTip>
            </InkToolbarCustomToolButton>
        </InkToolbar>
        <InkCanvas x:Name="inkCanvas" Margin="0,48,0,0"/>
    </Grid>

The code below seems not working...

private void xxx_Click(object sender, RoutedEventArgs e)
        {
            if(bUserDefinedColor)
            {
                InkDrawingAttributes drawingAttributes = inkCanvas.InkPresenter.CopyDefaultDrawingAttributes();
                drawingAttributes.Color = colorSelected;
                inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);
            }
        }

by the way, I upload the test project to GitHub https://github.com/hupo376787/Test.git

Answer 1

Here is a better solution to your problem, without the need of calling UpdateDefaultDrawingAttributes directly.

What I would do is, whenever the user selects a new color from your ColorPicker and hits OK, add this color to the Palette of the InkToolbarBallpointPenButton, and then set the SelectedBrushIndex to the index of the newly created color.

In way you can completely remove your xxx_Click handler, and replace what's in LeftClick with the following

cpx.LeftClick += (ss, ee) =>
{
    bUserDefinedColor = true;
    colorSelected = cpx.pickerColor;

    ballpointPen.Palette.Add(new SolidColorBrush(colorSelected));
    ballpointPen.SelectedBrushIndex = ballpointPen.Palette.Count - 1;
};

This is it! You will see the selected color visual on the pen icon automatically reflects the new color, which gives a great user experience.

---

Here are two more things you might want to do to further enhance the UX.

1. Cache the added colors and manually add them back to the Palette at app startup so next time when the user opens the app, they are still available.
2. Instead of adding another icon to display the ColorPicker, try putting it inside the color popup of the InkToolbarBallpointPenButton so all color related things are in the same place. The control that sits inside this popup is called InkToolbarPenConfigurationControl. You should be able to locate its style (see path below) and add your ColorPicker to it.

C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.xxxxx.0\Generic\generic.xaml

Hope this helps!