Beginning Web Development, Silverlight, and ASP.NET AJAX

390
CHAPTER 16 ■ PROGRAMMING SILVERLIGHT WITH XAML AND JAVASCRIPT
The Rectangle
This shape is used to draw a closed, straight-edged shape. As with the Ellipse, you control
its dimensions with its Height and Width properties. For example, you can create a
square with XAML like this:
You can round off the corners of a rectangle with the RadiusX and RadiusY properties.
These take a double value specifying the radius of the circle that is used to round the corner.
For example, to change the preceding rectangle to have rounded corners that are
inscribed by a 10 pixel circle, you would use this XAML:
The Line
Lines are drawn in XAML using the Line object. You specify the starting point of the line
using its X1 and Y1 properties, and its endpoint using its X2 and Y2 properties. Note that
these are not absolute coordinates, but relative to the container of the line. For example,
if you have the line within a Canvas that has a top of 50 and a left of 50, and X1 and Y1 are
both set to 50, then the line will start drawing from (100,100).
The line itself can also have its Canvas.Top and Canvas.Left properties set to change
its overall drawing position. Here’s an example:
The Path
The Path draws a series of connected lines and curves that are defined using a geometry.
Silverlight uses the following geometries:
EllipseGeometry: Defines the path element as a simple ellipse.
LineGeometry: Defines the path element as a line.
RectangleGeometry: Defines the path element as a rectangle.
PathGeometry: Defines the path element using a complex set of different shapes,
including arcs, Bézier curves, lines, poly Bézier curves, polyquadratic Bézier curves,
and quadratic Bézier curves. When using a PathGeometry, you collect segments into a
PathFigure, and one or more of these make up the PathGeometry. This goes beyond the
scope of this book, but check out the MSDN documentation for more details.