2 out of 3 rated this helpful - Rate this topic

InkCanvas Class

Defines an area that receives and displays ink strokes.

Namespace:  System.Windows.Controls
Assembly:  PresentationFramework (in PresentationFramework.dll)
XMLNS for XAML: http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation
[ContentPropertyAttribute("Children")]
public class InkCanvas : FrameworkElement, IAddChild
<InkCanvas>
  Children
</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.

InkCanvas inkCanvas1 = new InkCanvas();
DrawingAttributes inkDA;
DrawingAttributes highlighterDA;
bool useHighlighter = 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 void WindowLoaded(object sender, EventArgs e)
{
    inkCanvas1.Background = Brushes.DarkSlateBlue;
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.SpringGreen;

    root.Children.Add(inkCanvas1);

    // Set up the DrawingAttributes for the pen.
    inkDA = new DrawingAttributes();
    inkDA.Color = Colors.SpringGreen;
    inkDA.Height = 5;
    inkDA.Width = 5;
    inkDA.FitToCurve = false;

    // Set up the DrawingAttributes for the highlighter.
    highlighterDA = new DrawingAttributes();
    highlighterDA.Color = Colors.Orchid;
    highlighterDA.IsHighlighter = true;
    highlighterDA.IgnorePressure = true;
    highlighterDA.StylusTip = StylusTip.Rectangle;
    highlighterDA.Height = 30;
    highlighterDA.Width = 10;

    inkCanvas1.DefaultDrawingAttributes = inkDA;
}

// 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. 
void SwitchHighlighter_Click(Object sender, RoutedEventArgs e)
{
    useHighlighter = !useHighlighter;

    if (useHighlighter)
    {
        switchHighlighter.Content = "Use Pen";
        inkCanvas1.DefaultDrawingAttributes = highlighterDA;
    }
    else
    {
        switchHighlighter.Content = "Use Highlighter";
        inkCanvas1.DefaultDrawingAttributes = inkDA;

    }
}

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.

<Canvas>
  <Canvas.Resources>
    <!--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"/>
    </x:Array>

    <!--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"/>
    </x:Array>

    <!--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}"/>
        </Border.Background>
      </Border>
    </DataTemplate>
  </Canvas.Resources>

  <!--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"
             DefaultDrawingAttributes="{Binding 
                  ElementName=lbDrawingAttributes, Path=SelectedItem}"
             EditingMode=
                  "{Binding ElementName=lbEditingMode, Path=SelectedItem}"
             >
  </InkCanvas>

  <!--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}" 
             DefaultDrawingAttributes="{Binding 
                  ElementName=ic, Path=DefaultDrawingAttributes}" 
             EditingMode="{Binding ElementName=ic, Path=EditingMode}">

    <InkCanvas.LayoutTransform>
      <ScaleTransform ScaleX="-1" ScaleY="1" />
    </InkCanvas.LayoutTransform>

  </InkCanvas>

  <!--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}" />

</Canvas>
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
Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.