(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .

Using the Shape controls in Silverlight Part 1

(2 votes)
Martin Mihaylov
Martin Mihaylov
Joined Oct 29, 2007
Articles:   50
Comments:   70
More Articles
0 comments   /   posted on Jun 10, 2008
Categories:   Controls

This article is compatible with the latest version of Silverlight.


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.


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

<Rectangle Width="200" Height="200" Fill="Black"></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.


<Rectangle Width="200" Height="200" Fill="Black" Stroke="Red" StrokeThickness="5"></Rectangle>


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.


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

<Ellipse Fill="Yellow" Height="200" Width="200"></Ellipse>


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:

<Ellipse Fill="Yellow" Height="200" Width="200" Stroke="Black" StrokeThickness="70" StrokeDashArray="1"></Ellipse>

<Ellipse Fill="Black" Height="50" Width="50"></Ellipse>


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.

<Ellipse Height="200" Width="200">


<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<GradientStop Color="White" Offset="0" />

<GradientStop Color="Yellow" Offset="0.7" />






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):

<Line X1="50" Y1="75" X2="250" Y2="75" Stroke="Black" StrokeThickness="5"></Line>


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

<Line X1="50" Y1="75" X2="250" Y2="75" Stroke="Black" StrokeThickness="5" StrokeDashArray="2" StrokeDashCap="Round">



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

<Line X1="50" Y1="75" X2="250" Y2="75" StrokeThickness="5">


<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">

<GradientStop Color="Red" Offset="0" />

                  <GradientStop Color="Yellow" Offset="0.25" />

                  <GradientStop Color="Green" Offset="0.5" />

                  <GradientStop Color="Blue" Offset="0.75" />

                  <GradientStop Color="Purple" Offset="1" />






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.


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.



No comments

Add Comment

Login to comment:
  *      *