The Line class defines four properties of type double named X1, Y1, X2, and Y2. The line is drawn from the point (X1, Y1) to the point (X2, Y2) relative to its parent:
<Canvas Background="LightCyan">
<Line X1="50" Y1="100"
X2="200" Y2="150"
Stroke="Blue" />
</Canvas>
Many of the examples in this
program will be shown as a snippet of XAML and the corresponding image
in a 480-square pixel area. At the end of the chapter I’ll describe the
program that created these images. For the printed page I’ve made the
resolution of these images about 240 dots per inch so they are
approximately the same size as what you would see on the actual phone.
The line begins at the coordinate point (50, 100) and ends at the point (200, 150). All coordinates are relative to an upper-left origin; increasing values of X go from left to right; increasing values of Y go from top to bottom.
The X1, Y1, X2, and Y2 properties are all backed by dependency properties so they can be the targets of styles, data bindings, and animations.
Although the Canvas panel seems like a natural for vector graphics, you’ll get the same image if you use a single-cell Grid:
<Grid Background="LightCyan">
<Line X1="50" Y1="100"
X2="200" Y2="150"
Stroke="Blue" />
</Grid>
Normally when you use a Canvas you use the Canvas.Left and Canvas.Top attached properties to position elements within the Canvas. Those properties are not required with the Line because it has its own coordinates. You could use the attached properties with the Line but the values are compounded with the coordinates:
<Canvas Background="LightCyan">
<Line X1="50" Y1="100"
X2="200" Y2="150"
Canvas.Left="150"
Canvas.Top="100"
Stroke="Blue" />
</Canvas>
Usually when you’re working with elements that indicate actual coordinate positions, you’ll use the Canvas.Left and Canvas.Top attached properties only for special purposes, such as moving an object relative to the Canvas.
Moreover, you’ll recall that a Canvas always reports to the layout system that it has a size of zero. If you subject the Canvas to anything other than Stretch alignment, it will shrink into nothingness regardless of its contents.
For these reasons, I tend to put my vector graphics in a single-cell Grid rather than a Canvas.
If a Grid contains one or more Line elements (or any other coordinate-based elements), it will report a size that comprises the maximum non-negative X coordinate and the maximum non-negative Y coordinate of all its children. This can sometimes seem a little weird. If a Grid contains a Line from (200, 300) to (210, 310), the Line will report an ActualWidth of 210 and an ActualHeight of 310, and the Grid will be 210 pixels wide and 310 pixels tall, even though the rendered Line needs only a tiny corner of that space. (Actually, the Line and the Grid will be at least an extra pixel larger to accommodate the StrokeThickness of the rendered Line.)
Coordinates can be negative, but the Grid does not take account of negative coordinates. A negative coordinate will actually be displayed to the left of or above the Grid. I have spent much time thinking about this behavior, and I am convinced it is correct.
