LearnNowOnline

Blog

Geometry Mini-Language

By Ken Getz | January 29, 2013

Imagine a scenario in which you have a large amount of data, and a correspondingly large amount of markup. Defining each curve, line, arc, and shape individually requires a huge amount of markup, and most of it is redundant. To minimize the amount of markup, at the expense of readability, XAML supports a "mini markup language" that describes geometry. Thisreplacement language is often called the "geometry mini-language" (or Path mini-language") and although there's no need for you to be able to create markup using this language-you're going to use design tools to create complex layout, rather than creating markup manually-it is important to be able to read and understand the intent of the language.

Take, for example, the markup used to create a star shape surrounded by a square (see Figure below):

<Path Stroke="Red" StrokeThickness="10"

Fill="LawnGreen"

Canvas.Top="20" Canvas.Left="20"

StrokeLineJoin="Round" StrokeEndLineCap="Round">

<Path.Data>

 <PathGeometry FillRule="EvenOdd">

<PathFigure IsClosed="True" IsFilled="True"

StartPoint="100, 0">

<LineSegment Point="160, 200" />

<LineSegment Point="0, 75" />

<LineSegment Point="200, 77" />

<LineSegment Point="40, 200" />

</PathFigure>

<PathFigure StartPoint="0, 0">

<PolyLineSegment Points="200,0 200,200

0,200 0,0" />

</PathFigure>

 </PathGeometry>

 </Path.Data>

</Path>

Using the geometry mini-language, the following Path element creates the exact same result (in the page GeometryMiniLanguage.xaml):

<Path Stroke="Red" Margin=10

StrokeThickness="10"

Fill="LawnGreen"

Canvas.Top="20"

Canvas.Left="20"

StrokeLineJoin="Round"

StrokeEndLineCap="Round"

Data="M100,0 L160,200 L0,75 L200,77 L40,200 Z

M0,0 H200 V200 H0 V0"/>

Obviously, the first few attributes set up properties for the path just as in the original markup. The difference, of course, lies in the Data attribute (which replaces the Path.Data element in the original):

Data="M100,0 L160,200 L0,75 L200,77 L40,200 Z

M0,0 H200 V200 H0 V0"

The path data uses a sequence of commands, indicated by letters:

• M100,0: Move to 100,0.
• L160,200: Create a LineSegment to the indicated point.
• L0,75: Create a LineSegment to the indicated point.
• L200,77: Create a LineSegment to the indicated point.
• L40,200: Create a LineSegment to the indicated point.
• Z: Ends the current PathFigure and sets IsClosed to True. (You only need to use this command if you want to set the IsClosed property to True. Otherwise, you can simply use M to move to a new point.
• M0,0: Move to point 0,0.
• H200: Starting at the current point, create a horizontal line to Xcoordinate 200.
• V200: Starting at the current point, create a vertical line to Ycoordinate 200.
• H0: Starting at the current point, create a horizontal line to Xcoordinate 0.
• V0: Starting at the current point, create a vertical line to Y-coordinate 0.

TIP: The command letters are case sensitive. Uppercase letters indicate that the coordinates that follow are absolute; lowercase letters indicate that the coordinates are relative to the previous point.

NOTE: For a full description of the geometry mini-language, see the following documentation page: http://go.appdev.com/?id=8AEA.

As you can see, using the mini-language makes your markup far more concise, at the expense of readability. Again, your best bet is to use dedicated design tools, such as Expression Blend, when creating graphics for use in XAML. You'll save many hours of frustration.

This post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.