Adding a pen gallery was simple at first but I decided to add some more to the custom tool button. In my initial attempt I would initialize a new InktoolbarCustomPenButton and set its properties in code then add it to the Inktoolbar.

While this did work it left the issue of having two pens of the same type and color but different size and not being able to differentiate between them. So I decided to make a custom XAML control for custom pens, custom highlighters, and custom pens.

I started with a user control, but then just made a custom control of type InkToolbarCustomPenButton. I could customize the content of each of these controls to match the default inktoolbar buttons. To find these symbols I used the awesome app Character Map UWP by Edi Wang (Store Link HERE). I needed the tool outline, the tip and top color, and the background fill.

I bound the fill of the tip and top color to the SelectedBrush property of the InkToolbarCustomPenButton. Then I bound the background fill to the background of the InkToolbarCustomPenButton. This is so when the size shape is big enough it won’t make the tool icon look transparent.

For the size representation, pen and pencil use an ellipse and highlighter uses a rectangle which the fill is bound to the SelectedBrush property and the height and width both bound to SelectedStrokeWidth. With oneway binding the shape would change color and size as the user adjusted the pen options.

Now when the users clicks “New Pen” an instance of my custom control is created and added to the inktoolbar. Simple. Users could add as many pens as they wish. They are in a scrollviewer so they can all be seen with a quick flick.

Next is the challenge of saving and loading this custom gallery each time the app loads.

Joe

In UWP there is a control called the InkToolbar. This is a control which binds to an InkCanvas and is an easy way for users to change the type, size, and color of their inking. Ink Calendar has used this control from day one but now it is getting some attention.

The UWP version of OneNote has a pen gallery instead of the standard InkToolbar control. This enables users to set several pens and easily switch between them, without tediously changing each attribute every time. I wanted to bring the same experience to Ink Calendar because I found myself using a only few different pens while planning my time. One was a medium thickness gray pen for crossing out days. One was a thin blue pen for writing down appointments. And finally one was a highlighter for blocking out chunks of days.

There where four key elements to making my custom pen gallery in the InkToolbar.

1. Custom Pens
2. Custom Pen Button
3. Saving the gallery
4. Editing the gallery

To make this control I had to create custom pens for the Ballpoint Pen, Highlighter, and Pencil. You cannot add more than one standard tool to the InkToolbar, you must make them InkToolbarCustomToolButtons. Each type of InkToolbarCustomToolButton requires its own InkToolbarCustomPen to define how the ink will display when that tool is active.

protected override InkDrawingAttributes CreateInkDrawingAttributesCore(Brush brush, double strokeWidth)
{
      InkDrawingAttributes inkDrawingAttributes = new InkDrawingAttributes
      {
          PenTip = PenTipShape.Circle
      };
      SolidColorBrush solidColorBrush = brush as SolidColorBrush;
      inkDrawingAttributes.Color = solidColorBrush?.Color ?? Colors.Red;
      inkDrawingAttributes.DrawAsHighlighter = false;
      inkDrawingAttributes.Size = new Windows.Foundation.Size(strokeWidth * 0.5, strokeWidth * 0.5);
      return inkDrawingAttributes;
}

I made three custom pens: ballpoint pen, highlighter, and pencil. I could have chosen to make the highlighter tip shape round instead of rectangular like the standard InkToolbar highlighter, but I decided to keep it consistent to how it has been. I could still add a new pen like a highlighter but more of a marker with a round tip.

Once I had all the custom pens I needed I started working on the InkToolbarCustomToolButtons. These controls inherit from InkToolbarCustomPenButton which enables them to be added into an InkToolbar. These buttons started simple but I made them a little more complex than the standard.

Up next… the InkToolbarCustomPenButton XAML.

Joe