The Custom Pen Gallery: part 2

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.

17 Resize Pens

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

The Custom Pen Gallery: Part 1

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

Summer ’18 Update

Summer has been a busy time. I have been working on big changes to Ink Calendar. Mostly these changes have been in the way new calendars are generated. I moved a lot of the code around and have been working on getting it functioning the way it should.

The reason I’m making these big changes to Ink Calendar are to enable swiping between views. I’ve been breaking all the different UI elements into their own User Controls and abstracting the code which generates a view for the given date range.

So far it has been very successful but I still need to do a lot of work to optimize the experience. I don’t want to push an update which slows down the app while delivering no new functionality.

In addition to these architecture changes I’m working on little fit and finish elements like scaling the print out to fit, more keyboard shortcuts, and other suggestions from users.

Thanks for using Ink Calendar and if you have any questions or suggestions please let me know.

 

-Joe

Organized Settings and Appointments On This Day changes in 1.15

Appointments On Changes in 1.15

Two areas of focus for 1.15 have been organizing the app settings and improving the ‘Appointments on this day’ dialog. Organizing the settings and changing how it is displayed gives space to add more features and give users the ability to customize their experience.

Settings in Pivot for 1.15
Settings in Pivot for 1.15

The changes to the ‘Appointments on this day’ dialog are focused on adding more appointments without a pen. This makes Ink Calendar span the usage scenarios more gracefully from pen & touch to keyboard & mouse.

As always there are small improvements and bug fixes wherever I can find them.

Thanks for using Ink Calendar!

-Joe

Adjustments and Improvements Galore in 1.14.2

After a long delay Ink Calendar 1.14.2 has been submitted and accepted to the store. This update brings lots of little changes to Ink Calendar which should improve the experience for all users. The change list is long with this update:

  • Tap to select a block of ink.
  • Current day is highlighted in the Year View.
  • The different view buttons are no longer in a menu when the window is wide enough.
  • Appointment time recognition has been improved.
  • Improved the look of the appointments on Month and Week view.
  • Free or tentative appointments are now transparent with colored text.
  • More space on mobile landscape orientation.
  • Bug fixes.

Let me know what you think!

On another note, I am working on updating my art for the Microsoft Store page. If you are an artist and use Ink Calendar please reach out I’d love to feature your art!

-Joe