Page view counter

Silverlight Tips of the Day - Blog by Mike Snow

Game Programming with Silverlight

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:

image

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"

image

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"

image

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)

image

  • Round

    image
  • Square

image 

  • Triangle

image

Thank you,
--Mike Snow

 Subscribe in a reader

Comments

Microsoft Weblogs said:

When it comes to drawing shapes such as rectangles you are probably fully aware you can draw shapes specifying

# February 19, 2009 8:20 PM

Working with Strokes in Shapes said:

Pingback from  Working with Strokes in Shapes

# February 20, 2009 12:01 AM

Community Blogs said:

In this issue: Kirupa Chinnathambi, Sheo Narayan, Alex Knight, Katrien De Graeve, Maurice de Beijer,

# February 20, 2009 2:46 PM

Pages tagged "the strokes" said:

Pingback from  Pages tagged "the strokes"

# February 24, 2009 6:18 PM

Visual Web Developer Team Blog said:

Most Recent Posts: Silverlight Tip of the Day #106 - Setting Default Browser from within VS Silverlight

# April 6, 2009 6:13 PM

Silverlight Tips of the Day - Blog by Mike Snow said:

The purpose of this post is to create an outline summary all the blogs from my Silverlight Tips of the

# April 6, 2009 6:19 PM

NewsPeeps said:

Thank you for submitting this cool story - Trackback from NewsPeeps

# August 8, 2009 6:36 PM