DatabindInkCanvas.md

Data binding anInkCanvascontrol

The FamilyNotes app implements the notes through a partnership between StickyNote, which provides the data for a note, and Note.xaml which displays the note's contents.

The note's inking capability is provided by a InkCanvas control. To bind ink data from XAML you bind to the InkStrokeContainer on the InkCanvas. Unfortunately, this property is not available for binding from XAML. BindableInkCanvas.cs adds this capability.

BindableInkCanvas derives from InkCanvas and adds a Strokes dependency property:

public class BindableInkCanvas : InkCanvas
{
    public InkStrokeContainer Strokes
    {
        get { return (InkStrokeContainer)GetValue(StrokesProperty); }
        set { SetValue(StrokesProperty, value); }
    }

    public static readonly DependencyProperty StrokesProperty = DependencyProperty.RegisterAttached(
         "Strokes",
         typeof(InkStrokeContainer),
         typeof(BindableInkCanvas),
         new PropertyMetadata(null, StrokesChanged)
       );

    private static void StrokesChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var instance = d as BindableInkCanvas;
        if (instance != null)
        {
            instance.InkPresenter.StrokeContainer = instance.Strokes;
        }
    }
}

With the Strokes dependency property we can bind the InkCanvas's InkPresenter.StrokeContainer from XAML:

 <local:BindableInkCanvas
    x:Name="containerForInk"
    Strokes="{Binding Path=Ink, Mode=TwoWay}"

The FamilyNotes app uses this binding to connect the ink data stored in the StickyNote to the InkCanvas that will display it.