As Silverlight  and WPF adoption widens the interest  by many development houses in having design deliverables made available to them in XAML is seeing greater demand. Designers are scurrying to find answers to creating XAML. Many traditional design firms over the years have not been very big on their artists and design crew using PC hardware for their staff if they don't do Windows development. A lot of them have moved to other platforms, mainly Apple. Within the last couple of years Apple has announced a move to Intel hardware which narrows the disparity because many of them can now run Microsoft Windows operating systems on their boxes. This solves multiple problems, however getting designers to leave the tools they are familiar with to learn something new is still difficult. At many times is a no-go in design houses and they avoid bidding on projects where they have to retrain or learn a new toolset..

This article is an exploration for designers who aren't taking advantage of the Expression Studio tools, who need to produce XAML design deliverables. It will explore the positives, as well as the drawbacks, associated with using other tools for production of XAML design deliverables. For this topic we will focus on XAML production on the Apple Macintosh and use it as the "example" platform as many design houses use it and many designers who use it are usually are very loyal to those tools and the Apple hardware..

In the past designers have mocked up UI screens in tools like Adobe Photoshop however as we all have found out that doesn't always transport well to something the developer can use.. Microsoft designed the Expression Studio to re-invent the work flow, to make designers more important in the equasion and retain design integrity across the design and development process. This is not to say we cannot integrate other tools and software into this process as well however.

Enter Fireworks CS3

If you are a developer who uses Adobe and Macromedia products you probably have heard of Fireworks. What makes Fireworks so wonderful is it let's you take a UI design either in bitmap or with vector graphics or both and cut it up to be used with interactivity for the web. The application also understands things like "application state" in the design.  It makes the job of producing working UI for a web browser much easier. The nice thing about Fireworks, is Adobe also creates a Mac version as part of it's creative suite. All the plug-ins for it are mostly cross-platform, so a Mac version of the product will run a plug-in designed on the PC. We can use that in our favor, because there is a XAML exporter available over at the Adobe Exchange for Fireworks.

After installing the Exporter we can use it to capture the design as XAML. The exporter is a free product designed by Infragistics (who has been involved in a lot of past Windows development) called FWtoXAML. It's a free plug-in.. It offers many features as well. Including pasting XAML code to the clipboard so you could have an Expression product like Expression Blend running on Windows through something like Parallels Desktop for the Mac and paste the XAML right into your PC project in Blend at the same time. For those who don't know what Parallels is, it's a hardware virtualization product  that lets you run Windows alongside Apple MacOS at the same time on the screen (think Virtual PC but much faster)..

After installed and in-use there are many features that this plug-in offers including:

1. Copy XAML to Clipboard
2. Save XAML to File
3. Convert entire frame or selected items
4. Export embedded bitmaps
5. Export bitmap effects (blur, glow, drop shadow, inner bevel)
6. Export Fills as Resources
7. Export Fill Textures (New!)
8. Export Pattern Fills (New!)
9. Maintain Clipping Paths (New!)
10. Use condensed or verbose path syntax
11. Convert rectangles to Borders
12. Maintain groups
13. Convert text to paths

Things Missing...

It's very powerful and basically supports everything you could possibly support with Fireworks. However there are several things you won't be able to do with it, but in the design stage that shouldn't matter because it's usually the integrator role who is responsible for the next step (when you start adding events, animations and timelines-things you can either code by hand in the XAML or use Expression Blend to create).

Several things to be aware that you shouldn't use when working with the Fireworks XAML exporter  (yes the XAML doesn't come out quite right if you use these options).

On the Output Tab 

• Export Images – Don’t export images from Fireworks here, use the other export menu option.
• Fill Textures using images – Stay away, not sure this works properly!
• Pattern Fills (using images) – Again very problematic, not worth it..
• Bitmap Effects – not a good idea. The use of these even though it is possible will hurt application performance during rendering.
• Exporting Text works very well.
• Exporting text on a path, should be converted to Paths.

On the XAML Options Tab

• Grid or Canvas – Either for WPF works fine but if you are doing this for a Silverlight XAML project you need to use Canvas export.
• Convert Rectangles to Borders – most of the time this is needed.
• Element Names – important to name layered groups. Naming is very important with XAML, you usually just can't use defaults.
• Export Fills As Resources – Unchecked. This is a WPF option, as Resource Dictionaries are not quite there with the current Silverlight 1.1 Alpha release and not supported in 1.0 at all. Most developers set these things up (in WPF) before they export from Fireworks at all. It's nice that it's there, but not extremely useful at this stage in design.
  

So that will walk you through creating a XAML deliverable design and exporting it on the Mac.. After you have the XAML you can get a tool like SilverlightPAD and preview the XAML exported for issues and problems and make sure that it works for you.

You can find it with the Silverlight SDK and it also runs right here on this webpage.

And that should give you a decent XAML deliverable design that can be passed to the integrator to wire-up with events and further animation. You can do a lot of that in code in SilverlightPAD if you wish, but wiring the events up usually is done in Blend then passed for further coding to Visual Studio. XML and Object Databinding (like you'd do to wire-in database data via in memory objects) are more friendly to work in with Expression Blend and Visual Studio. It is possible to run these on a Mac via BootCamp (which requires rebooting the machine and starting Windows from a separate partition, or using something like Parallels Desktop or VMWare Fusion. I personally like Parallels Desktop 3.0 because it runs even 32-bit Windows Vista nicely at the same time (if your machine has at least 2GB of RAM) and you can cut and paste directly between simultaneous Mac and Windows applications. They are calling it the "Best of Both Worlds" so far, I am not sure I totally believe that because well like everyone else I have my own OS biases, but this is a good way to get productive very FAST when creating XAML design assets..

Footnotes (from Soup to Nuts)

One of the guys at Infragistics (a designer named Grant Hinkson) who created the Fireworks to XAML converter, also has been working on a WPF Resources Visualizer called Pistachio. When working with large WPF projects where there are many visual assets and resources, it's important sometimes to look at their usage and get a look at the bigger picture and see how it may affect performance. Pistachio lets you do this nicely looking at assets in a project through a 3d Carousel. It's a free download at the moment and worth checking into. At the moment since it only supports WPF projects, it's a Windows-Only application. Maybe Mr. Hinkson will build out something like this in Silverlight when RESOURCES are available down the road in later versions of Silverlight.