Geeks With Blogs
Imran Shaik Silverlight Quintessential Rambling

Need to send some Silverlight flowers this valentines day and don't know how to design? I am here to show you how you can get free clip art and convert them into Silverlight XAML.

For this example, I used

  • Microsoft Office Clip Organiser (Comes with Microsoft Office) 
  • Adobe Illustrator CS2
  • Microsoft Expression Design 1.0
  • Microsoft Blend 2 December Preview

With everything ready, start with Microsoft Office Online where you can get the clip art, search for the clip art you need (but ensure that you are using "Clip art") 2008-02-04_003826


Clip arts on Microsoft Office online are in png and wmf format, before you select the clip art make sure that the file format that you are using is wmf, png files are raster images so we can't use them to convert them into XAML, we need wmf (Windows Metafile), as they are vector graphics.

Once you select your clip art you can download them into your PC (you have to accept the license and download ActiveX plug-in)

Once the download is done, Microsoft Clip Organiser will open where you can review download.


Now you need the location of the clip art on your local drive, to do this 2008-02-04_004050 click on the options for the clip art and then select, "Preview/Properties"



You can see the location of the file in "Preview/Properties in in bottom left", Copy the location and then open Adobe Illustrator.

In Adobe Illustrator paste the location and open the wmf file, now you can change the color of the file and/or edit the paths.

(NOTE: Do not manipulate the illustration without first saving the file in Adobe Illustrator Format (.ai), this will cause changed in actual clip art)

The reason we need Adobe Illustrator is because Microsoft Design doesn't support "Windows Metafile(.wmf), but support Adobe Illustrator format (.ai)

Resolution Issue.

Adobe Illustrator support 72dpi resolution where as by default Expression Design/Silverlight support 96dpi, if you directly convert 72dpi resolution to 96dpi resolution it will cause in increment of about 125% in size, so 1 inch of image will be converted into approximately 1.25 inches, to keep the size same make sure that the resolution in Adobe Illustrator and Expression Design is the same.  (If you don't understand this leave a comment and I'll post a blog entry on Resolution issue)

2008-02-04_004225  Design-1

Expression Design doesn't support direct AI format to open the files so you have first make a new document, and from File menu Import, and then select the saved Illustrator (.ai) file, Design also allows you to manipulate or change the graphics, by changing the size or colors or whatever you wish, there are some features available in Design that are not support by Illustrator so I prefer to work with both,(if you need more info, all you have to do is leave a message)


When everything is done, just select File>Export and select the XAML format, you can save this in Silverlight XAML as well as in WPF XAML make sure that you select the right format for exporting the XAML.

NOTE: You can also export XAML from Adobe Illustrator using Mike Swanson's AI->XAML Convertor and this doesn't require Expression Design but as I have seen many times, I get better results with Expression Design. (Need more info? By now you should know what to do) 

Now that your XAML is in Silverlight format you can play with it as you wish by importing it in Expression Blend, to import this XAML in your Silverlight project, start a new Silverlight project, right click on the project and select "Add Existing Item" 2008-02-04_015648, now you have your xaml ready to go,if you want to insert this XAML into the main canvas just select the xaml code from the XAML window (except the main Canvas tags) and then paste it in your Page.XAML.



Hope you enjoy! Happy Valentines Day! And don't forget to leave a comment.

Posted on Monday, February 4, 2008 2:03 AM Silverlight | Back to top

Comments on this post: Converting Clip Art to Silverlight XAML

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © Imran Shaik | Powered by: