2

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

Justin XL
  • 38,763
  • 7
  • 88
  • 133
Vincent
  • 3,124
  • 3
  • 21
  • 40
  • Your code should work. Where do you call it? – Justin XL Aug 19 '17 at 06:29
  • @JustinXL in the InkToolbarBallpointPenButton click event. ie. when I click the ballpointpen button, it should use my color. – Vincent Aug 19 '17 at 07:52
  • It should work. Please show the full source in your click handler. – Justin XL Aug 19 '17 at 08:12
  • @JustinXL private void xxx_Click(object sender, RoutedEventArgs e) { if(bUserDefinedColor) { InkDrawingAttributes drawingAttributes = inkCanvas.InkPresenter.CopyDefaultDrawingAttributes(); drawingAttributes.Color = colorSelected; inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes); } } – Vincent Aug 19 '17 at 08:39
  • bUserDefinedColor is ture – Vincent Aug 19 '17 at 08:40
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/152321/discussion-between-vincent-and-justin-xl). – Vincent Aug 19 '17 at 09:10

1 Answers1

3

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!

Justin XL
  • 38,763
  • 7
  • 88
  • 133
  • 1
    Wow, good idea. Thanks, Justin. But I still wonder why UpdateDefaultDrawingAttributes not working... – Vincent Aug 19 '17 at 16:15
  • 1
    It won't work until you open the color popup of the ballpoint pen and this is by design. With your original code, try picking a color from your color picker, hit "OK"; click on the ballponit pen to select it; click on the ballpoint pen AGAIN to open the color popup; click anywhere to dismiss the popup; draw anything. This time, you will see your specified color show up on the canvas. – Justin XL Aug 19 '17 at 18:32