Procedura: Data binding con un InkCanvasHow to: Data Bind to an InkCanvas

EsempioExample

Nell'esempio seguente viene illustrato come associare il Strokes proprietà di un InkCanvas a un altro InkCanvas.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>

Nell'esempio seguente viene illustrato come associare il DefaultDrawingAttributes proprietà a un'origine dati.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}" />

Nell'esempio seguente vengono dichiarati due InkCanvas degli oggetti in XAML e stabilisce l'associazione dati tra queste e altre origini dati.The following example declares two InkCanvas objects in XAML and establishes data binding between them and other data sources. Il primo InkCanvas, denominato ic, è associata a due origini dati.The first InkCanvas, called ic, is bound to two data sources. Il EditingMode e DefaultDrawingAttributes proprietà ic sono associati a ListBox oggetti, che a sua volta vengono associati alle matrici definite nel codice XAML.The EditingMode and DefaultDrawingAttributes properties on ic are bound to ListBox objects, which are in turn bound to arrays defined in the XAML. Il EditingMode, DefaultDrawingAttributes, e Strokes le proprietà del secondo InkCanvas sono associati al primo InkCanvas, ic.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>