#488 – You Can Change Drawing Attributes of Existing Strokes in an InkCanvas

You can change the drawing attributes for new strokes added to an InkCanvas by setting the DefaultDrawingAttributes property.  You can also change the drawing attributes of strokes already present in the InkCanvas.

Existing strokes are stored in the Strokes property of the InkCanvas, which is of type StrokeCollection (in System.Windows.Ink).  This collection contains instances of Stroke objects, each of which has a DrawingAttributes property, which references an instance of the DrawingAttributes class.

In the example below, we can click on the Fatten button to thicken existing strokes.

Before clicking on Fatten:

After clicking on Fatten:

And again:

Here’s the code for the Button.Click event, which increases the Width of each Stroke already on the InkCanvas.

        private void Button_Click(object sender, RoutedEventArgs e)
            foreach (Stroke s in ink.Strokes)
                s.DrawingAttributes.Width = s.DrawingAttributes.Width + 3;

#487 – Specify DrawingAttributes When Drawing to an InkCanvas

You can specify a number of different drawing attributes that affect how new strokes appear when drawing on an InkCanvas control.  You set the DefaultDrawingAttributes property of the InkCanvas to an instance of the DrawingAttributes class, which contains properties that you can set to change how new strokes appear.

Properties of DrawingAttributes include:

  • Color – the color of the new stroke
  • Height – height of the brush used to draw a stroke
  • Width – width of the brush used to draw a stroke
  • FitToCurve – if true, smooths out the stroke
  • IsHighlighter – if true, stroke is somewhat translucent, simulating a highlighter
            <InkCanvas Name="ink" MinHeight="0" MinWidth="0">
                    <DrawingAttributes Color="DarkGreen" Width="5" Height="20" FitToCurve="True" IsHighlighter="False" />
                <Label Content="Drawing using a dark green stroke, 5x20"/>

Here are some examples of different values for Color, Width and Height.

Here is an example of setting the IsHighlighter property to true.