Using XAML Assets

First off, I have chosen a XAML editor to use. XAML is simply a text-based language, so the absolute minimum for composing XAML is a general-purpose text editor. Visual Studio comes with a UI designer, but it only allows the placement of buttons, textboxes, etc. It is not a vector graphics editor. After looking around and trying some demos, I chose Vectropy for my graphics editing. You can check it out at http://www.vectropy.com. Although I chose Vectropy, many of my posts should be applicable to XAML graphic creation in general.

Now, to the first hurdle: actually using a XAML image. XAML images can be viewed on their own in a variety of viewers, such as FireFox (on systems with the .NET 3 framework installed). If creating artwork is your goal, your job is done: just put the .xaml image on your webpage and let people see it. If you want to use your creation for something interactive, such as a desktop application, you'll want to get the XAML code into your project environment. I am using Visual C# 2008 Express Edition (a free compiler and IDE) to build my application, but other environments will work in a similar manner. In any case, add your image to your project (for this example my image is called MyImage.xaml).

Vectropy makes things pretty simple by enclosing saved images in an appropriate container so they can be used very easily. If your XAML editor just saves the XAML image as-is, you'll need to open each image in a text editor and add the following around your image content each time you save your image:



You will also have to add your image to the list of resources your application uses. You can do this by making the application definition file (typically called App.xaml) look like the following:

Your XAML image is now incorporated into your project and ready to be used. For example, add the following to your window:


To produce: