Free ly: Using Expression Design with Expression Blend and XAML

Jerry Nixon is a team mate of mine and a funnier guy you would have difficulty finding, outside of Kenny Spade another team mate of mine.  If you were in 6th grade with either of these guys you would likely get gigged for deportment, but have fun getting the demerits.

Anyway, Jerry told me once that he was using Expression Design to make an image into a XAML usercontrol.  Why I wondered, and now that he has been at Microsoft for awhile he is too busy to spend time detailing what he is doing.

So I dug in and examined the process of changing a PNG kind of file into a XAML type of UserControl for use in Expression Blend and maybe the phone. 

Where to get an image to convert, clip art for Office is usually a good place to start.  These are located at: http://office.microsoft.com/en-us/images/

Most, but not all are downloaded as WMF, which means that they are easily resizable without pixilation.  WMF files can’t be used on the phone, so it will need to be converrted to a XAML Usercontrol, why not a PNG? Well being able to avoid pixilation is a good thing and the XAML type of image does the trick.

I decided to use images similar to the shark:

And those have a link: http://office.microsoft.com/en-us/images/similar.aspx#a:MC900358163 , the link shows all of the similar images.

And my plan is to create a aquatic community with an attitude.

Now let’s take a look at changing the WMF file to a XAML type of file:

	Start with knowing where your image is located on your computer
	Open Expression Design If you don’t have Expressionn Design, and you are a student you can get it for no cost from Dreamspark.com
	Open the Shark.WMF file You cannot import it as an image
	The shark.wmf is imported with the clipping paths shown.  This is good. You can easily remove the shadow (the ellipse at the bottom) Use the direct selection tool (the white one) to loop the shadow (ellipses) and then press delete
	Select the shark image and then right click to export the image
	Here is the Export screen Default is to export to PNG This is not what we want to do.
	On the format combo box click the drop down arrow and then select the XAML Silverlight 4/ WPF Canvas Leave everything the same. Now you have an image file that has a XAML file extension. Yippee!  So What? We can now use Blend to create a UserControl which means that the XAML base image can be used to create resizable images for our game!

In the next post, I will discuss how to use this XAML to create a UserControl