Monday, January 12, 2009

XAML stroke - inconsistent, but livable if you know the tricks...

I'm using XamlTune to convert SVG to XAML. Ellipses with thick strokes weren't converting correctly. I dug deeper, and discovered that XAML is inconsistent in its treatment of stroke placement.

For paths, the stroke is centred on the path line (as with SVG). But with ellipses and rectangles (and hence circles and squares too), XAML draws the stroke INSIDE the perimeter line. SVG is consistent - the stroke is always centred on the perimeter line.

Anyhow, I had difficulty finding info on this anywhere, so I tested my theory with some practical examples.

In XAML, create an Ellipse with e.g. a 100 pixel diameter.

<Ellipse Width="100" Height="100" Fill="Yellow" />

Then set a very wide stroke:

<Ellipse Width="100" Height="100" Fill="Yellow" StrokeThickness="50" Stroke="Blue" />

Voila! Note that the size of the circle is the same whether there is a stroke or not. Thus, XAML uses an internal stroke for ellipses.

But do the same thing in Inkscape (i.e. in SVG) and the circle gets larger as the stroke gets wider.

Since I found it hard to find anyone else commenting on the same "gotcha", I thought I'd make note of it here...

No comments: