Silverlight and XAML Basics
(Page 1 of 4 )
In this second part to a three-part series that focuses on using XAML with Silverlight, you will learn how to use shapes and position elements. It is excerpted from chapter four of
Essential Silverlight, written by Christian Wenz (O'Reilly, 2008; ISBN: 0596519982). Copyright © 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.
Using Shapes: Paths
A path consists of several painting instructions: moving the virtual “pen” to a certain position, drawing certain shapes, and ending the drawing. Every instruction starts with a (case-insensitive) letter that identifies the instruction and several parameters may follow.
Figure 4-6. The rectangle with the rounded corners
The first part of a path is the so-called fill rule. This takes care of a special case: what happens if elements in the path overlap. You may choose between the default value F0 and F1:
F0
Stands for EvenOdd, meaning that points that have an even number of path segments between them and the end of the canvas are considered outside the path; points with an odd number are considered inside and would be filled.
F1
Stands for NonZero, meaning that all points where a line between the point and the end of the canvas crosses the path from the left side as often as from the right side are considered inside the path.
Generally, EvenOdd is what you will want, and since it is the default value, you do not have to provide it at all.
Next up are the instructions. The first one is usually M, which stands for “move.” This moves the virtual pen to a certain position but does not start drawing. The following path would put the pen at the x coordinate 40 and the y coordinate 30:
M 40,30
Starting from that point, several shapes are possible. We will start once again with a line, denoted by the L command. You only have to provide the end point of the line―the starting point is defined by the current pen position! The following path would therefore draw a line from (40,30) to (70,80):
M 40,30 L 70,80
Special cases of lines are horizontal lines (H command) and vertical lines (V command). For horizontal lines you only need to provide the x coordinate of the end point; for vertical lines you only need to provide the y coordinate of the end point.
By using lines, you can create any geometric shape that does not have curves. For curves, however, several options exits. The A command draws an elliptical arc. You need to provide a set of parameters:
The x and y radius of the ellipsis
The rotation angle of the ellipsis (use degrees)
Whether the angle is larger than 180 degrees (1) or not (0)
Whether the arc is drawn in positive direction (1) or not (0)
The end point of the arc
The following markup would create an arc from (50,50) to (100,50), using an x and y radius of 75 each, with a 90 degrees rotation angle in positive direction:
M 50,50 A 50,50 90 0 1 100,50
A type of curve that is very common in the vector graphics field are Bézier curves, named after French automobile designer Pierre Bézier. Assume that you have two points, A and B. Bézier defined a couple of mathematical equations that define curves between those points. The easiest one is a linear curve, but they are easy to draw without any extra help from Silverlight. However, there are more complex variants. A quadratic Bézier curve (called that because in the defining formula values are squared) uses a so-called control point to shape the exact look of the curve. The associated Silverlight path command, Q, provides the coordinates of this control point and also of the end point; remember that the start point is again defined by the current position of the pen.
The following markup moves the pen to (125,125) and creates a Bézier curve to (175, 75), using (110, 60) as a control point:
M 125,125 Q 110,60 175,75
A cubic Bézier curve goes one step further and uses two control points. The associated SIlverlight path command is C. Here is an example: the curve goes from (150,125) to (50,100), using the two control points (125,175) and (20,125).
M 150,125 C 125,175 20,125 50,100
Next: Paths continued >>
More BrainDump Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of Essential Silverlight, written by Christian Wenz (O'Reilly, 2008; ISBN: 0596519982). Check it out today at your favorite bookstore. Buy this book now.
|
|
