This article is compatible with the latest version of Silverlight.
Introduction
Last week I’ve published the first part of this article about the Shape controls in Silverlight. Now it’s time for the second. We will focus on the Polygon, the Polyline and the Path. Although these controls look more complicated than the first three, still the most important thing is to use your imagination.
Polygon
To create a Polygon we use the Points property of the control to define the positions of the polygon’s points. Each point has X and Y value separated with spaces. For example:
<Polygon Points="40,100 90,140 215,100 265,150 215,200 90,160 40,200"
Fill="Orange"></Polygon>
Note! It's not necessarily your last point to be the same as the first, the control will connect the first and the last points itself.
Polyline
This a line that connects two or more points. Like the Polygon control, the Polyline has a Points property which takes a collection of points.
<Polyline Points="0,160 25,140 50,160 75,140 100,160 125,140, 150,160 175,140 200,160 225,140
250,160 275,140 300,160" Stroke="Blue" StrokeThickness="5"></Polyline>
The Polyline can also be used to build a polygon and it would look exactly the same as if we've used a Polygon control. See for yourself:
To complete the stroke, just set the last point's coordinates same as the first point's, and you'll have a complete polygon made using a polyline.
Note! Though the polyline can be used instead the polygon, the opposite is not possible.
Path
May be from the Shape controls the Path is the most difficult to use, but it provides us with very useful functionality (drawing a curve for example). To draw a path we must set the Data property of the control. There are two ways to do that - via object tags or Path Markup Syntax .
<Path Stroke="Black" StrokeThickness="5">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0">
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
or
<!--M defines the start point-->
<Path Data="M 0,0" />
The PathFigure tag has a property Segments. In Silverlight the following segments could be used: LineSegment, PolyLineSegment, ArcSegment, BezierSegment, PolyBezierSegment, QuadraticBezierSegment, PolyQuadraticBezierSegment.
The LineSegment is the simplest. It creates a line between the start point of the figure and the point set in its Point property. You can add several LineSegments and create figures like the polyline.
Note! When using more than one segments the start point of the figure counts only for the first, the next takes as start point the point at which the previous segment has ended.
The PolylineSegment works exactly like a polyline. It has a Points property which takes a collection of points. Can be used instead of several LineSegments.
The ArcSegment is a little bit more complicated than the previous two. Basically it's a part cut from an ellipse using an imaginary line. Like the LineSegment it has a Point property, which indicates the end point of the segment. We can use the Size property to set the dimensions of the arc. It takes a value of type "x,y", as x is the x-radius and y is the y-radius of the elliptical arc. Then we can set the SweepDirection - Clockwise or CounterClockwise - the second just rotates the arc on 180 degrees. There is also a RotationAngle property. It determines the angle in which the imaginary line cuts the ellipse. At last we have to mention that the ArcSegment has also a IsLargeArc property. When the imaginary line don't pass through the center of the ellipse, the ellipse is cut in two arcs with different sizes. So with that property you can set which of them to be shown. Here is a short example of how to use the ArcSegment:
<Path Stroke="Red" StrokeThickness="2">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,200">
<LineSegment Point="100,200"></LineSegment>
<ArcSegment Size="100,50" RotationAngle="0" IsLargeArc="True"
SweepDirection="Clockwise" Point="200,200" />
<LineSegment Point="300,200"></LineSegment>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
or
<!-- L defines a line segment, A defines an arc segment with the sequence of the properties as follows:
Size, RotationAngle, IsLargeArc, SweepDirection and Point -->
<Path Data="M 0,200 L 100,200 A 100,50 0 1 1 200,200 L 300,200" Stroke="Red" StrokeThickness="2" />
The BezierSegment can be used to display curves. It has Point1, Point 2 and Point3 properties. The first two are control points, the third is an end point for the curve. Note that the curve does not pass through the control points. They behave like magnets and attract the points of the line towards them. That's how a curve is built.
<Path Stroke="Red" StrokeThickness="2">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,200">
<BezierSegment Point1="100,100" Point2="200,300" Point3="300,200" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
or
<!-- C defines a PolyBezierSegment. It can be used for dsiplaying both one or more
polybezier curves. -->
<Path Data="M 0,200 C 100,100 200,300 300,200" Stroke="Red" StrokeThickness="2" />
The PolyBezierSegment works the same way, with the difference that it has a Points property which takes a collection of points. The number of points must be multiple of 3. That's because the PolyBezierSegment is used to display more than one curve and each curve has its two control points and one end point. The end point of the previous curve is taken as start point for the next.
<Path Stroke="Red" StrokeThickness="2">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,200">
<PolyBezierSegment Points="50,150 100,250 150,200 200,150 250,250 300,200" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
or
<Path Data="M 0,200 C 50,150 100,250 150,200 200,150 250,250 300,200" Stroke="Red" StrokeThickness="2" />
We continue with the QuadraticBezierSegment. The thing that differs it from the BezierSegment is that there is only one control point and because of that we can draw only U-form curves with it. Here is an example:
<Path Stroke="Red" StrokeThickness="2">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,100">
<QuadraticBezierSegment Point1="150,300" Point2="300,100" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
or
<!-- Q defines a PolyBezierSegment. It can be used for drawing both one or more quadratic
bezier curves. -->
<Path Data="M 0,100 Q 150,300 300,100" Stroke="Red" StrokeThickness="2"></Path>
And the last segment we're going to take a look at is the PolyQuadraticBezierSegment. You can guess that it's used to display more than one quadratic bezier. It works like the PolyBezierSegment, except there is only one control point.
<Path Stroke="Red" StrokeThickness="2">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,100">
<PolyQuadraticBezierSegment Points="50,300 100,100 150,300 200,100 250,300 300,100" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
or
<Path Data="M 0,100 Q 50,300 100,100 150,300 200,100 250,300 300,100" Stroke="Red" StrokeThickness="2" />
Summary
These were the other three shape controls. You can see that there is nothing complicated in using them. And also you have many options when using those controls, because some of the shapes can be replaced by other shapes - the polygon and the polyline, the ellipse and the rectangle, the path and all the other shapes. Now put your imagination in work and light up the web.
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.