Line style and width in Silverlight

In Silverlight, line style and width are specified using three properties: i.e. Stroke, StrokeThickness and StrokeDashArray.

Stroke is used to define line colour, the value of Stroke can be a predefined name (e.g. Red and MediumBlue), or can be a colour palette using 32-bit palette #rrggbb.

The StrokeThickness property defines the width of the line.

StrokeDashArray is a string of double values that indicates the pattern of dashes and gaps that is used to outline shapes. Each double value in the string specifies the length of a dash or gap relative to the thickness of the pen. For example, a value of 1 creates a dash or gap that has the same length as the thickness of the pen (a square).

The first double entry in the string specifies the length of a dash; the second double entry specifies the length of a gap.

Double entries can be separated by either commas or spaces.

More than one pair of entries can be included in the string, and will repeat in a pattern. Even-numbered entries specify dashes; odd-numbered entries specify gaps. If an odd-numbered total of entries is in the string, then the missing even-numbered entry of a pair will use the gap value specified by the last valid (even-numbered entry) gap value.

The following example shows three lines in a variety of widths and styles.

<Canvas>
  <!-- continues line -->
  <Line X1="100" Y1="100"
    X2="180" Y2="80"
    Stroke="Blue"
    StrokeThickness="2" />

  <!-- dotted line -->
  <Line X1="100" Y1="100"
    X2="100" Y2="20"
    Stroke="#FFD2691E"
    StrokeThickness="2"
    StrokeDashArray="1 1" />

  <!-- dashed line -->
  <Line X1="100" Y1="100"
    X2="20" Y2="80"
    Stroke="Green"
    StrokeThickness="2"
    StrokeDashArray="2.5 1" />
</Canvas>