Silverlight Tips of the Day - Blog by Mike Snow

Silverlight Tip of the Day #95 – Working with Strokes in Shapes

When it comes to drawing shapes such as rectangles you are probably fully aware you can draw shapes specifying the color and thickness of the lines. This is done via the properties StrokeThickness and Stroke. For example, take a look at the rectangle drawn here:

This rectangle is drawn with a line color of red set via the Stroke property. It’s thickness is set to “1” using the StrokeThickness property as seen here:

<Rectangle Width="128" Height="128" StrokeThickness="1" Stroke="Red"></Rectangle>

Did you also know you can change the shapes lines to be dotted/dashed while greatly configuring how they are drawn? This is done via the following two properties:

• StrokeDashArray
• StrokeDashCap

Let’s take a brief look at each.

StrokeDashArray

The StrokeDashArray let’s you set the length of each dash and the distance between each dash. You can specify an array of these values where the first value is the length and the second value is the distance. It pair value in the array is applied and then repeated once the array you specified runs out. In this example, we are drawing a dash of length 2 with a distance of 5 between each dash:

StrokeDashArray="1,5"

The next example has two values that repeat non-stop where we have a length of 1, distance of 5 followed by length of 10, distance of 2.

StrokeDashArray="1,5,10,2"

StrokeDashCap

StrokeDashCap affects how or in what shape the dots are drawn and it can be set to one of the following (each example is zoomed in to show detail):

• Flat (the default)

• Round
  
  
• Square

• Triangle

Thank you,
--Mike Snow

 Subscribe in a reader