How to: Data Bind to an InkCanvas

Example

The following example demonstrates how to bind the Strokes property of an InkCanvas to another InkCanvas.

<InkCanvas Background="LightGray" 
           Canvas.Top="0" Canvas.Left="0" 
           Height="400" Width="200" Name="ic"/>

<!-- Bind the Strokes of the second InkCavas to the first InkCanvas
     and mirror the strokes along the Y axis.-->
<InkCanvas Background="LightBlue"  
           Canvas.Top="0" Canvas.Left="200" 
           Height="400" Width="200" 
           Strokes="{Binding ElementName=ic, Path=Strokes}">
  <InkCanvas.LayoutTransform>
    <ScaleTransform ScaleX="-1" ScaleY="1" />
  </InkCanvas.LayoutTransform>
</InkCanvas>

The following example demonstrates how to bind the DefaultDrawingAttributes property to a data source.

<Canvas.Resources>
  <!--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 InkCavas' DefaultDrawingAtributes to
    a Listbox, called lbDrawingAttributes.-->
<InkCanvas Name="inkCanvas1" Background="LightGreen" 
           Canvas.Top="400" Canvas.Left="0" 
           Height="400" Width="400"
           DefaultDrawingAttributes="{Binding 
                ElementName=lbDrawingAttributes, Path=SelectedItem}"
           >
</InkCanvas>

<!--Use the array, MyDrawingAttributes, to populate a ListBox-->
<ListBox Name="lbDrawingAttributes" 
         Canvas.Top="400" Canvas.Left="450" 
         Height="100" Width="100"
         ItemsSource="{StaticResource MyDrawingAttributes}" />

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>