Tuesday, September 6, 2011

XAML Inner Curves for Silverlight

When constructing a layout, a could-be pesky component is the...inner curve (I think the real name has "chamfer" in it somewhere).  It's the inverse of a rectangle's rounded corner -it's a rounded inner corner.  There are lots of ways to get this look but sometimes the easiest way is to just stick in a little inner-curve piece in the corner.  And, like triangles, generating an inner curve's path can be a chore.  So, here are the four cardinal-corner inner curves available to you as an easy copy-paste reference.  Just pick the one(s) you need, change the color and size as you see fit, and BANG...

<Path x:Name="TopLeft" Data="M0,0 L4.9999995,0 C2.2385762,0 0,2.2385762 0,4.9999995 z" Fill="Red" Width="5" Height="5" Stretch="Fill"/>

<Path x:Name="TopRight" Data="M0,0 L4.9999995,0 L4.9999995,4.9999995 C4.9999995,2.2385762 2.7614231,0 0,0 z" Fill="Red" Width="5" Height="5" Stretch="Fill"/>

<Path x:Name="BottomLeft" Data="M0,0 C0,2.7614231 2.2385762,4.9999995 4.9999995,4.9999995 L0,4.9999995 z" Fill="Red" Width="5" Height="5" Stretch="Fill"/>

<Path x:Name="BottomRight" Data="M4.9999995,0 L4.9999995,4.9999995 L0,4.9999995 C2.7614231,4.9999995 4.9999995,2.7614231 4.9999995,0 z" Fill="Red" Width="5" Height="5" Stretch="Fill"/>

Perhaps there's an inner bevel option for corners in Blend, but for rounding off
more complex shapes, there's nothing like the utility of a good old inner curve path.

Two Tips for Silverlight Paths:
  • Use Stretch=”Fill” so you can control the width and height with two easy levers (rather than the myriad coordinate nodes that comprise the path).  With the inner corner, you'll want to keep the width and height uniform -a rounding with it's aspect ratio broken looks bush league.
  • 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.

No comments:

Post a Comment