How to: Add Custom Data to Ink Data

  • Article

You can add custom data to ink that will be saved when the ink is saved as ink serialized format (ISF). You can save the custom data to the DrawingAttributes, the StrokeCollection, or the Stroke. Being able to save custom data on three objects gives you the ability to decide the best place to save the data. All three classes use similar methods to store and access custom data.

Only the following types can be saved as custom data:

Example

The following example demonstrates how to add and retrieve custom data from a StrokeCollection.

Guid timestamp = new Guid("12345678-9012-3456-7890-123456789012");

// Add a timestamp to the StrokeCollection.
private void AddTimestamp()
{

    inkCanvas1.Strokes.AddPropertyData(timestamp, DateTime.Now);
}

// Get the timestamp of the StrokeCollection.
private void GetTimestamp()
{

    if (inkCanvas1.Strokes.ContainsPropertyData(timestamp))
    {
        object date = inkCanvas1.Strokes.GetPropertyData(timestamp);

        if (date is DateTime)
        {
            MessageBox.Show("This StrokeCollection's timestamp is " +
                ((DateTime)date).ToString());
        }
    }
    else
    {
        MessageBox.Show(
            "The StrokeCollection does not have a timestamp.");
    }
}

Private timestamp As New Guid("12345678-9012-3456-7890-123456789012")


' Add a timestamp to the StrokeCollection.
Private Sub AddTimestamp() 
    
    inkCanvas1.Strokes.AddPropertyData(timestamp, DateTime.Now)

End Sub 'AddTimestamp


' Get the timestamp of the StrokeCollection.
Private Sub GetTimestamp() 
    
    If inkCanvas1.Strokes.ContainsPropertyData(timestamp) Then
        Dim [date] As Object = inkCanvas1.Strokes.GetPropertyData(timestamp)
        
        If TypeOf [date] Is DateTime Then
            MessageBox.Show("This StrokeCollection's timestamp is " + CType([date], DateTime).ToString())
        End If
    Else
        MessageBox.Show("The StrokeCollection does not have a timestamp.")
    End If

End Sub 'GetTimestamp

The following example creates an application that displays an InkCanvas and two buttons. The button, switchAuthor, enables two pens to be used by two different authors. The button changePenColors changes the color of each stroke on the InkCanvas according to the author. The application defines two DrawingAttributes objects and adds a custom property to each one that indicates which author drew the Stroke. When the user clicks changePenColors, the application changes the appearance of the stroke according to the value of the custom property.

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Adding Custom Data to Ink" Height="500" Width="700"
    >
  <DockPanel Name="root">

    <StackPanel  Background="DarkSlateBlue">
      <Button Name="switchAuthor" Click="switchAuthor_click" >
        Switch to student's pen 
      </Button>
      <Button Name="changePenColors" Click="changeColor_click" >
        Change the color of the pen ink
      </Button>
    </StackPanel>
    <InkCanvas Name="inkCanvas1">
    </InkCanvas>
  </DockPanel>
</Window>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Ink;

/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>

public partial class Window1 : Window
{
    Guid authorGuid = new Guid("12345678-9012-3456-7890-123456789012");
    DrawingAttributes teachersDA = new DrawingAttributes();
    DrawingAttributes studentsDA = new DrawingAttributes();
    string teacher = "teacher";
    string student = "student";
    bool useStudentPen = false;

    public Window1()
    {
        InitializeComponent();

        teachersDA.Color = Colors.Red;
        teachersDA.Width = 5;
        teachersDA.Height = 5;
        teachersDA.AddPropertyData(authorGuid, teacher);

        studentsDA.Color = Colors.Blue;
        studentsDA.Width = 5;
        studentsDA.Height = 5;
        studentsDA.AddPropertyData(authorGuid, student);

        inkCanvas1.DefaultDrawingAttributes = teachersDA;
    }

    // Switch between using the 'pen' DrawingAttributes and the 
    // 'highlighter' DrawingAttributes.
    void switchAuthor_click(Object sender, RoutedEventArgs e)
    {
        useStudentPen = !useStudentPen;

        if (useStudentPen)
        {
            switchAuthor.Content = "Use teacher's pen";
            inkCanvas1.DefaultDrawingAttributes = studentsDA;
        }
        else
        {
            switchAuthor.Content = "Use student's pen";
            inkCanvas1.DefaultDrawingAttributes = teachersDA;

        }
    }

    // Change the color of the ink that on the InkCanvas that used the pen.
    void changeColor_click(Object sender, RoutedEventArgs e)
    {
        foreach (Stroke s in inkCanvas1.Strokes)
        {
            if (s.DrawingAttributes.ContainsPropertyData(authorGuid))
            {
                object data = s.DrawingAttributes.GetPropertyData(authorGuid);

                if ((data is string) && ((string)data == teacher))
                {
                    s.DrawingAttributes.Color = Colors.Black;
                }
                if ((data is string) && ((string)data == student))
                {
                    s.DrawingAttributes.Color = Colors.Green;
                }
            }
        }
    }
}

Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Windows.Shapes
Imports System.Windows.Ink


'/ <summary>
'/ Interaction logic for Window1.xaml
'/ </summary>

Partial Class Window1
    Inherits Window '

    Private authorGuid As New Guid("12345678-9012-3456-7890-123456789012")
    Private teachersDA As New DrawingAttributes()
    Private studentsDA As New DrawingAttributes()
    Private teacher As String = "teacher"
    Private student As String = "student"
    Private useStudentPen As Boolean = False


    Public Sub New()
        InitializeComponent()

        teachersDA.Color = Colors.Red
        teachersDA.Width = 5
        teachersDA.Height = 5
        teachersDA.AddPropertyData(authorGuid, teacher)

        studentsDA.Color = Colors.Blue
        studentsDA.Width = 5
        studentsDA.Height = 5
        studentsDA.AddPropertyData(authorGuid, student)

        inkCanvas1.DefaultDrawingAttributes = teachersDA

    End Sub 'New


    ' Switch between using the 'pen' DrawingAttributes and the 
    ' 'highlighter' DrawingAttributes.
    Sub switchAuthor_click(ByVal sender As [Object], ByVal e As RoutedEventArgs)
        useStudentPen = Not useStudentPen

        If useStudentPen Then
            switchAuthor.Content = "Use teacher's pen"
            inkCanvas1.DefaultDrawingAttributes = studentsDA
        Else
            switchAuthor.Content = "Use student's pen"
            inkCanvas1.DefaultDrawingAttributes = teachersDA
        End If

    End Sub 'switchAuthor_click


    ' Change the color of the ink that on the InkCanvas that used the pen.
    Sub changeColor_click(ByVal sender As [Object], ByVal e As RoutedEventArgs)
        Dim s As Stroke
        For Each s In inkCanvas1.Strokes
            If s.DrawingAttributes.ContainsPropertyData(authorGuid) Then
                Dim data As Object = s.DrawingAttributes.GetPropertyData(authorGuid)

                If TypeOf data Is String AndAlso CStr(data) = teacher Then
                    s.DrawingAttributes.Color = Colors.Black
                End If
                If TypeOf data Is String AndAlso CStr(data) = student Then
                    s.DrawingAttributes.Color = Colors.Green
                End If
            End If
        Next s

    End Sub 'changeColor_click
End Class 'Window1