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.