Silverlight Game: Talking about what we did simply – Path Data

Share this post :

In keeping with the current current of thought on this blog, I am going to keep it simply simple. 

You may have noticed that there was an entry in the Windows Phone user control.  If you take a look at the triangle.xaml you will see lines containing:

         <Path Data="M0,38 L14, 0, 50, 100z"
              StrokeThickness="4"/>  image

Which normally would look like, but I changed the line feeds/carriage returns so that it would be easier to read on the blog (I really do need to work on my CSS file for this blog!)

        <Path Data="M0,38 L14, 0, 50, 100z" Stroke="Black" StrokeThickness="4"/> 

This is an example of attribute syntax to describe a path using the Extensible Application Markup Language (XAML)

The format that is used in this blog: <Path Data=….>, “Path” is a class that uses Geometry to describe it’s content.  It has several properties ones used here: Data, Fill, Stroke and Stroke Thickness.  Don’t be confused, there is also a syntax <Path.Data></Path.Data>, which isn’t covered here.

For the Path, the Data is given “M0, 38 L14, 0, 50, 100z”, what in the heck does that mean?  First the M with a 0 followed by a comma 38 and then a space, WTF?

Ok, let’s translate the M0,38 L14, 0, 50, 100z mini-language

  • Fill Rule:
    • Not shown, default is used if omitted F0, which specifies the EvenOdd fill rule (really, click the link and read how it works). 
    • There are a series of commands, so take a look at the table.
  • Move Command:
    • A move command that specifies the start point of the figure. See the Move Command section. ( M 0,38 )
  • Line Command:
    • Creates a straight line between the current point (M0,38) and the specified end point. (L14, 0, 50, 100z)  <<Which is equivalent to L14, 0 L50, 100z >>
  • Close Command:
    • Z or z in our example: L14, 0, 50, 100z, the z at the end of the 100 means that the point 50,100 connects using a straight line to the starting point M0, 38

Keep in mind that the usercontrol is under control of the MainPage, so it will present differently than the image on this page.

Next we will discuss how to reuse the Windows Phone User Control.  As you can see, this would work with Silverlight 2.0 as well as Silverlight 4.0.  There are differences, but at the simpler levels, your code that uses earlier versions of Silverlight can survive.

Comments (0)

Skip to main content