Another blog ...

Drawing shapes with Silverlight

Written by Apu on 3:27 AM

Continuing from our first Silverlight tutorial. Today, lets learn how to draw a few basic shapes. If you are new to Silverlight please go through this guide to know how to set up your Silverlight project.

In this tutorial we would be mainly concerned with the XAML stuffs. Lets create some shapes -

Creating a Line

 <Line X1="0" Y1="100" X2="100" Y2="100"
     Stroke="black" StrokeThickness="5"/>

This example draws a horizontal line form (0,100) to (100,100). The Stroke="black", sets the outline black and StrokeThickness="5" sets the thickness of the outline as 5 px.

Creating an Ellipse

    <Ellipse
     Fill="Red"
     Height="100"
     Width="200"
     StrokeThickness="1"
     Stroke="Black"/>

This example draws an ellipse with 100px height and 200px width. Its has an outline(border) of 1px which is black. The ellipse is filled with red color. To draw a circle - just make the height and width equal.

Creating a Rectangle

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

This draws a rectangle which is 200px wide and 100px in height. Its outline (border) is 5px thick and is colored white (Stroke="White").The rectangle is filled with red color. So we have a red rectangle with white border. Note that, if you make the height and width equal, it would form a square.


Creating a Polygon

<Polygon
      Points="10,50 50,12 190,27 230,200"  Fill="Pink"
      Stroke="Blue"
      StrokeThickness="2">    
</Polygon>

This draws a polygon like in the image The 'points' defines the positions of the polygon points. Then its filled with pink color and with a blue border of 2px thickness.

Creating a Polyline

<Polyline Points="0,20 40,12 190,27 230,200"
     Stroke="Green" StrokeThickness="5"/>

This draws a polyline . The 'points' defines the positions of the polyline points.

Creating a Path.

  <Path Stroke="Maroon" StrokeThickness="3"
   Data="M 10,100 C 50,25 100,120 100,175 H 200" />

This code draws a path like in the image below.

A path is comparatively most complicated to draw among all the shapes we have covered till now. You already know what 'Stroke' and 'StrokeThickness' does. Let me cover the Data part.

The Data attribute string here uses something called the 'Path Markup Syntax'. The M here indicates the 'move command'. Its like defining a start point for the path. The 'C' defines the cubic Bezier curve which in this case begins at (10,100) and ends at (100,175), and is drawn by using the two control points (50,25) and (100,120). The 'H' or the horizontal line command specifies a line which is drawn from where the sub-path defined by the 'C' ends (100,175), to a new endpoint (200,175). If you're wondering why only a X-co ordinate is specified in the 'H' block, please note that it is a horizontal line which starts from where the sub-path defined by 'C' block ends. Hence it doesn't need a Y- Co ordinate. I would cover this path markup syntax in details later. Meanwhile, if you have any questions - please use the comment box ;-)