Using the Fireworks to XAML panel in Fireworks CS3

Additional Requirements

Fireworks to XAML panel

• xaml_panel_fw_cs3.zip (ZIP, 96K)

XAML (Extensible Application Markup Language) is a key ingredient in Microsoft's new WPF platform, introduced with Windows Vista and available via Windows Update for Windows XP. Application user interfaces may be defined using XAML and are rendered using a new vector-based rendering engine. Because the majority of artwork defined within Fireworks is stored internally in vector format, Fireworks layouts can be translated directly to XAML. Creating application mockups in Fireworks has never made more sense!

I designed the Fireworks to XAML panel to help you move artwork quickly from Fireworks CS3 to Microsoft Blend—or your other Windows Presentation Foundation (WPF) tool of choice. You can choose to convert only the selected items on the Stage or the entire frame of elements. Furthermore, you can specify whether the XAML output is copied directly to the Clipboard or written to a file.

When converting artwork to XAML, you are in control of many aspects of the output. The Fireworks to XAML panel splits options into two tabs: Output and XAML Options. Use the Output tab to enable and disable certain export features and specify whether the current selection or the entire frame should be exported. Use the XAML Options tab to tailor the generated XAML to your specific needs.

Output tab

The Output tab  (see Figure 1) groups settings into three categories: Export Options, Text Options, and Export Type. The Export Options section lets you specify how bitmaps and bitmap effects should be handled when you export your artwork. When any of the first three options are enabled, PNG files will be created for each bitmap encountered during the conversion to XAML.

Fireworks supports both vector and bitmap artwork. When you import a bitmap into a Fireworks document, that bitmap is stored within the document and not maintained as an external reference. XAML files, however, are pure text files and do not support embedded bitmaps. When a Fireworks document is converted to XAML, all embedded bitmaps must first be exported then referenced in the XAML using an <Image /> or <ImageBrush /> tag.

The Fireworks to XAML panel supports three types of bitmap usage scenarios: embedded bitmaps, bitmap textures, and bitmap patterns. As you can see in Figure 1, you must enable these export options on the Output tab (Export Options): Images, Fill Textures (Bitmap), and Pattern Fills (Bitmap). When Fill Textures and Pattern Fills are encountered, a copy of the original element is placed in the foreground with an ImageBrush (representing the texture or pattern) applied.

You will be prompted to select an output folder when any of these options is selected and if a bitmap is encountered in the document. The resulting XAML will reference images using an absolute paths.

The last item under Export Options is Bitmap Effects. WPF BitmapEffects are similar in concept to Live Effects in Fireworks, although the Live Effects and their corresponding settings do not map directly to the WPF BitmapEffects. WPF provides Bevel, Blur, DropShadow, Emboss, and OuterGlow effects, each of which is supported with varying degrees of accuracy in the panel. I have found that with just a little hand-tweaking in Blend, the same results that I had in Fireworks may be achieved.

XAML Options tab

The XAML Options tab is for tailoring the generated XAML to your specific needs (see Figure 2).

Generated XAML

The XAML generated by the Fireworks to XAML panel is created with the goal of being editable in Microsoft Blend. The same Fireworks elements could potentially be represented by multiple XAML interpretations. When faced with a choice, I tried to choose a solution that would provide the best design-time experience.

Tailoring the XAML

The XAML Options tab lets you tailor the XAML that is generated based on your particular usage scenario. The first option lets you choose either a Grid or a Canvas as the root panel. The outer panel, whether Canvas or Grid, is always rendered with a fixed size equal to the size of the Stage in Fireworks. You can think of the Stage as a Canvas panel in WPF, with each element sized and positioned absolutely. When Canvas is selected, items are positioned in a root Canvas using Canvas.Left and Canvas.Top and have fixed height and width properties.

The Grid panel in WPF is similar in concept to an HTML table: it can contain multiple rows and columns of fixed and varying size—and can either be of fixed width and height or scale dynamically, based on the size of its container.

When Grid is chosen as the Outer Panel Type in the Fireworks to XAML panel, child elements are positioned using the Margin property in combination with the HorizontalAlignment and VerticalAlignment properties. HorizontalAlignment and VerticalAlignment are both set to Stretch on the generated elements, and margins are used to enforce their initial size as defined in Fireworks. When the root Grid is scaled or stretched, the child elements will stretch as well. This layout method is a great choice when defining scalable elements, such as buttons or headers.

Rectangles and borders

Select the Convert Rectangles to Borders option when you want to specify unique corner radii for each corner of a rectangle. The WPF Border control has a CornerRadius property that accepts values for TopLeft, TopRight, BottomRight, and BottomLeft.

Note: Not all rectangle elements in your document can be converted to borders. If you have rotated, skewed, or stretched a rectangle, the rectangle will be converted to a path when exported in an attempt to render output as true to the original document as possible.

Resources

When you check the Export Fills as Resources option, a resources collection will be added to the root element (Grid or Canvas). Each brush that is encountered will be added to this collection and referenced as a StaticResource on the element's property where it was defined. In order to see these resources in Blend, select the Resources panel and then expand the Grid or Canvas containing your Fireworks artwork.

Converting artwork to XAML

Begin the conversion process by clicking either the Save icon or the Copy icon located in the lower right corner of the panel. When you click Save, you will be prompted to specify an output file. When you click Copy, XAML will be copied directly to the system Clipboard. You may then paste the XAML text directly into your target document.

The Fireworks to XAML exporter is enabled by the rich extensibility model built into Fireworks CS3. Fireworks extensibility is based on JavaScript, which means that intense operations—such as converting a page of elements to XAML—may be a bit time-consuming. So if your export takes a bit longer than you'd like, just be patient and consider doing a partial export next time.

When the Fireworks to XAML panel encounters items it doesn't recognize, it attempts to degrade gracefully, skipping those items or rendering a placeholder. If a gradient type is selected that is not supported by WPF, a solid black brush will be rendered in its place. Keep in mind that most artwork translates accurately to WPF but documents relying heavily on Live Effects and Layer Types will not translate well.

Further reading

To gain additional insight into the creation of the Fireworks to XAML panel—and Fireworks panel development in general—read Developing an effective Fireworks workflow, which I wrote to illustrate the development process I used while authoring this panel. If you're interested in the world of Fireworks extension development, it's a great place to start.

Also check out the Extending topic page in the Fireworks Developer Center.