1.4. Ellipse and Rectangle Controls
As you might expect, these controls allow ellipses,
circles, rectangles, and squares to be placed inside your page. They
can be filled (using all the available brushes) or transparent, and can
have a border around them.
To create a circle or square, simply ensure that the ellipse or rectangle's Width and Height are set to the same value.
The interior of the shapes are filled using their Fill property, whereas their border is controlled using a series of properties whose names all begin with Stroke. The Stroke property itself sets the color, whereas the StrokeThickness sets the border width (though be aware that it starts at 0, making the border initially invisible).
The border offers up an extra feature that might be
useful, however: it doesn't need to be a continuous line. One of the
properties, StrokeDashArray, allows a dashed pattern to be
configured for the border. This property cannot be edited via the
Properties window, but can be directly entered into the XAML. Its value
should be a list of numbers (separated by spaces) that define
alternating length of filled and empty areas of the border.
For example, if this were set to a value of "1 1", the border would display dashes that were 1 unit long, followed by a gap that was also 1 unit long. Setting it to "3 1" would result in dashes 3 units long and gaps 1 unit long. More complex patterns can be formed by providing a larger pattern; "1 1 3 5"
would result in a 1-unit dash, a 1-unit space, a 3-unit dash, and then
a 5-unit space. Fractional numbers can be provided for any of these
array elements, too.
The measurement unit that the border is using is the StrokeThickness. As this increases or decreases, so too do the lengths of the dashes.
Listing 2 shows how these properties can be used to create a filled ellipse with a dashed border.
Example 2. Creating a filled ellipse with a dashed border
<Ellipse Height="250" Width="250" Stroke="SkyBlue" StrokeThickness="15"
StrokeDashArray="3 3" Fill="Gray" />
|
The resulting ellipse is shown in Figure 3.
Some additional options are available for the dashed border, too. The StrokeDashCap can be used to control the transition between the dashes and the empty space between. The default value for this property is Flat, but it can also be set to one of Square, Round, or Triangle. This difference can be seen in Figure 4, which uses the same ellipse as in Figure 3, but with each of the new dash cap values. Note that all these except for Flat
will eat into the space allocated for the gaps, so if you want to use a
dash cap while also retaining equal sizes of the dashes and gaps, you
will need to manipulate the StrokeDashArray to accommodate the dash caps.
It is also possible to rotate the dashes around the ellipse by applying a StrokeDashOffset. This is measured in the same units as the StrokeDashArray
is measured in, so if the total length of the stroke dashes is 6 units,
the offset will produce identical results with a value of 0 or 6, but other values in between will change the positioning of the dashes. The StrokeDashOffset
could be animated within a game to provide a simple implementation of a
spinning outline box or disc—useful for highlighting selected game
objects, for example.
The Rectangle offers a final pair of properties that might come in very handy: RadiusX and RadiusY.
They allow rounded corners to be applied to the rectangle, and the
elliptical rounding area will have its width and height defined by
these two properties. Figure 5 shows a rectangle using a value of 15 for both of the corner radius properties.
