#484 – InkCanvas Contains a Collection of Strokes

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>



About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

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

  1. Michaël Polla says:

    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.

  2. Richa says:

    what is the function strokeinfoconvertor defination?

    • Sean says:

      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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: