InkCanvas Class
Collapse the table of content
Expand the table of content

InkCanvas Class

Defines an area that receives and displays ink strokes.

Namespace:  System.Windows.Controls
Assembly:  PresentationFramework (in PresentationFramework.dll)

<ContentPropertyAttribute("Children")> _
Public Class InkCanvas _
	Inherits FrameworkElement _
	Implements IAddChild
Dim instance As InkCanvas

An InkCanvas is an element that can be used to receive and display ink input. This is commonly done through the use of a stylus, which interacts with a digitizer to produce ink strokes using a stylus or a mouse. The created strokes are represented as Stroke objects, and can be manipulated either programmatically or based on user input. The InkCanvas enables users to modify or delete an existing Stroke.

The InkCanvas can be bound to a data source. For example, you can bind the Strokes property to: a base-64, encoded string that contains ink data in Ink Serialized format (ISF); or even to the Strokes property of another InkCanvas. You can also bind properties, such as DefaultDrawingAttributes and EditingMode, to other data sources.

The following example demonstrates how to simulate the use of both a pen and a highlighter on the same InkCanvas. The example assumes that the root element in the markup language (XAML) file is a DockPanel called root. It also assumes that there is a Button called switchHighlighter and that both the Click and Loaded events are connected to the example's event handler.

Private WithEvents inkCanvas1 As New InkCanvas()
Private inkDA As DrawingAttributes
Private highlighterDA As DrawingAttributes
Private useHighlighter As Boolean = False 

' Add an InkCanvas to the window, and allow the user to  
' switch between using a green pen and a purple highlighter  
' on the InkCanvas. 
Private Sub WindowLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)

    inkCanvas1.Background = Brushes.DarkSlateBlue
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.SpringGreen

    ' Add the InkCanvas to the DockPanel, named root.

    ' Set up the DrawingAttributes for the pen.
    inkDA = New DrawingAttributes()
    With inkDA
        .Color = Colors.SpringGreen
        .Height = 5
        .Width = 5
        .FitToCurve = True 
    End With 

    ' Set up the DrawingAttributes for the highlighter.
    highlighterDA = New DrawingAttributes()
    With highlighterDA
        .Color = Colors.Orchid
        .IsHighlighter = True
        .IgnorePressure = True
        .StylusTip = StylusTip.Rectangle
        .Height = 30
        .Width = 10
    End With

    inkCanvas1.DefaultDrawingAttributes = inkDA

End Sub 'WindowLoaded

' Create a button called switchHighlighter and use  
' SwitchHighlighter_Click to handle the Click event.   
' The useHighlighter variable is a boolean that indicates 
' whether the InkCanvas renders ink as a highlighter. 

' Switch between using the 'pen' DrawingAttributes and the  
' 'highlighter' DrawingAttributes when the user clicks on . 
Private Sub SwitchHighlighter_Click(ByVal sender As [Object], ByVal e As RoutedEventArgs)

    useHighlighter = Not useHighlighter

    If useHighlighter Then
        switchHighlighter.Content = "Use Pen"
        inkCanvas1.DefaultDrawingAttributes = highlighterDA

        switchHighlighter.Content = "Use Highlighter"
        inkCanvas1.DefaultDrawingAttributes = inkDA
    End If 

End Sub 'SwitchHighlighter_Click

The following example declares two InkCanvas objects in XAML and establishes data binding between them and other data sources. The first InkCanvas, called ic, is bound to two data sources. The EditingMode and DefaultDrawingAttributes properties on ic are bound to ListBox objects, which are, in turn, bound to arrays defined in the XAML. The EditingMode, DefaultDrawingAttributes, and Strokes properties of the second InkCanvas are bound to the first InkCanvas in the following code.

    <!--Define an array containing the InkEditingMode Values.-->
    <x:Array x:Key="MyEditingModes" x:Type="{x:Type InkCanvasEditingMode}">
      <x:Static Member="InkCanvasEditingMode.Ink"/>
      <x:Static Member="InkCanvasEditingMode.Select"/>
      <x:Static Member="InkCanvasEditingMode.EraseByPoint"/>
      <x:Static Member="InkCanvasEditingMode.EraseByStroke"/>

    <!--Define an array containing some DrawingAttributes.-->
    <x:Array x:Key="MyDrawingAttributes" 
             x:Type="{x:Type DrawingAttributes}">
      <DrawingAttributes Color="Black" FitToCurve="true" 
                         Width="3" Height="3"/>
      <DrawingAttributes Color="Blue" FitToCurve="false" 
                         Width="5" Height="5"/>
      <DrawingAttributes Color="Red" FitToCurve="true" 
                         Width="7" Height="7"/>

    <!--Create a DataTemplate to display the 
        DrawingAttributes shown above-->
    <DataTemplate DataType="{x:Type DrawingAttributes}" >
      <Border Width="80" Height="{Binding Path=Height}">
        <Border.Background >
          <SolidColorBrush Color="{Binding Path=Color}"/>

  <!--Bind the first InkCavas' DefaultDrawingAtributes to a 
      Listbox, called lbDrawingAttributes, and its EditingMode to 
      a ListBox called lbEditingMode.-->
  <InkCanvas Name="ic" Background="LightGray" 
             Canvas.Top="0" Canvas.Left="0" 
             Height="400" Width="200"
                  ElementName=lbDrawingAttributes, Path=SelectedItem}"
                  "{Binding ElementName=lbEditingMode, Path=SelectedItem}"

  <!--Bind the Strokes, DefaultDrawingAtributes, and, EditingMode properties of
      the second InkCavas the first InkCanvas.-->
  <InkCanvas Background="LightBlue"  
             Canvas.Top="0" Canvas.Left="200" 
             Height="400" Width="200" 
             Strokes="{Binding ElementName=ic, Path=Strokes}" 
                  ElementName=ic, Path=DefaultDrawingAttributes}" 
             EditingMode="{Binding ElementName=ic, Path=EditingMode}">

      <ScaleTransform ScaleX="-1" ScaleY="1" />


  <!--Use the array, MyEditingModes, to populate a ListBox-->
  <ListBox Name="lbEditingMode" 
           Canvas.Top="0" Canvas.Left="450" 
           Height="100" Width="100"
           ItemsSource="{StaticResource MyEditingModes}" />

  <!--Use the array, MyDrawingAttributes, to populate a ListBox-->
  <ListBox Name="lbDrawingAttributes" 
           Canvas.Top="150" Canvas.Left="450" 
           Height="100" Width="100"
           ItemsSource="{StaticResource MyDrawingAttributes}" />


Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.

Windows 7, Windows Vista, Windows XP SP2, Windows Server 2008 R2, Windows Server 2008, Windows Server 2003

The .NET Framework and .NET Compact Framework do not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.

.NET Framework

Supported in: 3.5, 3.0

Community Additions

© 2015 Microsoft