InkCanvas Class

Defines an area that receives and displays ink strokes.

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

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

/** @attribute ContentPropertyAttribute("Children") */ 
public class InkCanvas extends FrameworkElement implements IAddChild
public class InkCanvas extends FrameworkElement implements IAddChild

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 from the stylus or a mouse. The created strokes are represented as Stroke objects, and can be manipulated programmatically and by user input. The InkCanvas enables users to select and modify or delete an existing Stroke.

The InkCanvas can be bound 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 bind other properties, such as DefaultDrawingAttributes and EditingMode, to other data sources as well.

The following example demonstrates how to simulate using a pen and a highlighter on the same InkCanvas. The example assumes 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 event handler defined in this example.

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 .
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, ic.

    <!--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 98, Windows Server 2000 SP4, Windows CE, Windows Millennium Edition, Windows Mobile for Pocket PC, Windows Mobile for Smartphone, Windows Server 2003, Windows XP Media Center Edition, Windows XP Professional x64 Edition, Windows XP SP2, Windows XP Starter Edition

The Microsoft .NET Framework 3.0 is supported on Windows Vista, Microsoft Windows XP SP2, and Windows Server 2003 SP1.

.NET Framework

Supported in: 3.0

Community Additions