The Custom Pen Gallery: part 3

Adding a new pen

Saving the pen gallery was not very complicated, but there were some unfortunate complexities. The major complexity was how to initiate a change to the pen gallery. The standard UWP InkToolbar does not provide any events relevant to if or when the user changes any of the tool’s drawing attributes.

When to save

Obviously Ink Calendar should save the Pen Gallery when the users adds a new pen, deletes a pen, or moves the location of a pen. However it is also important that changes to the pen’s properties get saved when they are changed.

The way I decided to trigger this save was on ink saving. This means when the user navigates or inks the SaveInk method runs and that would trigger the SaveCustomPens method to fire.

To keep Ink Calendar from saving the custom pen file every time ink was saved the beginning of the SaveCustomPens method checks to make sure there are changes to save. If there are changes then the current InkToolbar is converted into an array and saved to a .XML file.

Convert the InkToolbar into an array

Before the pen gallery can be saved to a file it is converted to a simple List<string[]>. This is done by iterating through each button and saving an entry in a new string array for the type of pen (ballpoint, highlighter, or pencil), the selected brush index, and the stroke width, and a Pen ID.

There is another method which takes the data from this type of array and adds InkToolbarCustomPen to the InkToolbar.

Saving the List to .XML

The next step was simple, pass the List<string[]> to a method which saves it to the app’s directory. DotNET has some very easy APIs for serializing data and saving it to a file.

public static async Task SaveCustomButtons(List<string[]> listToSave)
    StorageFile file = await ApplicationData.Current.LocalFolder.CreateFileAsync("CustomToolButtons.xml", CreationCollisionOption.ReplaceExisting);
    XmlSerializer serializer = new XmlSerializer(typeof(List<string[]>));
    using (Stream fs = await file.OpenStreamForWriteAsync())
        TextWriter textWriter = new StreamWriter(fs);
        serializer.Serialize(textWriter, listToSave);

This is a sample method of how I save data throughout Ink Calendar. Right now the data generated by the app is fairly simple and low volume. Eventually Ink Calendar could grow to a point where it needs a SQLite database but for now .XML does the trick.

Thanks for reading and let me know if you have any questions or comments. Next I’ll talk about how I enabled the pen gallery to be edited on all form factors.



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.


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.


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.



Progress report on 1.11

I am making good progress on version 1.11 of Ink Calendar. This update will bring a few key new features I’ve been eager to release.

  1. Better Mobile UX
  2. Jumplists
  3. Calendar Events on Week View
Jump Lists
Jump Lists
New Mobile View
New Mobile View

So far all of these features are working. None of them are perfect but the majority of the feature is working well. I’ll keep refining the update and hopefully release soon.

Thanks again for using Ink Calendar!



Progress with 1.7

Update 1.7 is coming along nicely. I have added lots of changes under the hood and I have discovered the source of the crashing when sharing, saving, and printing on mobile.

The changes that I have made under the hood are not tied in so they won’t affect normal app usage. I am still experimenting with how to arrange and organize ink data with relation to the days. It is very simple to associate a month with an ink file, but when you start to move to weeks, or work weeks, or arbitrary date spans it becomes much more tricky.

The source of the crashing of share, print, and save was a result of low ram devices. I tested saving an ink file on device with 512MB, 1GB, 2GB, and 3GB. I’d been doing all of my mobile testing on my Lumia 830 which only has 1GB of RAM and I was experiencing the crashing. When I downloaded a few more mobile emulators I discovered it was related to the available RAM to Ink Calendar.

To remedy this for now I have added a line which checks for the available amount of RAM and enables or disables the buttons accordingly. Long term I would like to find a way to share, print, and save more efficiently and enable those features on more devices, but for now this will have to work.

Thanks again for using Ink Calendar! If you haven’t rated/reviewed Ink Calendar in the app store I would really appreciate it!


What’s next for 1.7

In the next release I plan to focus under the hood. This means improving the way I organize, save, and load data. With more organized data I’ll be able to manage more of it!

For example adding a week view is in the plan. Things that makes that strange. Weeks are not as organized as Months are. Their method of being organized is not as clean and consistent.

This means I’ll need to come up with a system of organizing weeks, their days, and their data. This should not be hard, but it is work that takes time.

In addition to hidden improvements I plan on going after some bugs which prevented some features from being available on mobile. Specifically the share, save, and print capabilities. When I was testing these on mobile without fail they would crash the app every time with no error. This makes debugging harder. I’ll be looking for new ways to tackle and fix this/these bugs in this update.

Thanks for using Ink Calendar! Feel free to contact me on twitter (@TheJoeFin) or email (,


Version 1.6.3 is on the way!

This week I’ve been working on adding some intelligence to Ink Calendar. After selecting some ink you can add an appointment to the calendar. Using the Windows Ink APIs the ink will be converted into text and used to build the event.

The simplest implementation of this involves adding the text as the subject of the event on the day the ink is centered. More advanced implementation involves looking for time and using that to set the start time of the event. Furthermore if the ink spans several days the even should span those days as well.


This is a first implementation of this technique. Let me know what you think, how well does it work for you? Does it read your ink or not?

As always, thanks for using Ink calendar!



#1 Requested Feature is right around the corner

Easily the number one requested feature for Ink Calendar is existing Google and Outlook calendar integration. Soon with version 1.6 that will be possible.

I thought adding the calendars would involve lots of extra authentication and a refactoring of the codebase. However, as it turns out Windows 10 has an API for that. I can request a list of appointments from Windows and all the added calendars will stream in.

The feature works by getting the calendar data from the built-in calendar application. If you have added a calendar there then it gets pulled into Ink Calendar. I’ll be adding more granular control around which calendars you want to include, but I did not want to delay this highly requested feature. I’m excited to roll this feature out soon. Let me know what you think!

Thanks again for using Ink Calendar,


Delays in 1.5

Version 1.5 has been in the works for a few weeks now. It will bring a few new features and some user requests. None of these features on their own a big, but they continue to fill out the applications features.

This version has taken me longer than I had hoped for a few reasons. First I have been busy and not able to work on the app during the evenings. Second there have been a few tasks which have taken me a long time to understand and implement. One involving background tasks, the other was related to graphics work I did which always takes me a long time.

Hopefully I’ll have version 1.5 submitted to the store soon. If I cannot get the background portion working soon I will release the update without that portion, then add it in when I get it working.

Thanks for using Ink Calendar,