Sep 112014
 
Lately I’m working on a collaborative book project; three authors, one editor, and a small collection of raw content contributors.  It’s an exciting prospect but have to say, when it comes to co-managing a project like this sometimes little things become surprisingly big.  Like platform preferences.  Everyone has their pet tool and trying to get consensus on one easily reduces to finding the Least Worst Overall Not-Quite-Hated solution.  We’re working through that, but…

In our first conversation, Charlene the editor she asked me something about iPhones and the conversation went

Me: I wouldn’t know; I use a Windows Phone
Charlene: Oh, I’m sorry

So many ways to go with that… but suffice to say that from my perspective it proves how much more convincing a distortion field can be than reality.  I’m in no way impugning Charlene– she’s definitely sharp or I wouldn’t have started following her in the first place.  But Apple and others have done a spectacular job at misinforming even the discerning public.

Microsoft is included in that others category. Continue reading »

Oct 012013
 

Deliver HereI’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.I Need HELP

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:

`<?xml version=”1.0″ encoding=”utf-8″?>
<!– Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  –>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“>
<svg version=”1.1″ id=”Layer_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”
width=”28.263px” height=”72.538px” viewBox=”0 0 28.263 72.538″ enable-background=”new 0 0 28.263 72.538″ xml:space=”preserve”>
<circle fill=”#3D5EAB” fill-opacity=”0.9″ cx=”14.132″ cy=”7.041″ r=”7.041″/>
<path fill=”#3D5EAB” fill-opacity=”0.9″ d=”M14.132,16.012C6.327,16.012,0,22.339,0,30.143v0v42.395l28.263-28.263V30.143
C28.263,22.339,21.936,16.012,14.132,16.012z M22.332,44.275h-3.956v-8.347H9.814v8.347H5.872V23.784h3.942v8.076h8.562v-8.076
h3.956V44.275z”/></svg>`

I next exported that to XAML, getting:

`<?xml version=”1.0″ encoding=”UTF-8″?>
<Viewbox xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” Stretch=”Uniform”><Canvas Name=”Layer_1″ Width=”28.263″ Height=”72.538″ Canvas.Left=”0″ Canvas.Top=”0″><Canvas.RenderTransform><TranslateTransform X=”0″ Y=”0″/></Canvas.RenderTransform><Canvas.Resources/><!–Unknown tag: metadata–><!–Unknown tag: sodipodi:namedview–><Ellipse xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” Canvas.Left=”7.1″ Canvas.Top=”0″ Width=”14.1″ Height=”14.1″ Name=”circle3405″ Fill=”#E63D5EAB”/><Path xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” Name=”path3407″ Fill=”#E63D5EAB”><Path.Data><PathGeometry Figures=”M14.132 16.012C6.327 16.012 0 22.339 0 30.143v0v42.395l28.263-28.263V30.143  C28.263 22.339 21.936 16.012 14.132 16.012z M22.332 44.275h-3.956v-8.347H9.814v8.347H5.872V23.784h3.942v8.076h8.562v-8.076  h3.956V44.275z” FillRule=”NonZero”/></Path.Data></Path></Canvas></Viewbox>`

I am LOSTOther 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):

`<Canvas Name=”Layer_1″ Width=”28.263″ Height=”72.538″><Canvas.RenderTransform><TranslateTransform X=”210″ Y=”300″/></Canvas.RenderTransform><Ellipse Canvas.Left=”7.1″ Canvas.Top=”0″ Width=”14.1″ Height=”14.1″ Name=”circle3405″ Fill=”{StaticResource PhoneAccentBrush}” Opacity=”0.8″/><Path Name=”path3407″ Fill=”{StaticResource PhoneAccentBrush}” Data=”M14.132 16.012C6.327 16.012 0 22.339 0 30.143v0v42.395l28.263-28.263V30.143 C28.263 22.339 21.936 16.012 14.132 16.012z M22.332 44.275h-3.956v-8.347H9.814v8.347H5.872V23.784h3.942v8.076h8.562v-8.076 h3.956V44.275z” Opacity=”0.8″ /></Canvas>`I Want to Play

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.

Hope you find this technique useful!

 

%d bloggers like this: