#484 – InkCanvas Contains a Collection of Strokes

January 31, 2012 3 Comments

When you draw on an InkCanvas control, you create a series of Stroke objects.  One Stroke is created each time you hold the left mouse button down, drag the mouse to draw and then release the mouse button.  All strokes are stored in the Strokes property of the InkCanvas.

Each Stroke stores information about its drawing attributes (e.g. color, width) as well as the collection of points that make up the Stroke, stored in its StylusPoints collection.

In the example below, we use data binding to show all Strokes for an InkCanvas in an adjacent ListBox.

</pre>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="150"/>
        </Grid.ColumnDefinitions>

        <Border Grid.Row="1" BorderBrush="DodgerBlue" BorderThickness="2" Margin="5" SnapsToDevicePixels="True">
            <InkCanvas Name="ink" MinHeight="0" MinWidth="0"/>
        </Border>
        <Label Grid.Column="1" Content="Strokes:" Margin="10,5"/>
        <ListBox Grid.Row="1" Grid.Column="1" ItemsSource="{Binding ElementName=ink, Path=Strokes}">
             <ListBox.ItemTemplate>
                 <DataTemplate>
                     <Label Content="{Binding Path=StylusPoints, Converter={StaticResource strokeInfoConverter}}"/>
                 </DataTemplate>
             </ListBox.ItemTemplate>
        </ListBox>
    </Grid>



Filed under Controls Tagged with , , , , ,

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

3 Responses to #484 – InkCanvas Contains a Collection of Strokes

  1. Michaël Polla says:
    November 3, 2014 at 10:55 am

    Thank you, just what I was looking for ! It’s so frustrating that InkCanvas only support one input at a time, because it works so great and the strokes come with lots of useful properties.

    Reply
  2. Richa says:
    February 7, 2016 at 12:03 pm

    what is the function strokeinfoconvertor defination?

    Reply
    • Sean says:
      February 12, 2016 at 8:32 am

      It just takes a StylusCollection and dumps out the first and last points (StylusPoint objects). If you create a simple value converter with nothing in it, you’ll see that the converter gets called for each element in the Strokes property of the InkCanvas. Strokes is of type StylusCollection, which is a collection of StylusPoint objects. In this example, I just dumped out the values of the first and last points.

      Reply

Leave a comment