1.5. Line, Polyline, and Polygon Controls
While we are discussing the Ellipse and Rectangle shape controls, it seems an appropriate time to also look at three additional shape-based controls. The Line control allows a simple straight line to be drawn within a page. Polyline controls allow a series of lines to be joined together. Finally, Polygon extends this further to create a solid shape from a number of lines and optionally fill its interior.
None of these controls is available from the
Toolbox; instead, they must be manually created within the XAML editor.
Once the control has been declared, all its properties can be viewed
and modified in the Properties window as usual.
The Line requires two coordinates to be
specified, for the start and end of the line. They are specified in
pixels, relative to the top-left corner of their container. They also
provide all the Stroke properties that we looked at for the Ellipse and Rectangle controls, allowing the line color, thickness, dashes, and so on to be configured.
Listing 3 shows the XAML required to create a line from coordinate (50, 50) to (200, 200).
Example 3. Creating a Line
<Line Stroke="SkyBlue" StrokeThickness="15" X1="50" Y1="50" X2="200" Y2="200" />
|
Lines that have sufficient thickness will by default appear with flat ends. They can be changed by capping the line ends so that they have a different shape. This is controlled by the StrokeStartLineCap and StrokeEndLineCap properties, each of which can be set to one of Flat (the default), Square, Round, or Triangle.
The next shape is the Polyline, which
allows a series of coordinates to be provided and joined together using
a series of lines. The coordinates this time are specified as X,Y pairs
using the shape's Points property. Listing 4 shows a Polyline that creates a zig-zag shape within its container.
Example 4. Creating a Polyline
<Polyline Stroke="SkyBlue" StrokeThickness="15"
Points="100,50 200,100 100,150 200,200 100,250 " />
|
Besides simply joining between the points, the Polyline can provide additional flexibility around the corner points of the rendered lines. They are controlled using the StrokeLineJoin property, which can be set to one of Miter (the corners are extended into points), Bevel (the corners are flattened), or Round (the corners are rounded). Figure 6 shows the Polyline defined in Listing 4, but with each of the available StrokeLineJoin styles applied: Miter on the left, Bevel in the middle, and Round on the right.
Just like Lines, PolyLines also allow their start and end to be capped if needed.
The final shape is the Polygon, which is configured in exactly the same way as the Polyline,
but it creates an enclosed region (the end point is automatically
joined back to the start point). It supports all the same features as
the Polyline, except for the stroke start and end line caps because the Polygon doesn't have any start or end point.
What it provides instead is the ability to set its Fill property, resulting in a solid interior to the rendered shape. Any of the available brushes can be used for this purpose.
Listing 5 shows the XAML for a filled Polygon.
Example 5. Creating a Polygon
<Polygon Stroke="SkyBlue" StrokeThickness="15" Fill="Gold"
Points="100,50 200,100 150,150 200,200 100,250 " />
|
The resulting shape is shown in Figure 7.
