Adobe Illustrator to XAML

Some of you, my dear readers, have asked how I got over that magical step in my Silverlight Animation Tutorial. The step where I had an Adobe Illustrator file, and then, POOF!, I had the XAML to start working with it.

No, I didn’t recreate the logo in Expression Blend. Mike Swanson created an AI->XAML Exporter. You will need:

* Adobe Illustrator CS2
(I don’t know how they did it, but every trial version of this software on the web has disappeared. There used to be a 30 day trial…now you can only find Illustrator CS3. This is why I save all of my installation files.)

* Mike Swanson’s Export Plug-in

* The rest of his instructions.

One quick thing to remember, however, is that there are a couple of quirks with the XAML you get. The syntax is good. No issues there. But it is creating XAML for WPF, not Silverlight. WPF has a much larger set of tags to work with, and as such, most WPF XAML may not be directly compatible with Silverlight.

Not in a “these are totally different” way, more in a “the opening and closing tags for WPF are different than Silverlight.” WPF uses <window> as its top level tag, and Silverlight uses the <canvas> tag. Window is meaningless to Silverlight, because you don’t have a window for it. It’s only part of a web page. You can see this illustrated below:

Default code generated for a WPF application:

<Window
     xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
     xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
     x:Class=”UntitledApplication1.Window1″
     x:Name=”Window”
     Title=”Window1″
     Width=”640″ Height=”480″>
     <Grid x:Name=”LayoutRoot”/>
</Window>

Default code generated for a Silverlight application:

<Canvas
xmlns=”http://schemas.microsoft.com/client/2007&#8243;
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
Width=”640″ Height=”480″
Background=”White”
x:Name=”Page”
>
</Canvas>

So, in order to use the XAML that is generated by this tool in Silverlight, you’re going to have to chop the “middle” of the XAML out and paste it into your new Silverlight app. Everything else should be the same. Ta-da!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s