This post is going to take a quick look at the shapes that are available with Silverlight.

Silverlight comes with five built in shapes from which you can construct just about any shape that you can imagine.

The built in shapes are the Ellipse, Line, Polygon, Polyline and Rectange.

1.  Setting up the Project.

The base project for each shape is going to be the same.  The project will consist of a base layout 500 x 500 grid with a light gray background.  I have also set the vertical and horizontal alignment.

When the project is run, the grid is displayed in the top left of the page.

2.  The Ellipse.

The ellipse is the shape that is used for creating circles and ovals.  The most basic declaration of an ellipse that you can make must include a colour for the Fill attribute.

If you don’t specify a height or width for the ellipse a circle will be displayed and the way that silverlight works the shape will expand to the size of its parent container.

If you want an oval shape then you will need to define a height a width, which have different values from each other, for the ellipse.

To extend beyond the plain shape you can also define a colour, width or type of stroke, think of a border, to the ellipse as well.

The XAML above gives the ellipse a blue border.

You are not limited to solid borders either.  You can set a style for the stroke as well.  Setting the StrokeDashArray gives you an broken looking stroke.

The first number in the strokedasharray would be the number of pixels that the colour of your stroke will be displayed.  The second number is the number of pixels that will have no colour.  So running the above XAML you would see the following.

You do not have to use only two numbers for the value of the strokedasharray.  You can get quite inventive with if you want and use more than two numbers.  If you wanted to use three numbers you would just add the number to the array.

The only thing that you need to remember with using more than two numbers is that the odd numbers in the array (the first, third, fifth etc) will be the number of pixels that show colour and the even numbers in the array (the second, fourth etc) will be the non-coloured pixels.  Using the three numbers above you can see that the stroke is much different and you get a mixture of all values as both coloured and non-coloured pixels.

3.  The Line.

The line shape is, if you will excuse the pun, pretty straight forward.

To define a line you need to have a colour for the stroke, a set of x and y coordinates(X1 and Y1) for a starting point and a set of x and y coordinates (X2 and Y2) for an ending point.

Remembering that the x-axis represents the horizontal distance and the y-axis is the vertical distance. You would get the following.

Similar to the stroke in the ellipse example the line can be altered by changing settings of the strokedasharray, strokedashcap and strokedashendlinecap.  For example the following XAML;

displays a segregated line with points on the ends of each coloured segment and a rounded end for the line.

4.  The Polygon.

The polygon shape is used to create shapes of three or more sides though if you are trying to create a square or rectangle then you would be just as well off to use the rectangle shape.  I will look into the rectangle later in this post.

A polygon is defined by adding a series of x and y coordinates which will represent each place that two lines will intersect.  The polygon will automatically close itself, or add a stroke from the last point added to the first point, so that the shape is complete.

Adding three sets of points as in the XAML above will insert a triangle into the grid.

So you can make the polygon as complex as you want.  Adding more sets of coordinates to the points array,

creates a shape with more sides.

As with all shapes built into silverlight you can add a stroke the polygon and alter it to fit your needs.

5.  The Polyline.

The polyline is a line, but is not used to create a straight line as you do with the line shape. The polyline is made up of several segments that meet at defined points.  The polyline is similar to the polygon but where the polygon automatically closes the first and last defined points the polyline does not close the shape.

The polyline is defined by a series of points, x and y coordinates, that shows where the polyline segments meet.  Using the same points as the polygon example above,

you only see the outline of the shape.  Also note that the start of the line and end of the line do not automatically join.

Again, as with the other shapes in silverlight, you can alter the look of the stroke by changing the values of the attributes pertaining to the stroke.

You can see the effects of the XAML above on the polyline in the screen shot below.

6.  The Rectangle.

The rectangle is used to create either square or rectangular shapes.

The same way that an ellipse without a defined height and width fills its parent container the rectangle will do that same if it is declared with just a fill colour.

You will see that the layout root grid is filled by the rectangle.

Once again you can alter the stroke of a rectangle shape as you can with any other silverlight shape by setting values for any of the attributes of the stroke.  The attributes are: strokethickness, strokethickness, strokedasharray, strokestartlinecap, stokedashcap, strokeendlinecap, strokelinejoin, strokedashoffset and strokemiterlimit.