Nate's Stuff

A couple of weeks ago I listened to a presentation by Scott Hanselman about scaling your life. One of the many great pieces of advice is to blog about something rather than email an answer.

So this afternoon my good friend Alex asked me how we used to convert Vector PDF images to XAML Drawing Brushes so they can be applied to objects as a background, for instance. The vector part of that sentence is important because any rasterized portions of the PDF will be excluded in this process.

Well, there really isn’t a lot to it, so here are the instructions:

1. Open up your vector image in Inkscape. Inkscape can open a wide variety of images, including PDF.
   
2. Click File –> Save As. Drop the Save as Type to “Microsoft XAML (*.xaml)” and save the file as XAML. Once the file is saved you can open it up in Internet Explorer to see how the conversion process went. The problem though, is that this is painting directly to a canvas and is not packaged to be used as a background.
   
3. Open up Microsoft Expression Blend. Create a new project. Open up the XAML for the main file and replace it with the contents from your file from step 2.
   
   
4. Select all parts of the drawing then select Tools –> Make Brush Resource –> Make Drawing Brush Resource. This will pop open a dialog that will give you some options about where to define this resource and what it should be named.
   

So now your technically done. The contents of the Resource Dictionary now contain your new Drawing Brush Resource. To test it out clear all content from your main window except for the Window and Grid objects. Click the whitespace and open the properties inspector. Click the square dialog button for the Background and select Local Resource and the name you gave your brush. You should now be able to see your image:

The reason it is stretched is because your drawing brush will stretch to fill it’s contents. If you have a look at the XAML of the main window shows you will see the following XAML:

<Grid Background="{DynamicResource MindfireBackground}">