Graphics in Silverlight 5: Part III

This article continues from Graphics in Silverlight 5: Part I and Graphics in Silverlight 5: Part II.

In the third part of this series, we shall continue exploring other Shape elements. We begin with the Polygon.

Polygon

Using this element, you can draw polygonal shapes. A polygonal shape is a connected set of lines forming a closed shape.

Let us see how to use this element in Silverlight. Create a Silverlight application named PolygonDemo.

Add the following markup:

<Polygon Points="75,100 75,50 150,10 225,50 225,100 150,140 75,100"
Fill="Navy" Stroke="Red" StrokeThickness="4">
</Polygon>

This markup draws a series of line, first from 75,100 to 75, 50 then from 75,50 to 150,10, then from 150, 10 to 225, 50. Then from 225, 50 to 225, 100 and from 225, 100 to 150, 150 and finally from 150, 150 back to the beginning 75,100.

The outcome of this markup is shown in Figure 1.

Figure 1

But the Polygon element is not just useful to draw polygons but can be manipulated to draw triangles, parallelograms, and such shapes.

For instance, to draw a parallelograms, you can use the following markup:

<Polygon Points="75,100 100,50 200,50 175,100 75,100"
Fill="RoyalBlue" Stroke="Black" StrokeThickness="2">
</Polygon>

The outcome of this markup is shown in Figure 2.

Figure 2

You can even draw random shapes such as the one shown in Figure 3 using the Polygon element.

Figure 3

To generate such a shape, you would need to write the following markup:

<Polygon Points="75,100 100,125 200,125 225,50 225,100 150,140 75,100"
Fill="Red" Stroke="Black" StrokeThickness="2">
</Polygon>

Polyline

This element is similar to the Polygon element, except that the last points need not connect back to the first.

The following XAML markup shows how to create a polyline.

<Polyline Points="75,100 100,50 200,50 50,75 120,80"
Fill="RoyalBlue" StrokeThickness="2">
</Polyline>

The outcome of this markup is shown in Figure 4.

Figure 4

In addition to creating polygons and polylines through XAML, you can also create these elements dynamically through code.

For example, the shape created in Figure 4 can be recreated without XAML, through code as follows:

Polyline polyLine = new Polyline();
polyLine.Fill = new SolidColorBrush(Colors.Blue);
polyLine.StrokeThickness = 2;
Point Point4 = new System.Windows.Point(75, 100);
Point Point5 = new System.Windows.Point(100, 50);
Point Point6 = new System.Windows.Point(200, 50);
Point Point7 = new System.Windows.Point(50,75);
Point Point8 = new System.Windows.Point(120, 80);

// Create a PointCollection
PointCollection pointCollection2 = new PointCollection();

// Add the individual Point objects to the collection
pointCollection2.Add(Point4);
pointCollection2.Add(Point5);
pointCollection2.Add(Point6);
pointCollection2.Add(Point7);
pointCollection2.Add(Point8);

// Set the point collection to the Points property of the Polyline object
polyLine.Points = pointCollection2;
LayoutRoot.Children.Add(polyLine);

This will render a shape similar to Figure 4.

In this manner, you can use the Polygon and Polyline elements with various sets of points to create desired shapes.

Conclusion: The third part of this series introduced the Polygon and Polyline elements.

Continue to next part >>