Let’s start with this kind of syntax.
First of all we have to understand that the path syntax is not a simple command but a real mini-language.
Take a look to this little piece of XAML code:
[code lang=”XML”] <Path Stroke="Black" Fill="Gray" Data="M 10,10 L 30,10 30,30 10,30 z" /> [/code]
What is it? Simple! Is a square:
Let’s explain something to start. The “Data” attribute is the one that contains the geometry of the drawing. It starts with an “M” that define the start of a new geometry path and set the start point. The two numbers that follow the “M” are the XY coordinates of the starting point. Remember that the coordinate system of the screen is not as a Cartesian plane, follow the differences:
the zero of the coordinates in a XAML Window is the upper left corner.
According to this, we can follow the construction of the square. First there is an “M” with the coordinates 10,10 as start point. Now there is a letter “L” that represent a “LINE” with the end point coordinate. Here we can see lot of numbers. we see:
[code lang=”XML” title=”+ Sample line”] L 30,10 30,30 10,30 [/code]
The follow couple of numbers after the “L” are the absolute coordinate of the end point of the segment. The start point is the end point of the previous element.
The “Z” at the end says that automatically close the shape and this is the end.
But what are all the commands?
According the official Microsoft page, but I preffer use the book “Pro WPF in C# 2008″ where I took the texts, the available commands are:
F value
– Sets the Geometry.FillRule property. Use 0 for EvenOdd, or 1 for NonZero. This command must appear at the beginning of the string (if you decide to use it).
M x,y
– Creates a new PathFigure for the geometry and sets its start point. This command must be used before any other commands except F. However, you can also use it during your drawing sequence to move the origin of your coordinate system. (The M stands for move).
L x,y –
Creates a LineSegment to the specified point.
H x
– Creates a horizontal LineSegment using the specified X value and keeping the Y value constant.
V y
– Creates a vertical LineSegment using the specified Y value and keeping the X value constant.
A radiusx, radiusY, degrees isLargeArch, isClockwise x,y
– Creates an ArcSegment to the indicated point. You specify the radii of the ellipse that describes the arc, the number of degrees the arc is rotated, and Boolean flags that set the IsLargeArc and SweepDirection properties.
C x1,y1 x2,y2 x,y
– Creates a BezierSegment to the indicated point, using control points at (x1, y1) and (x2, y2).
Q x1,y1 x,y
– Creates a QuadraticBezierSegment to the indicated point, with one control point at (x1, y1).
S x2,y2 x,y
– Creates a smooth BezierSegment by using the second control point from the previous BezierSegment as the first control point in the new BezierSegment.
Z
– Ends the current PathFigure and sets IsClosed to true. You don’t need to use this command if you don’t want to set IsClosed to true – instead, simply use M if you want to start a new PathFigure or end the string.
Well now we can build something more!
[code lang=”XML”]<Path Stroke="Black" Fill="Red" Data="M75,75 V100 H50 V110 H75 V135 H85 V110 H110 V100 H85 V75 Z" />[/code]
But… is very expensive make it in the editor, isn’t it?
There are some other ways to build the path. First is using Microsoft Expression Design but I preffer Inkscape. Up to you. Is not important the instrument to use but is important the results.
Yes, the results. I’m not a very good graphic and if I have to make something simple is ok, but if I have to build something more complex my icons seems drawed by a child! How can I get professional icons?
Here too the solutions will be more than one. You can buy from a graphic studio, ask a friend to draw them or use Syncfusion Metro Studio. This is a free environment that allows you to get the XAML code for the icons.
Stay tuned!