Customizing the InkToolbar in Universal Windows App

Windows Anniversary update has brought a lot of new changes to the developers one among them is Ink Canvas. This is a very good and quite easy control which allows the user to draw the inking in the apps. In our previous post we have seen how to create the InkCanvas and also we have seen how to add the InkToolbar. Now we will see how to customize the InkToolbar.

First lets try to remove the default white background provided by the InkToolbar. We will set the application background color as the InkToolbar’s Background so that the toolbar will sync with the app. In order to do this, we need to set the following styles in the App.xaml.


<Application.Resources>

<ResourceDictionary>

<ResourceDictionary.ThemeDictionaries>

<ResourceDictionary x:Key="Default">

<SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="LightGray"/>

<SolidColorBrush x:Key="InkToolbarButtonBackgroundThemeBrush" Color="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>

<SolidColorBrush x:Key="InkToolbarButtonSelectedBackgroundThemeBrush" Color="{Binding SystemBaseLowColor}"/>

</ResourceDictionary>

</ResourceDictionary.ThemeDictionaries>

</ResourceDictionary>

</Application.Resources>

Now Let’s customize the controls provided by the InkToolbar. We have a property called InitialControls which specified what all the controls that need to be added to the ink toolbar.

In this sample I tried removing all the pens provided by default by the ink toolbar. To achieve that we need to set the InitialControls=”AllExceptPens”.

InitialControls takes four values which specifies what controls need to be added.

Once the pens are removed from the InkToolbar the toolbar looks like the below.

Now we will try to add only one control to the toolbar like Pencil control. To achieve this, we need to add the InkToolbarPencilButton to the InkToolbar.


<InkToolbar TargetInkCanvas="{x:Bind inkcanvas}" VerticalAlignment="Top" InitialControls="AllExceptPens">
<InkToolbarPencilButton/>
</InkToolbar>

Thats it now only the pencil inking option is provided by the ink toolbar. The below screen shows how does the toolbar looks.

Finally Let’s see how to change the default color provided by the pencil button in the InkToolbar.

Create a style with the target type as InkToolbarPencilButton and set the required SelectedBrushIndex and SelectedStrokeWidth. Now this will be the default color and stroke width for the pencil ink.


<Style TargetType="InkToolbarPencilButton">

<Setter Property="SelectedBrushIndex" Value="7"/>

<Setter Property="SelectedStrokeWidth" Value="14"/>

</Style>

Thats it. we have now customized the default tools provided by the InkToolbar.