How to use WPF Ink Canvas Toolbar


To use it, simply add the InkCanvasControls toolbar to your XAML file and wire it to its associated InkCanvas control elsewhere in the file. Typically both the InkCanvas and toolbar are in the same panel (eg a DockPanel, StackPanel, Grid etc) but this is not mandatory.

The InkCanvasControl toolbar is bound to an associated InkCanvas via its Canvas dependency property, for example ... Canvas="{Binding ElementName=myInkCanvas}"

Following is an example of an InkCanvasControl being docked above its associated InkCanvas.
<Window x:Class="InkCanvasControlsDemo.Window1"
    Title="Window1" Height="300" Width="500">
    <DockPanel LastChildFill="True">
        <ctrl:InkCanvasControls Canvas="{Binding ElementName=inkCanvas}" BarWidth="300" UndoRedoSupport="False" DockPanel.Dock="Top"/>
        <InkCanvas x:Name="inkCanvas"/>

Where the ctrl namespace is defined as: xmlns:ctrl="clr-namespace:InkCanvasControls;assembly=InkCanvasControls"

Which produces a layout similar to this:

When the drawing or highlight tools are selected, a dialog pops up to select the style for the next stroke:

The InkCanvasControl has three dependency properties:
  • BarWidth,
  • UndoRedoSupport and
  • Canvas

Set BarWidth to the size horizontally you would like your toolbar to occupy
Set UndoRedoSupport to True to show undo and redo buttons to the right hand end of the toolbar, default is False
Bind Canvas to the InkCanvas WPF control that your toolbar is associated with. If you have several InkCanvas WPF controls visible simultaneously, you have two options:
  • You can use one InkCanvasControl toolbar for each InkCanvas, placing each adjacent to the InkCanvas they control, or
  • You can have a single InkCanvasControl toolbar and dynamically switch its Canvas property as the InkCanvas controls get focus.

Last edited Jun 11, 2010 at 8:18 PM by revcom, version 19


No comments yet.