Friday, May 13, 2011

XAML Triangle for Silverlight

I find myself digging through XAML files all the time looking for path data for triangles!  Blend doesn’t provide a drawing tool for triangles (as it does for rectangles and ellipses) that I know of, so I find myself drawing it with the pen then simplifying the geometry.  So, here they are, for your (my) copy-paste reference…


<Path Data="F1 M0,1 L2,1 L1,0 z" Width="16" Height="14" Fill="White" Stretch="Fill" x:Name="UP"/>

<Path Data="F1 M0,0 L2,0 L1,1 z" Width="16" Height="14" Fill="White" Stretch="Fill" x:Name="DOWN"/>

<Path Data="F1 M0,1 L1,0 L1,2 z" Width="14" Height="16" Fill="White" Stretch="Fill" x:Name="LEFT"/>

<Path Data="F1 M1,1 L0,0 L0,2 z" Width="14" Height="16" Fill="White" Stretch="Fill" x:Name="RIGHT"/>


Two Tips for Silverlight Paths:
  • Use Stretch=”Fill” so you can control the width and height with two easy levers.  Otherwise, manipulating all the path data ranges from painful to impossible.
  • The “z” at the end of the path’s coordinate strings tells the stroke’s end-point to merge back into its start-point.  If you leave it out, the stroke will have a gap (won’t trace the whole perimeter) -which you may or may not want.  If you replace the “z” with the same coordinate as the start-point, you wrestle with line cap styles.

2 comments:

  1. Hi,

    thank you for the post! It is very useful for me. I was wondering myself why there is no option in Expression Blend for triangles...

    Uncle

    ReplyDelete
  2. Hey,
    anon again. I've found this tutorial for all possible shapes in Silverlight 4:
    http://www.silverlightshow.net/items/Step-by-Step-Guide-to-Silverlight-Shape-Controls.aspx

    Perhaps it'll be usefull for you.

    Uncle

    ReplyDelete