Export (0) Print
Expand All

InkCanvas Class

Defines an area that receives and displays ink strokes.

Namespace: System.Windows.Controls
Assembly: PresentationFramework (in presentationframework.dll)
XML Namespace:  http://schemas.microsoft.com/winfx/2006/xaml/presentation

[ContentPropertyAttribute("Children")] 
public class InkCanvas : FrameworkElement, IAddChild
/** @attribute ContentPropertyAttribute("Children") */ 
public class InkCanvas extends FrameworkElement implements IAddChild
ContentPropertyAttribute("Children") 
public class InkCanvas extends FrameworkElement implements 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 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.

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

<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>

System.Object
   System.Windows.Threading.DispatcherObject
     System.Windows.DependencyObject
       System.Windows.Media.Visual
         System.Windows.UIElement
           System.Windows.FrameworkElement
            System.Windows.Controls.InkCanvas

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

ADD
Show:
© 2014 Microsoft