Using the Shape controls in Silverlight Part 1

This article is compatible with the latest version of Silverlight.

Introduction

In this article we are going to focus on the shape controls in Silverlight. These controls are very simple but they provide almost unlimited style possibilities, so make your imagination work and use them in a very creative and interactive way in every Silverlight application. There are six shape controls – the ellipse, the rectangle, the line, the polyline, the path and the polygon. In this article I’ll examine the first three of them, namely the ellipse, the rectangle and the line.

Rectangle

The first control we’re going to take a look at is the rectangle.

We use the Width and Height properties to set the dimensions and the Fill property to set the color of our rectangle. You can also use the standard alignment properties ( VerticalAlignment, HorizontalAlignmen etc.) to position it wherever you want . That applies to all shape controls.

Now we’re going to use the Stroke property of the rectangle control. It creates a border around our rectangle. By default the border is 1px thick, but we can use the StrokeThickness property to change it.

Other interesting Stroke properties we can use are the StrokeDashArray, the StrokeDashOffset and the StrokeDashCap. The StrokeDashArray property makes the stroke dashed. It takes value of type double and is used as a coefficient by the calculating the width of the dash – it’s equal to the thickness of the stroke multiplied by the value of the StrokeDashArray property. The StrokeDashOffset is a double too and represents the distance between the default position of every dash and the position we want to set. The StrokeDashCap sets the styles of the dashes and it applies to both ends of each dash. It has four values – Flat (default value), Round, Square and Triangle.

So here is an example for a rectangle styled using its Stroke properties:

Note! We set the width and the height of our rectangle to 200px and the thickness to 5px. These 5px were not added to the rectangle’s width and height, but taken from them.

Ellipse

There is nothing complicated here as well. First we set the Height, Width and Fill properties of the control:

The Ellipse also has a Stroke property, so we can use it the same way as by the rectangle. This time we’ll try something more imaginative. Here is an example:

Note! We set the width and the height of our ellipse to 200px and the thickness to 70px. You can see that the stroke took a part of the dimension defined for the ellipse.

When using shapes we can also fill them with brushes or gradient brushes. Lets try to set the Fill property of the ellipse to a gradient brush.

Line

The third shape control in Silverlight 2 is the line. The Line is defined via the Stroke property and the StrokeThickness , X1, Y1, X2, Y2 properties of the control. X1 and Y1 represent the start point of the line and X2 and Y2 the end point. Here is some sample code (the UserControl has dimensions 300x150px):

You can again use the properties related to the Stroke property, namely the StrokeDashArray, the StrokeDashOffset and the StrokeDashCap.

It’s also possible to use a gradient brush for the Stroke property:

Summary

We took a look at the first part of shape controls in Silverlight. Soon I’ll post the second part of this article which will focus on the path, the polyline and the polygone.

As you can see the things are not very complicated and we used standard properties to style our shapes. The most important role here is played by the imagination, so don’t hesitate to use it.

Conclusion

This article is just a brief tutorial that includes the key features of the Shape controls. It targets the developer who has just started with the Silverlight controls. Any comments are welcome.