Using WPF and Vector Graphics

Recently I’ve been taking a look at WPF, Microsoft’s not so new now replacement for WinForms.  With the little free time that I have, I’ve relied heavily on Pluralsight for getting up to speed on various technologies.  In working with WPF, I was trying to leverage their concept of “lookless” controls which is very powerful and much nicer to design with than WinForms. 

To summarize my tribulations, I was having a hard time loading a local resource that was a SVG.  Blend Expression, a WPF designer, doesn’t support SVG directly but it does support .pdf (a form of SVG) and .ai (Adobe Illustration).  There are a couple of ways to product .pdf or .ai files.  My approach was to use a tool I’ve used in the past, Inkscape, see Inkscape A Cool Tool.  Inkscape also support generating a XAML file directly from the SVG file which you can leverage directory or copy the contents of XAML output into a resource dictionary.

1.  Open or create your SVG file in Inkscape.

2.  PDF format: Select Save As and choose .pdf format.  It will display a dialog as below once you click Save, ensure you select “Convert texts to paths”, then click OK.  Once the file is saved you can rename the file extension from .pdf to .ai.  It will now be recognized in Expression Blend.



3.  XAML format:  Select Save As and choose .xaml format.  This will export it directly to a XAML file.  You can take the content line, element is a ViewBox, and put that directory in a resource file.

No comments: