In my previous post, I discussed some of the graphics resources for developers mentioned at the informal pre-meeting session of CapArea Silverlight.
There was one method for sourcing graphics I talk about that I didn't cover in that post: grabbing vector graphics from WikiPedia for use in your Silverlight or WPF projects.
Everybody is familiar with WikiPedia, but not a lot of people know that much of its content is licensed under creative commons and that the site prefers to use SVG for many of its graphics and diagrams.
For this example, we'll take a look at the WikiPedia entry on Maryland.
Notice the map of the US with the state of Maryland highlighted in red, click on that and you'll see the following page:
The image you see is a PNG rendered from a SVG file. Since most people don't have an SVG plug-in to render the image, WikiPedia has made the wise decision to convert it to a more widely used format.
SVG stands for Scalable Vector Graphics, an XML based format for defining vector graphics. It sounds a lot like XAML, but XAML can do so much more.
If you want to know more about XAML vs. SVG, read this post. You don't need to understand the debate, controversy, or pick a side to continue.
Coming back to the topic at hand, right mouse click the link to Map_of_USA_MD.svg? and download the file locally.
If you have Adobe Illustrator, start it up and load the Map_of_USA_MD.svg? into Illustrator.
If you're comfortable with Illustrator, feel free to edit the file. The shape of Maryland is actually wrong, it moves the entire Eastern Shore of Virginia into Maryland. Oops!
Now that you can be smug that you found an error in WikiPedia, you can now export the file into XAML, assuming you've installed Mike Swanson's excellent plug-in.
If you've got the plug-in installed, you'll notice that you have two choices for exporting to XAML: WPF or Silverlight.
Choose the format you'd like and click save.
Remember, even though both WPF and Silverlight share a common language, the dialect can be a little different.
Here's the same SVG file exported to WPF and Silverlight, with the main differences highlighted.
Now, we'll open Blend and add the new XAML file to our project:
Once the XAML file is loaded into Blend, open the file and you'll see it looks just exactly like the version on WikiPedia.
From here, you can convert this to a control, add events, and more.
If you're really industrious you can make a map control.
If maps aren't your thing, then you can keep a sharp eye out for other SVG graphics on Wikipedia or browse through the archives at Open Clip Art.