Практическое руководство. Привязка данных к InkCanvas

Пример

Следующий пример демонстрирует способ привязки Strokes свойство InkCanvas в другой 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>

Следующий пример демонстрирует способ привязки DefaultDrawingAttributes свойства к источнику данных.

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

В следующем примере объявляется два InkCanvas объектов в XAML и устанавливается привязка данных между ними и другими источниками данных. Первый InkCanvas, который называется ic, привязан к двум источникам данных. EditingMode И DefaultDrawingAttributes свойства ic привязаны к ListBox объекты, которые в свою очередь привязывается к массивам, определенным в XAML. EditingMode, DefaultDrawingAttributes, И Strokes второго InkCanvas привязаны к первому 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>