I’ve just recently gotten serious about learning XAML for Windows Phone development, and it’s been a real rollercoaster. Hours of bad-document-reading, tutorial-deciphering and hair-pulling punctuated by brief bursts of accidental success. My wife has learned to ignore my cursing but my poor dog Peanut still runs under a corner desk when some seemingly innocent code breaks.

Part of the problem for myself (and others, based on threads on MSDN and stackoverflow) is that documentation is woefully incomplete. Too many examples telling you WHAT needs to be done but annoyingly omitting critical HOWs. Too many segments of potentially useful code lacking the necessary prerequisite references to run.

But I digress. And if you just want to avoid further background and skip to the solution, scroll down.

I’m working on a C# Windows Phone geolocation app designed to route an email recipient to a person in need. One of my goals as always is to craft the best user interface for the solution. For touch devices, that often means stripping out conventional interface objects like buttons because they tend to occupy a layer between the user and what he or she wants to do. In this case, I want the app’s Map object to be the center of attention, and most if not all user interaction to take place on or around it. As is my norm, I dose this work with lots of context sensitivity.

I began with PNG objects like those shown in this post. I got that working fine eventually; tap on the graphic, and a context menu of several options pops up. Select one, and the graphic updates to reflect the user’s purpose.

But as I began the task of replacing Application Bar buttons with more Map-centric interaction objects, I began thinking that bitmap graphics were too low fidelity. If I went with vectors, and added more Map layers, I could truly orient the user better and improve engagement. The Map itself could host most of the UI.

It’s easy enough to add polygonal objects to XAML. Many of the Windows Phone content objects can host them. But once you get beyond simple shapes, editing can be a pain. One quickly misses Adobe Illustrator.

I found a really sweet XAML export plugin for Illustrator, but the creator has been unable to update it past CS4. I’m using Creative Cloud, and older plugins no longer function [edit: as one reader pointed out in comments, Microsoft’s Blend can import AI files. Part of my purpose here was to identify a completely free solution. For many uses, Inkscape works fine]. I discovered that the free vector editor Inkscape supports XAML export, so it was a no-brainer to bring my AI graphics into it and export. Below is an SVG file of my Map Pushpin object:

Other than redundant schema info and unknown tags, it looked okay. I cut out the portion I needed (Canvas tag content) and plopped it into a XAML MapOverlay in my project. Visual Studio immediately complained:

TypeConverter for “PathFigureCollection” does not support converting from a string

The offending bit was the Figures object. Time to Bing for an explanation… but while I found many examples of people encountering the error, there were no useful solutions. Some mentioned Kaxaml, which I downloaded. While it’s a very helpful tool for visualizing and troubleshooting XAML, it didn’t see any problems with my code and offered no way that I could see to refactor what I had into something Visual Studio would like.

The Solution

But reading more about the PathGeometry object tickled a few brain cells. I found a Path example that looked like it would work for what I wanted. So I changed the essential code to what follows (key portion in bold):

Success! In a nutshell, the trick was to remove the PathGeometry and use the Figures string as Path Data…. which just makes sense. My custom Pushpin rendered exactly as it should, and looked much sharper than the PNG bitmap. Now to construct other UI elements, add Map layers, and wire up the events. I’ll post more later, and will provide the full code on app release.