Creating Clip Art for Avalon

ndunlap — Mon, 17 May 2004 22:44:00 GMT

I've been asked how I created different Clip Art pieces in my demos a lot recently so I figure this is a good topic to blog on. If any of you have taken a look at typical path data, you are aware that its pretty painful to even think about manipulating or creating path content without some sort of tool. One way I have gotten around this is to turn Microsoft Office into a makeshift editor for creating Avalon ready Clip Art using the Windows Client Printer Driver. Here is a simple how-to:

First make sure you have installed the Windows Client Printer Driver.

Open “Add/Remove Programs” from the Control Panel.
Click on "Add or Remove Windows Components"
In the components list click the checkbox for "Windows Client Printer Driver"

After install is complete you can access the Printer driver from any application that supports printing. I'm not aware of how well other applications will do when working with the printer driver, but I do know that Office 2003 works great.

Here is how I get clipart from Microsoft Word into my XAML projects.

Open a document in Microsoft Word.
Click Insert > Picture > Clip Art...
Change dropdown for "Results should be:" to only search on Clip Art. You can even filter it down further based on file type. I have most success searching for .wmf files only.
Perform your Clip Art search.
Click on a clip art tile to insert it in your Word document.
Click File > Page Setup and set all your Margins to zero. (this is to ensure that the art is drawn starting at a 0,0 reference point for all the resulting paths.)
Click File > Print then choose the Windows Client Printer Driver
Click the “Properties“ button.
Change "Output Format" to "Windows Client Markup File" (otherwise the output will be a .container file which wont let you get into the markup. Choosing Markup File will export a .XAML)
Click "OK" to continue on to printing and specify a file name and destination. (c:\foo.xaml)
Navigate to the file destination and there should be the foo.xaml file and a folder called "foo_files"
Open "Page_1.xaml" in this folder with your XAML editor.
All the Path elements in between the "FixedPage" elements are fair game. Copy and paste those into your app. I find it useful to wrap these elements in Canvas and set the dimensions of the Canvas to the same size as the clip art dimensions that are specified in Word. If you need different dimensions, you can resize the art in Word and export again using the printer driver. I also like to turn clip art into DrawingBrushes for easy reuse at multiple sizes.

Nathan Dunlap : DrawingBrush, Images, Vectors

Creating Clip Art for Avalon