This documentation is archived and is not being maintained.

InkCanvas Class

Defines an area that receives and displays ink strokes.

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

public ref class InkCanvas : public FrameworkElement, 

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.

No code example is currently available or this language may not be supported.

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